Web前端入门第 86 问：JavaScript 中的 Web Worker 为什么能提升代码性能？

最初的 JS 执行代码都是一条线执行到底，当遇到比较耗时的操作时，比如大数组循环运算，就会导致页面卡着，就像假死一样。就像一个人在厨房烧菜一样，需要依次完成切菜、炒菜、装盘这些步骤，此过程中没办法同时做其他事情，必须按顺序执行每一个步骤。
Web Worker 赋予了 JS 分配任务的能力，在遇到复杂的计算型任务时，比如 canvas 图形图像处理（添加滤镜、矩阵变换等），此类不依赖 DOM 操作的计算型任务都可以交由  Web Worker 来处理，这样不会阻塞主线程的任务调度，从而提升前端的代码运行速度。
任务时序图

模拟耗时任务

看如下代码，使用一个超大的 for 循环，模拟 JS 中的耗时任务，让代码执行时主线程卡顿，还原假死现象：

1. <button id="start"><button id="start">开始复杂任务</button></button>

复制代码

执行结果：

可以看到点击 <button id="start"><button id="start">开始复杂任务</button></button> 按钮时，在计时器的第 4 秒主线程卡主了将近 4 秒，然后再恢复运行，这就是单线程中的 JS 耗时任务导致的页面假死现象。
使用 Web Worker 解决耗时问题

看了上面的耗时任务导致页面假死，再使用 Web Worker 来重写一下上面代码：
main.html

1. <button id="start"><button id="start">开始复杂任务</button></button>

复制代码

worker.js

1. // worker.js
2. self.onmessage = event => {
3.   let n = 0
4.   let max = event.data
5.   for (let i = 0; i < max; i++) {
6.     n += i
7.   }
8.   postMessage(n)
9. }

复制代码

执行结果：

可以看到虽然任务耗时长短差不多，但是主线程在点击按钮之后并没有进入假死状态，定时器还是在顺利执行，所以 Web Worker 中运行的复杂任务并不会影响主线程的任务调度。
Web Worker 限制

在子线程中运行的代码，无法直接操作 DOM，无法访问 window/document 对象，也无法使用 localStorage 等，如果使用这些 API，代码将会报错：

for 循环优化

注意上述代码中的 max 变量，为什么需要一个变量来保存 event.data 值？而不是直接使用 event.data 循环？将 worker.js 改造一下，看看不同使用方式的任务耗时：

1. // worker.js
2. self.onmessage = event => {
3.   console.time('max 循环耗时')
4.   let n = 0
5.   let max = event.data
6.   for (let i = 0; i < max; i++) {
7.     n += i
8.   }
9.   console.timeEnd('max 循环耗时')
11.   console.time('Object 循环耗时')
12.   let m = 0
13.   for (let i = 0; i < event.data; i++) {
14.     m += i
15.   }
16.   console.timeEnd('Object 循环耗时')
17.   postMessage(n)
18. }

复制代码

main.html

1. // main.html
2. (() => {
3.   const worker = new Worker('./worker.js')
4.   document.getElementById('start').addEventListener('click', () => {
5.     worker.postMessage(100000000)
6.   })
7. })();

复制代码

执行结果：

可以明显看到，性能耗时相差将近 6 倍，这数字会随着对象属性越多，耗时越长！！所以在循环中应当尽量避免读取对象属性，尽可能使用变量来做循环条件！！
写在最后

可以使用 Web Worker 同时启用多个工作线程，只是在任务调度的时候，需要注意响应结果的先后顺序是否对主线程的运行有影响。
一些复杂的计算任务（比如视频转码，图片压缩，图片处理等），都丢给子线程处理吧，咱们前端也可以玩玩多线程~~

来源：豆瓜网用户自行投稿发布，如果侵权，请联系站长删除