标签
note
字数
860 字
阅读时间
4 分钟
Worker
Master-Worker 模式是常用的并行设计模式。其核心思想是：系统有两个进程协同工作：Master 进程和 Worker 进程。Master 进程负责接收和分配任务，Worker 进程负责处理子任务。当各个 Worker 进程将子任务处理完后，将结果返回给 Master 进程，由 Master 进行归纳和汇总，从而得到系统结果
Web Worker
在 HTML5 中，
Web Worker的出现使得在 Web 页面中进行多线程编程成为可能
HTML5 中的多线程是这样一种机制：它允许在 Web 程序中并发执行多个 JavaScript 脚本，每个脚本执行流都称为一个线程，彼此间上下文互相独立，并且由浏览器中的 JavaScript 引擎负责管理
HTML5 规范列出了 Web Worker 的三大主要特征：
- 能够长时间运行（响应）
- 理想的启动性能
- 理想的内存消耗
HTML5 中的 Web Worker 可以分为两种不同线程类型，一个是专用线程 Dedicated Worker，一个是共享线程 Shared Worker
MDN 的官方解释是：
js
Web Worker为Web内容在后台线程中运行脚本提供了一种简单的方法。线程可以执行任务而不干扰用户界面
一个worker是使用一个构造函数创建的一个对象(e.g. Worker()) 运行一个命名的JavaScript文件
这个文件包含将在工作线程中运行的代码; workers 运行在另一个全局上下文中,不同于当前的window
因此，使用 window快捷方式获取当前全局的范围 (而不是self) 在一个 Worker 内将返回错误
复制代码这样理解下：
- 创建 Worker 时，JS 引擎向浏览器申请开一个子线程（子线程是浏览器开的，完全受主线程控制，而且不能操作 DOM）
- JS 引擎线程与 worker 线程间通过特定的方式通信（postMessage API，需要通过序列化对象来与线程交互特定的数据）
所以，如果有非常耗时的工作，请单独开一个 Worker 线程，这样里面不管如何翻天覆地都不会影响 JS 引擎主线程， 只待计算出结果后，将结果通信给主线程即可，perfect!
而且注意下，JS 引擎是单线程的，这一点的本质仍然未改变，Worker 可以理解是浏览器给 JS 引擎开的外挂，专门用来解决那些大量计算问题。
举例
🌰 在解释概念前，先来看一个呗儿简单的小栗子：
js
//myWorker.js
self.onmessage = function(event) {
var info = event.data;
self.postMessage(info + " from worker!");
};js
//主页面
<input type="text" name="wkInput1" />
<button id="btn1">test!</button>
<script>
if (window.Worker) {
const myWorker = new Worker("myWorker.js");
myWorker.onmessage = function (event) {
alert(event.data);
};
const btn = document.querySelector('#btn1');
btn.addEventListener('click', e=>{
const ipt = document.querySelector('[name=wkInput1]');
const info = "hello " + ipt.value;
myWorker.postMessage(info);
});
}
</script>很显然，运行的效果无非是点击按钮后弹出包含文本框内容的字符串。
参考
从浏览器多进程到JS单线程，JS运行机制最全面的一次梳理 - 掘金
咱们worker有力量-在浏览器中玩转多线程和离线应用 - 掘金
贡献者
jiechen