JS笔记（4/8）之浏览器模型，元素接口

浏览器模型

JS是浏览器内置的脚本语言，浏览器内置了JS引擎，并提供各种接口，以使JS脚本可以控制浏览器的各种功能。一旦网页内嵌了JS脚本，浏览器就会执行脚本，从而达到操作浏览器的目的，实现网页的各种动态效果。

本章介绍浏览器提供的各种JS接口

代码嵌入网页的方法

<script>元素直接嵌入代码。
<script>标签加载外部脚本
事件属性
URL 协议

script元素内部直接嵌入代码：
该标签有一个type属性，用来指定脚本类型。其包含两个属性值

text/javascript：这是默认值，也是历史上一贯设定的值。如果你省略type属性，默认就是这个值。对于老式浏览器，设为这个值比较好。
application/javascript：对于较新的浏览器，建议设为这个值。

由于默认就是JS代码，所以type属性可以省略。

script标签指定加载外部的js脚本文件

<script src="https://www.example.com/script.js"></script>
<script charset="utf-8" src="https://www.example.com/script.js"></script>
//如果脚本文件中使用了非英语字符，还应该在script标签中注明字符的编码
//由于已经指定了JS脚本文件，那么script标签之间的代码就会自动被无视
//该js文件，不应该有heml代码和再出现<script>标签

为了防止攻击者篡改外部脚本，script标签允许设置一个integrity属性，写入该外部脚本的 Hash 签名，用来验证脚本的一致性。

<script src="/assets/application.js"
  integrity="sha256-TvVUHzSfftWg1rcfL6TIJ0XKEGrgLyEq6lEpcmrG9qs=">
</script>

上面代码中，script标签有一个integrity属性，指定了外部脚本/assets/application.js的 SHA256 签名。一旦有人改了这个脚本，导致 SHA256 签名不匹配，浏览器就会拒绝加载。

事件属性
网页元素的事件属性（比如onclick和onmouseover），可以写入 JavaScript 代码。当指定事件发生时，就会调用这些代码。例如：

<button id="myBtn" onclick="console.log(this.id)">点击</button>

上述代码只有一条JS语句，onclick
如果有多个语句，使用分号分割即可。

URL协议
URL 支持javascript:协议，即在 URL 的位置写入代码，使用这个 URL 的时候就会执行 JavaScript 代码。
例如：

<a href="javascript:console.log('Hello')">点击</a>

href后边本来应该需要放一个url地址的，但是换成js语句也是可以使用的；
另外，浏览器的地址栏也支持JS协议，例如将javascript:console.log('Hello')放入地址栏，按回车键也可以执行这段代码。

Script元素

浏览器加载JS脚本，主要通过<Script>元素完成，在网页边下载边解析的过程中，浏览器发现<script>,就停止解析，把网页渲染的控制权转交给JS引擎。如果引用了外部js脚本，就下载该脚本后执行，否则直接执行代码。等JS引擎执行完毕，控制权交还给渲染引擎，继续解析HTML网页。

阻塞效应：外部脚本文件加载时间过长（假死）状态。造成网页长时间失去响应。
比较好的做法：把<script>标签放在页面底部，而不是头部，这样脚本失去响应，用户至少还能看到内容，而不是一张空白的页面。

对于特别重要的代码，需要放在头部的话，最好直接插入代码，而不是引用外部JS脚本文件，同时还能缩短加载时间。

还有一个好处，js脚本如果放在网页尾部，那js代码中调用的dom都是已经生成好的，这样不容易出现调用问题。不过这种情况，好像有其他的解决办法？？？

defer属性
async 属性
为了解决脚本文件下载阻塞网页渲染的问题，可以给<script>元素加入async属性和defer属性。

脚本的动态加载
<script>元素还可以动态生成，生成后再插入页面，从而实现脚本的动态加载。
好处：不会阻塞页面渲染，浏览器不会假死。
缺点：无法保证脚本的执行顺序，哪个脚本文件先下载完成，就先执行哪个。
如果想避免这个问题，可以设置async属性为false。

加载使用的协议
如果不指定，默认http协议下载

<script src="example.js"></script>

如果采用HTTPS下载，必须写明

<script src="https://example.js"></script>

如果根据页面本身的协议来加载，可以写成：

<script src="//example.js"></script>

浏览器的组成

浏览器的核心是两部分：渲染引擎和 JavaScript 解释器（又称 JavaScript 引擎）
渲染引擎
不同的浏览器渲染引擎不同

Firefox：Gecko 引擎
Safari：WebKit 引擎
Chrome：Blink 引擎
IE: Trident 引擎
Edge: EdgeHTML 引擎

渲染通常分为4个阶段：

1. 解析代码：HTML代码解析为DOM，CSS代码解析为CSSOM（CSS的对象模型）
2. 对象合成：将DOM和CSSOM合成一颗渲染树（render tree）
3. 布局：计算出渲染树的布局（layout）
4. 绘制：将渲染树绘制到屏幕。

以上四步，并非严格按顺序执行，往往第一步还没完成，第二步和第三步就已经开始了

重流和重绘

渲染树转换为网页布局，称为“布局流”（flow）；
布局显示到页面的这个过程，称为“绘制”（paint）。
它们都具有阻塞效应，并且会耗费很多时间和计算资源。

页面生成以后，一些操作（脚本操作，样式表操作，用户交互）会触发“重流”（reflow）和“重绘”（repaint）。

重流和重绘并不一定一起发生，重流必然导致重绘，重绘不一定需要重流。大多数情况，浏览器会自己判断，最小化代价

作为开发者：设法降低重绘的次数和成本
比如，尽量不要变动高层的 DOM 元素，而以底层 DOM 元素的变动代替

一些优化技巧

• 读取 DOM 或者写入 DOM，尽量写在一起，不要混杂。不要读取一个 DOM 节点，然后立刻写入，接着再读取一个 DOM 节点。
• 缓存 DOM 信息。
• 不要一项一项地改变样式，而是使用 CSS class 一次性改变样式。
• 使用documentFragment操作 DOM
• 动画使用absolute定位或fixed定位，这样可以减少对其他元素的影响。
• 只在必要时才显示隐藏元素。
• 使用window.requestAnimationFrame()，因为它可以把代码推迟到下一次重流时执行，而不是立即要求页面重流。
• 使用虚拟 DOM（virtual DOM）库。

JS引擎
JavaScript 是一种解释型语言，也就是说，它不需要编译，由解释器实时运行。
好处：是运行和修改都比较方便，刷新页面就可以重新解释；
缺点：是每次运行都要调用解释器，系统开销较大，运行速度慢于编译型语言。

为了提高运行速度，目前浏览器都将JS进行一定程度的编译，生成类似字节码（bytecode）的中间代码，以提高运行速度

早期，浏览器内部对JS的处理过程如下：

1. 读取代码，进行词法分析（Lexical analysis），将代码分解成词元（token）。
2. 对词元进行语法分析（parsing），将代码整理成“语法树”（syntax tree）。
3. 使用“翻译器”（translator），将代码转为字节码（bytecode）。
4. 使用“字节码解释器”（bytecode interpreter），将字节码转为机器码。

即时编译（Just in time compiler）：字节码在运行时才编译，使用到哪一行才编译哪一行，并且编译结果会缓存（inline cache）

字节码在编译成为机器码的过程中是在一个虚拟机（Virtual Machine）上运行的，这个虚拟机就是JS引擎。以下是常见的JS虚拟机：

• Chakra (Microsoft Internet Explorer)
• Nitro/JavaScript Core (Safari)
• Carakan (Opera)
• SpiderMonkey (Firefox)
• V8 (Chrome, Chromium)

windows对象

浏览器，windows对象，指当前的浏览器窗口。它也是当前页面的顶层对象，即最高一层的对象，所有其他对象都是他的下属。未声明的变量，那么就是顶层对象的属性。

属性：

以下各种对象，多数都是windows的原生对象

Navigator 对象，Screen 对象

Navigator是一个包含浏览器和系统信息的对象，脚本通过这个对象了解用户的环境信息。
该对象包含很多属性和方法

screen对象表示当前窗口所在的屏幕，提供显示设备的信息。
该对象包含很多属性和方法

Cookie

概述

Cookie是服务器保存在浏览器的一小段文本信息，一般大小不能超过4KB。浏览器每次向服务器发出请求，就会自动附上这段信息

一般用来保存

• 登录信息，购物车等需要记录的信息
• 个性化信息，比如用户的偏好，字体大小，背景色等等
• 追踪用户，记录和分析用户行为

客户端储存应该使用 Web storage API 和 IndexedDB。只有那些每次请求都需要让服务器知道的信息，才应该放在Cookie里面。

每个Cookie应该包括的内容

• Cookie的名字 key
• Cookie的值（真正数据写在这里面）value
• 到期时间
• 所属域名（默认为当前的域名 ）domain
• 生效的路径（默认是当前的网址，当前网址以及其子路径都会生效）path

第一次访问时，服务器在浏览器中写入一个Cookie，以后浏览器访问某个路径，就会找到对该路径有效且没有到期的Cookie,一起发送给服务器。

用户可以设置是否接受发送Cookie,当然可以查看Cookie功能

window.navigator.cookieEnabled属性返回一个布尔值，表示浏览器是否打开 Cookie 功能。

window.navigator.cookieEnabled // true

不同浏览器对Cookie限制不同，一般，个数不超30个，大小不能超过4KB。超过不会被设置，自动忽视。

浏览器《同源政策》规定：两个网址，只要域名和端口相同，就可以共享Cookie（不要求协议相同）

document.cookie属性返回当前网页的 Cookie。

document.cookie // "id=foo;key=bar"

Cookie与HTTP协议

Cookie由HTTP协议生成，主要供HTTP协议使用

Cookie的生成（服务器希望浏览器保存Cookie时）：就要在 HTTP 回应的头信息里面，放置一个Set-Cookie字段。，可以放多个该字段，也可以一个字段里放多个属性

修改之前设置的Cookie：

Cookie的发送（浏览器向服务器发送）：这时要使用HTTP头信息的Cookie字段。该字段也可以包含多个Cookie,用分号隔开

Cookie的属性
Expires，Max-Age
Expires属性指定一个具体的到期时间，到了指定时间以后，浏览器就不再保留这个Cookie.它的值是UTC格式。
不设置这个属性的话，一旦浏览器该窗口关闭，当前会话（session）结束，该Cookie就会被删除；这种Cookie也被称为SessionCookie

Max-Age属性指定从现在开始Cookie存在的秒数，过了这个时间就不再保存这个Cookie; 格式比如：60 * 60 * 24 * 365

？同时设置，优先级怎么样？

Domain，Path
Domain属性指定浏览器发出HTTP请求时，哪些域名附带这个Cookie,如果没有指定该属性，浏览器就会默认当前域名，但子域名不会附带这个Cookie。比如，example.com不设置Cookie的domain属性，那么sub.example.com将不会附带这个Cookie。如果指定了domain属性，那么子域名也会附带这个Cookie。

Path属性指定浏览器发出HTTP请求时，哪些路径要附带这个Cookie。该路径的子路径也会包含这个Cookie。（前提域名得一致）

Secure，HttpOnly
Secure属性指定浏览器只有在加密协议 HTTPS 下，才能将这个 Cookie 发送到服务器。另一方面，如果当前协议是 HTTP，浏览器会自动忽略服务器发来的Secure属性。该属性只是一个开关，不需要指定值。如果通信是 HTTPS 协议，该开关自动打开。

HttpOnly属性指定该 Cookie 无法通过 JavaScript 脚本拿到，主要是document.cookie属性、XMLHttpRequest对象和 Request API 都拿不到该属性。这样就防止了该 Cookie 被脚本读到，只有浏览器发出 HTTP 请求时，才会带上该 Cookie。

给Cookie设置该属性，JS代码就无法读取一个网页在浏览器所对应的cookie；

SameSite
用来防止CSRF攻击和用户追踪

document.cookie
document.cookie属性用于读写当前网页的 Cookie。
读取的时候，它会返回当前网页的所有 Cookie，前提是该 Cookie 不能有HTTPOnly属性。

XMLHttpRequest 对象

浏览器随着发展，允许JS脚本访问服务器，这样就不用刷新整个网页，
学术名称：AJAX(Asynchronous JavaScript and XML)的缩写。指的是通过JS的异步通信，从服务器获取XML文档从中提取数据，再更新当前网页的对应部分。

只要用脚本发起通信，就可以叫做AJAX通信。

AJAX包括以下几个步骤。

1. 创建 XMLHttpRequest 实例
2. 发出 HTTP 请求
3. 接收服务器传回的数据
4. 更新网页数据

AJAX通过原生的XMLHttpRequest对象发出HTTP请求，得到服务器返回的数据后，再进行处理。现在服务器返回的都是JSON格式的数据，XML格式已经过时了，但是AJAX已经变成了通用名词，字面含义已经消失了。

XMLHttpRequest对象是 AJAX 的主要接口，用于浏览器与服务器之间的通信。尽管名字里面有XML和Http，它实际上可以使用多种协议（比如file或ftp），发送任何格式的数据（包括字符串和二进制）。

XMLHttpRequest本身是一个构造函数，可以使用new命令生成实例。它没有任何参数。

实力属性：
XMLHttpRequest.readyState
XMLHttpRequest.onreadystatechange
XMLHttpRequest.response
XMLHttpRequest.responseType
XMLHttpRequest.responseText
XMLHttpRequest.responseXML
XMLHttpRequest.responseURL
XMLHttpRequest.status，XMLHttpRequest.statusText
XMLHttpRequest.timeout，XMLHttpRequestEventTarget.ontimeout
事件监听属性
XMLHttpRequest.withCredentials
XMLHttpRequest.upload

实例方法：
XMLHttpRequest.open()
XMLHttpRequest.send()
XMLHttpRequest.setRequestHeader()
XMLHttpRequest.overrideMimeType()
XMLHttpRequest.getResponseHeader()
XMLHttpRequest.getAllResponseHeaders()
XMLHttpRequest.abort()

实例的事件：
readyStateChange 事件
progress 事件
load 事件、error 事件、abort 事件
loadend 事件
timeout 事件

Navigator.sendBeacon()

同源限制

浏览器的安全基石是“同源政策”（same-origin policy）。
同源的含义：

• 协议相同
• 域名相同
• 端口相同

如果非同源，会有三种行为受到限制

1. 无法读取非同源网页的Cookie、LocalStorage和IndexedDB
2. 无法接触非同源网页的DOM
3. 无法向非同源地址发送AJAX请求（可以发送，但浏览器会拒绝接受响应）

虽然这些限制是必要的，但是有时很不方便，合理的用途也受到影响。所以有了很多用来规避这些限制的方法。

CORS 通信

CORS是一个W3C标准，称是“跨域资源共享”（Cross-origin resource sharing）。它允许浏览器向跨域的服务器，发出XMLHttpRequest请求，从而克服AJAX只能同源使用的限制

Storage 接口

Storage 接口用于脚本在浏览器保存数据。两个对象部署了这个接口：
window.sessionStorage和window.localStorage。

两者区别和联系：
sessionStorage保存的数据用于浏览器的一次会话（session），当会话结束（通常是窗口关闭），数据被清空；localStorage保存的数据长期存在，下一次访问该网站的时候，网页可以直接读取以前保存的数据。除了保存期限的长短不同，这两个对象的其他方面都一致。

保存的数据都以“键值对”的形式存在。也就是说，每一项数据都有一个键名和对应的值。所有的数据都是以文本格式保存。

目前，每个域名的存储上限视浏览器而定，Chrome 是 2.5MB，Firefox 和 Opera 是 5MB，

Storage只有一个属性：length
Storage.length：返回保存的数据项个数。

Storage有5个方法。
Storage.setItem()
Storage.getItem()
Storage.removeItem()
Storage.clear()
Storage.key()

storage 事件
Storage 接口储存的数据发生变化时，会触发 storage 事件，可以指定这个事件的监听函数。

History 对象

window.history属性指向 History 对象，它表示当前窗口的浏览历史。
History 对象保存了当前窗口访问过的所有页面网址。

下面代码表示当前窗口一共访问过3个网址。

window.history.length // 3

对History对象操作

// 后退到前一个网址
history.back()
// 等同于
history.go(-1)

属性2个

• History.length：当前窗口访问过的网址数量（包括当前网页
• History.state：History 堆栈最上层的状态值

方法

• History.back()：移动到上一个网址，等同于点击浏览器的后退键。对于第一个访问的网址，该方法无效果。
• History.forward()：移动到下一个网址，等同于点击浏览器的前进键。对于最后一个访问的网址，该方法无效果。
• History.go()：接受一个整数作为参数，以当前网址为基准，移动到参数指定的网址，比如go(1)相当于forward()，go(-1)相当于back()。如果参数超过实际存在的网址范围，该方法无效果；如果不指定参数，默认参数为0，相当于刷新当前页面。
• History.pushState()方法用于在历史中添加一条记录。
• History.replaceState()方法用来修改 History 对象的当前记录，其他都与pushState()方法一模一样。

事件
每当同一个文档的浏览历史（即history对象）出现变化时，就会触发popstate事件。

Location 对象

Location对象是浏览器提供的原生对象，提供 URL 相关的信息和操作方法。通过window.location和document.location属性，可以拿到这个对象。

属性

方法

URL 对象

网页的 URL 只能包含合法的字符。合法字符分成两类。
JavaScript 提供四个 URL 的编码/解码方法。

• encodeURI()
• encodeURIComponent()
• decodeURI()
• decodeURIComponent()

URL接口
URL接口是一个构造函数，浏览器原生提供，可以用来构造、解析和编码 URL。一般情况下，通过window.URL可以拿到这个构造函数。
URL作为构造函数，可以生成 URL 实例。

属性

方法

URLSearchParams 对象

URLSearchParams对象是浏览器的原生对象，用来构造、解析和处理 URL 的查询字符串（即 URL 问号后面的部分）。
它本身也是一个构造函数，可以生成实例。
无属性，只有实例方法
URLSearchParams.toString()
URLSearchParams.append()
URLSearchParams.delete()
URLSearchParams.has()
URLSearchParams.set()
URLSearchParams.get()，URLSearchParams.getAll()
URLSearchParams.sort()
URLSearchParams.keys()，URLSearchParams.values()，URLSearchParams.entries()

ArrayBuffer 对象

ArrayBuffer 对象表示一段二进制数据，用来模拟内存里面的数据。通过这个对象，JavaScript 可以读写二进制数据。这个对象可以看作内存数据的表达。

这个对象是 ES6 才写入标准的，普通的网页编程用不到它，

Blob 对象

Blob 对象表示一个二进制文件的数据内容，比如一个图片文件的内容就可以通过 Blob 对象读写。它通常用来读写文件，它的名字是 Binary Large Object （二进制大型对象）的缩写。它与 ArrayBuffer 的区别在于，它用于操作二进制文件，而 ArrayBuffer 用于操作内存。

浏览器原生提供Blob()构造函数，用来生成实例对象。

File 对象

File 对象代表一个文件，用来读写文件信息。它继承了 Blob 对象，或者说是一种特殊的 Blob 对象，所有可以使用 Blob 对象的场合都可以使用它。
浏览器原生提供一个File()构造函数，用来生成 File 实例对象。
File.lastModified：最后修改时间
File.name：文件名或文件路径
File.size：文件大小（单位字节）
File.type：文件的 MIME 类型

File 对象没有自己的实例方法，由于继承了 Blob 对象，因此可以使用 Blob 的实例方法slice()。

FileList 对象

FileList对象是一个类似数组的对象，代表一组选中的文件，每个成员都是一个 File 实例。它主要出现在两个场合。
文件控件节点（）的files属性，返回一个 FileList 实例。
拖拉一组文件时，目标区的DataTransfer.files属性，返回一个 FileList 实例。

FileReader 对象

FileReader 对象用于读取 File 对象或 Blob 对象所包含的文件内容。

浏览器原生提供一个FileReader构造函数，用来生成 FileReader 实例。

FileReader的实例属性。
FileReader.error：读取文件时产生的错误对象
FileReader.readyState：整数，表示读取文件时的当前状态。一共有三种可能的状态，0表示尚未加载任何数据，1表示数据正在加载，2表示加载完成。
FileReader.result：读取完成后的文件内容，有可能是字符串，也可能是一个 ArrayBuffer 实例。
FileReader.onabort：abort事件（用户终止读取操作）的监听函数。
FileReader.onerror：error事件（读取错误）的监听函数。
FileReader.onload：load事件（读取操作完成）的监听函数，通常在这个函数里面使用result属性，拿到文件内容。
FileReader.onloadstart：loadstart事件（读取操作开始）的监听函数。
FileReader.onloadend：loadend事件（读取操作结束）的监听函数。
FileReader.onprogress：progress事件（读取操作进行中）的监听函数。

表单，FormData 对象

表单（）用来收集用户提交的数据，发送到服务器。比如，用户提交用户名和密码，让服务器验证，就要通过表单。表单提供多种控件，让开发者使用，具体的控件种类和用法请参考 HTML 语言的教程。本章主要介绍 JavaScript 与表单的交互。

表单数据以键值对的形式向服务器发送，这个过程是浏览器自动完成的。但是有时候，我们希望通过脚本完成过程，构造和编辑表单键值对，然后通过XMLHttpRequest.send()方法发送。浏览器原生提供了 FormData 对象来完成这项工作。

表单的内置验证

自动验证
表单提交的时候，浏览器允许开发者指定一些条件，它会自动验证各个表单控件的值是否符合条件。

手动验证
表单元素和表单控件都有checkValidity()方法，用于手动触发校验。

willValidate 属性
validationMessage 属性
setCustomValidity()
validity 属性
表单的 novalidate 属性

enctype 属性
表单能够用四种编码，向服务器发送数据。编码格式由表单的enctype属性决定。

文件上传
用户上传文件，也是通过表单。具体来说，就是通过文件输入框选择本地文件，提交表单的时候，浏览器就会把这个文件发送到服务器。

IndexedDB API

概述

诞生背景：
随着浏览器的功能不断增强，越来越多的网站开始考虑，将大量数据储存在客户端，这样可以减少从服务器获取数据，直接从本地获取数据。

现有的浏览器数据储存方案，都不适合储存大量数据：Cookie 的大小不超过 4KB，且每次请求都会发送回服务器；LocalStorage 在 2.5MB 到 10MB 之间（各家浏览器不同），而且不提供搜索功能，不能建立自定义的索引。

所以，需要一种新的解决方案，这就是 IndexedDB 诞生的背景。

介绍
通俗地说，IndexedDB 就是浏览器提供的本地数据库，它可以被网页脚本创建和操作。IndexedDB 允许储存大量数据，提供查找接口，还能建立索引。这些都是 LocalStorage 所不具备的。就数据库类型而言，IndexedDB 不属于关系型数据库（不支持 SQL 查询语句），更接近 NoSQL 数据库。

IndexedDB 是一个比较复杂的 API，涉及不少概念。它把不同的实体，抽象成一个个对象接口。学习这个 API，就是学习它的各种对象接口。

特点
（1）键值对储存。 IndexedDB 内部采用对象仓库（object store）存放数据。所有类型的数据都可以直接存入，包括 JavaScript 对象。对象仓库中，数据以“键值对”的形式保存，每一个数据记录都有对应的主键，主键是独一无二的，不能有重复，否则会抛出一个错误。

（2）异步。 IndexedDB 操作时不会锁死浏览器，用户依然可以进行其他操作，这与 LocalStorage 形成对比，后者的操作是同步的。异步设计是为了防止大量数据的读写，拖慢网页的表现。

（3）支持事务。 IndexedDB 支持事务（transaction），这意味着一系列操作步骤之中，只要有一步失败，整个事务就都取消，数据库回滚到事务发生之前的状态，不存在只改写一部分数据的情况。

（4）同源限制。 IndexedDB 受到同源限制，每一个数据库对应创建它的域名。网页只能访问自身域名下的数据库，而不能访问跨域的数据库。

（5）储存空间大。 IndexedDB 的储存空间比 LocalStorage 大得多，一般来说不少于 250MB，甚至没有上限。

（6）支持二进制储存。 IndexedDB 不仅可以储存字符串，还可以储存二进制数据（ArrayBuffer 对象和 Blob 对象）。

操作流程

打开数据库
新建数据库
新增数据
读取数据
遍历数据
更新数据
删除数据
使用索引

indexedDB 对象

浏览器原生提供indexedDB对象，作为开发者的操作接口。

方法
indexedDB.open()
indexedDB.deleteDatabase()
indexedDB.cmp()

其他对象
IDBRequest 对象
IDBDatabase 对象
属性
方法
IDBObjectStore 对象
属性
方法
IDBTransaction 对象
IDBIndex 对象
IDBCursor 对象
IDBKeyRange 对象

Web Worker

JavaScript 语言采用的是单线程模型，Web Worker 的作用，就是为 JavaScript 创造多线程环境，允许主线程创建 Worker 线程，将一些任务分配给后者运行。
概述
基本用法
主线程
Worker 线程
Worker 加载脚本
错误处理
关闭 Worker
数据通信
同页面的 Web Worker
实例：Worker 线程完成轮询
实例： Worker 新建 Worker
API
主线程
Worker 线程