目录
在HTML页面中，如果在执行脚本时，页面的状态时不可相应的，直到脚本执行完成后，页面才变成可相应。web worker 是运行在后台的js，独立于其他脚本，不会影响页面的性能。并且通过postMessage将结果回传到主线程。这样在进行复杂操作的时候，就不会阻塞主线程了。
如何创建web worker：
iframe元素会创建包含另外一个文档的内联框架（即行内框架）
优点：
缺点：
label标签来定义表单控件的关系：当用户选择label标签时，浏览器会自动将焦点转到和label标签相关的表单控件上。
使用方法1：
<label for="mobile">Number:</label>
<input type="text" id="mobile"/>使用方法2：
<label>Date:<input type="text"/></label>如果没有defer或async属性，浏览器会立即加载并执行相应的脚本。他不会等待后续加载的文档元素，读取到就会开始加载和执行，这样就阻塞了后续文档的加载。
下图可以直观的看出三者之间的区别：
其中蓝色代表js脚本网络加载事件，红色代表js脚本执行时间，绿色代表html解析时间。
defer和async属性都是去异步加载外部的js脚本文件，它们都不会阻塞页面的解析，其区别如下：
1.SVG：SVG可缩放矢量图标是基于可扩展标记语言xml描述的2D图形的语言，SVG基于xml就意味着SVG DOM中的每个元素都是可用的，可以为某个元素附加JavaScript事件处理器。在SVG中，每个被绘制的图形均被视为对象。如果SVG对象的属性发生变化，那么浏览器能够自动重现图形。
其特点如下：
2.Canvas：Canvas是画布，通过JavaScript来绘制2D图形，是逐像素进行渲染的。其位置发生改变，就会重新进行绘制。
其特点如下：
注：矢量图，也称为面向对象的图像或绘制图像，在数学上定义为一系列由线连接的点。矢量挖金中的图形元素称为对象。每个对象都是一个自成一体的实体，它具有颜色，形状，轮廓，大小和屏幕位置等属性。
head标签用于定义文档的头部，它是所有头部元素的容器。标签中的元素可以引用脚本，指示浏览器在哪里找到样式表，提供元信息等。
文档的头部描述了文档的各种属性和信息，包括文档的标题，在web中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
下面这些标签可用在head部分：<base>,<link>,<meta>,<script>,<style>,<title>.
其中<title>定义文档的标题，它是head部分唯一必需的元素。
响应式页面中经常用到根据屏幕密度设置不同的图片。这时就用到了 img 标签的srcset属性。srcset属性用于设置不同屏幕密度下，img 会自动加载不同的图片。用法如下：
<img src="image-128.png" srcset="image-256.png 2x" />
使用上面的代码，就能实现在屏幕密度为1x的情况下加载image-128.png, 屏幕密度为2x时加载image-256.png。
按照上面的实现，不同的屏幕密度都要设置图片地址，目前的屏幕密度有1x,2x,3x,4x四种，如果每一个图片都设置4张图片，加载就会很慢。所以就有了新的srcset标准。代码如下：
<img src="image-128.png"
srcset="image-128.png 128w, image-256.png 256w, image-512.png 512w"
sizes="(max-width: 360px) 340px, 128px" />
其中srcset指定图片的地址和对应的图片质量。sizes用来设置图片的尺寸零界点。对于 srcset 中的 w 单位，可以理解成图片质量。如果可视区域小于这个质量的值，就可以使用。浏览器会自动选择一个最小的可用图片。
sizes语法如下：
sizes="[media query] [length], [media query] [length] ... "
sizes就是指默认显示128px, 如果视区宽度大于360px, 则显示340px。
产生乱码的原因：
gbk的编码，而内容中的中文字是utf-8编码的，这样浏览器打开即会出现html乱码，反之也会出现乱码；html网页编码是gbk，而程序从数据库中调出呈现是utf-8编码的内容也会造成编码乱码；解决办法：
gbk，而数据库储存数据编码格式是UTF-8，此时需要程序查询数据库数据显示数据前进程序转码；