共计 5257 个字符，预计需要花费 14 分钟才能阅读完成。
JS 组成
ECMAScript
ECMAScript 规定了 JavaScript 脚本的核心语法，如 数据类型、关键字、保留字、运算符、对象和语句等，它不属于任何浏览器。
Document Object Model
文档对象模型 (DOM) 将 web 页面与到脚本或编程语言连接起来。通常是指 JavaScript，但将 HTML、SVG 或 XML 文档建模为对象并不是 JavaScript 语言的一部分。DOM 模型用一个逻辑树来表示一个文档，树的每个分支的终点都是一个节点 (node)，每个节点都包含着对象(objects)。DOM 的方法(methods) 让你可以用特定方式操作这个树，用这些方法你可以改变文档的结构、样式或者内容。节点可以关联上事件处理器，一旦某一事件被触发了，那些事件处理器就会被执行。
Browser Object Model
浏览器对象模型(BOM)，是用于描述这种对象与对象之间层次关系的模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM 由多个对象组成，其中代表浏览器窗口的 Window 对象是 BOM 的顶层对象，其他对象都是该对象的子对象.
线程与进程
进程 (Process) 是系统资源分配和调度的单元。一个运行着的程序就对应了一个进程。一个进程包括了运行中的程序和程序所使用到的内存和系统资源。如果是单核 CPU 的话，在同一时间内，有且只有一个进程在运行。但是，单核 CPU 也能实现多任务同时运行，比如你边听网易云音乐的每日推荐歌曲，边在网易有道云笔记上写博文。这算开了两个进程（多进程），那运行的机制就是一会儿播放一下歌，一会儿响应一下你的打字，但由于 CPU 切换的速度很快，你根本感觉不到，以至于你认为这两个进程是在同时运行的。进程之间是资源隔离的。
那线程 (Thread) 是什么？线程是进程下的执行者，一个进程至少会开启一个线程（主线程），也可以开启多个线程。比如网易云音乐一边播放音频，一边显示歌词。多进程的运行其实也就是通过进程中的线程来执行的。一个进程下的线程是可以共享资源的，所以在多线程的情况下，需要特别注意对临界资源的访问控制.
浏览器
目前最为流行的浏览器为：`Chrome，IE，Safari，FireFox，Opera. 一个浏览器通常由以下几个常驻的线程:
渲染引擎线程：负责页面的渲染
JS 引擎线程：负责 JS 的解析和执行
定时触发器线程：处理定时事件，比如 setTimeout, setInterval
事件触发线程：处理 DOM 事件
异步 http 请求线程：处理 http 请求
需要注意的是, 渲染线程和 JS 引擎线程是不能同时进行的。渲染线程在执行任务的时候，JS 引擎线程会被挂起。因为 JS 可以操作 DOM，若在渲染中 JS 处理了 DOM，浏览器可能就懵逼了。
Web Worker
简介
Web Worker (工作线程) 是 HTML5 中提出的概念,Web Workers 使得一个 Web 应用程序可以在与主执行线程分离的后台线程中运行一个脚本操作。这样做的好处是可以在一个单独的线程中执行费时的处理任务，从而允许主（通常是 UI）线程运行而不被阻塞 / 放慢.
Web Worker 可以分为一下几类:
专用线程(Dedicated Worker)
专用线程仅能被创建它的脚本所使用(一个专用线程对应一个主线程)
共享线程(Shared Worker)
共享线程能够在不同的脚本中使用(一个共享线程对应多个主线程)
服务工作线程(Service Workers)
注册在指定源和路径下的事件驱动 worker, 可以控制关联的页面或者网站，拦截并修改访问和资源请求，细粒度地缓存资源.
Chrome Workers
一种仅适用于 firefox 的 worker.
Aduio Workers
可以在网络 worker 上下文中直接完成脚本化音频处理
浏览器兼容性
可以通过 caniuse 查看兼容性
Dedicated Worker 兼容性
Shared Worker 兼容性
使用场景
懒加载
文本分析
流媒体数据处理
canvas 图形绘制
图像处理
…
限制
同源限制
无法访问 DOM
有自己的上下文，无法使用 Window 对象
workerType
上下文
Dedicated Worker
DedicatedWorkerGlobalScope
Shared Worker
SharedWorkerGlobalScope
创建线程
检查浏览器是否支持
if (window.Worker) {
// some code
}
专用线程
@params {String} url 表示 worker 将执行的脚本的 URL, 必须遵守同源策略
@params {Object} [options] 创建对象实例时设置的选项属性的对象
@params {Object} [options.type]
@params {Object} [options.name]
@params {Object} [options.credentials]
@returns 创建的 worker
const myWorker = new Worker(url[, options]);
示例
// main.js
const myDedicatedWorker = new Worker(‘./dedicated_worker/worker.js’, { name: ‘dedicatedWorker’});
// worker.js
console.log(‘success’);
共享线程
@params {String} url 表示 worker 将执行的脚本的 URL, 必须遵守同源策略
@params {Object} [options] 创建对象实例时设置的选项属性的对象
@params {Object} [options.type]
@params {Object} [options.name]
@params {Object} [options.credentials]
@returns 创建的 worker
const myWorker = new SharedWorker(url[, options]);
示例
// main.js
const mySharedWorker = new SharedWorker(‘./shared_worker/worker.js’, { name: ‘sharedWorker’});
// worker.js
console.log(‘success’);
线程通信
发送信息
@params {Object} message 传递的数据对象
@params {Object} [options] 一个可选的 Transferable 对象的数组，用于传递所有权. 如果一个对象的所有权被转移，在发送它的上下文中将变为不可用（中止），并且只有在它被发送到的 worker 中可用。
myWorker.postMessage(message, transferList);
接收信息
myWorker.onmessage = function(event) {
const data = event.data; // 接收到的消息数据
}
专用线程示例
// main.js
const myWorker = new Worker(‘worker.js’);
myWorker.postMessage([10, 20]);
myWorker.onmessage = function (event) {
console.log(event.data);
}
// worker.js
onmessage(event) {
console.log(event.data);
postMessage(event.data[1] – event.data[0]);
}
共享线程示例
// main.js
const myWorker = new SharedWorker(‘worker.js’);
myWorker.port.start();
myWorker.port.postMessage([10, 20]);
myWorker.port.onmessage = function (event) {
console.log(event.data);
}
// worker.js
connect(event) {
const port = event.port[0];
port.onmessage(event) {
port.postMessage(event.data[1] – event.data[0]);
}
}
在 SharedWorker 的使用中，我们发现对于 SharedWorker 实例对象，我们需要通过 port 属性来访问到主要方法；同时在 Worker 脚本中，多了个全局的 connect()函数，同时在函数中也需要去获取一个 port 对象来进行启动以及操作；这是因为，多页页面共享一个 SharedWorker 线程时，在线程中需要去判断和区, 分来自不同页面的信息，这是最主要的区别和原因。在 Worker 线程中，self 和 this 都代表子线程的全局对象。对于监听 message 事件，以下的四种写法是等同的。
// 写法 1
self.addEventListener(‘message’, function (e) {
// …
})
// 写法 2
this.addEventListener(‘message’, function (e) {
// …
})
// 写法 3
addEventListener(‘message’, function (e) {
// …
})
// 写法 4
onmessage = function (e) {
// …
}
示例
关闭线程
myWorker.terminate(); // 主线程中使用
close(); worker 线程中使用（推荐）
错误处理
// 主线程
myWorker.onerror = function(event) {
const lineno = event.lineno; // 出错的脚本名称
const filename = event.filename; // 发生错误的行号
const message = event.message; // 对错误的描述
}
// 不能进行反序列化时触发
myWorker.onmessageerror = function() { …} // 专用线程
myWorker.port.onmessageerror function() {…} // 共享线程
外部加载脚本
提供 importScript()方法, 导入一条或者以上脚本到当前 worker 的作用域里. 每个脚本中的全局对象都能够被 worker 使用.
importScript(‘first.js’, ‘second.js’);
子进程
Worker 可以生成子进程
存在同源限制
子 Worker 中的 URL 相对于父级 Woker 所在位置进行解析
嵌入 Worker
<script type=”text/js-worker”>
onmessage = (event) => {
postMessage(event.data + 1);
}
</script>
<script>
const workerScript = document.querySelector(‘script[type=”text/js-worker”]’);
const blob = new Bolb(workerScript, { type: ‘text/javascript’});
const myWorker = new Worker(window.URL.createObjectURL(blob));
myWorker.postMessage(1);
myWorker.onmessage = (event) => {
console.log(‘ 来自子线程消息:’, event.data);
}
</script>
结构化克隆算法
结构化克隆算法是由 HTML5 规范定义的用于复制复杂 JavaScript 对象的算法。通过来自 Workers 的 postMessage()或使用 IndexedDB 存储对象时在内部使用。它通过递归输入对象来构建克隆，同时保持先前访问过的引用的映射，以避免无限遍历循环。这一过程可以理解为，在发送方使用类似 JSON.stringfy()的方法将参数序列化，在接收方采用类 JSON.parse()的方法反序列化。
Error 以及 Function 对象是不能被结构化克隆算法复制的；如果你尝试这样子去做，这会导致抛出 DATA_CLONE_ERR 的异常
无法克隆 DOM
对象的某些特定参数也不会被保留
RegExp 对象的 lastIndex 字段不会被保留
属性描述符，setters 以及 getters（以及其他类似元数据的功能）同样不会被复制。例如，如果一个对象用属性描述符标记为 read-only，它将会被复制为 read-write，因为这是默认的情况下
原形链上的属性也不会被追踪以及复制
Web Worker 中可以使用的函数和类
时间相关
clearInterval()
clearTimeout()
setInterval()
setTimeout
Worker 相关
importScripts()
close()
postMessage()
存储相关
Cache
IndexedDB
网络相关
Fetch
WebSocket
XMLHttpRequest
更多
