Web Worker 解决了什么问题
浏览器 Javascript 是以单线程方式运行的,也就是意味着 JS 执行和 UI 渲染占用同一个主线程,当 Javascript 进行高负载的数据处理或运算时,UI 渲染就很有可能被阻断,浏览器就会出现卡顿,这样很容易降低用户体验。
为此,Javascrip 提供了异步操作,如定时器、ajax、I/O 回调等,但这些异步代码都是运行在主线程上的,如果主线程被阻塞,那么异步代码也就无法执行,不能从根本上解决问题。所以多线程Web worker
应运而生,它是 HTML5 标准的一部分,允许创建一个新的子线程,子线程和主线程可以同时允许,且互不干扰。
此外 worker 和主线程之间可以通过postMessage
和onmessage
方法进行双向数据通信
Web Worker 如何使用
示例如下
/*main.js*/
const worker = new Worker("./js/worker.js");
console.log("🚀 ~ worker:", worker);
worker.postMessage("hello");
worker.onmessage = ({ data }) => {
console.log("🚀", data);
for (let i = 0; i < 100; i++) {
console.log("main:", i);
}
// worker.terminate()
};
/*worker.js*/
addEventListener("message", ({ data }) => {
console.log(data);
postMessage("hi");
for (let i = 0; i < 100; i++) {
console.log("worker:", i);
}
});
Web Worker 需要注意的问题
访问限制
woorker 子线程所在的全局对象,与主线程不在同一个上下文环境,所以无法访问到主线程的 window 对象,包括 document 对象,document 对象无法被访问到,但是可以通过 postMessage 来传递数据。
跨域限制
worker 脚本文件必须与主线程脚本同源,这个可以将 worker 脚本文件转换成 Blob 对象,在生成 URL,传给 Worker 的构造函数
应用场景
- 使用专用线程进行数学运算,比如处理大批量数据、读取用户上传文件、更改 canvas 位图等
- 高频用户交互
- 数据的预取