web worker

--- theme: channing-cyan --- 好久不见呀，某位消失了许久的搬砖`靓仔`又回来了。至于为啥这么久没出现这个问题，那就用忙来当借口吧。emmm，不对，是真滴`忙`，`忙昏头了`的那种！！！好啦，不瞎扯了。平时小伙伴们不是说日常的项目开发中，都是单纯的搬砖，没啥亮点嘛，那现在就来啦！咱们今天就来聊聊`web worker`，这可是面试官`最最最`喜欢的的`性能优化`哦~ ## 为什么JavaScript是单线程？总所周知，`JavaScript`语言的特点是`单线程`，也就是说，同一个时间只能做一件事。那么，为什么`JavaScript`不能有`多个线程`呢？这样能`提高效率`啊。 JavaScript的单线程，与它的用途有关。作为浏览器脚本语言，`JavaScript`的主要用途是与用户互动，以及操作DOM。这决定了它只能是`单线程`，否则会带来很复杂的同步问题。比如，假定`JavaScript`同时有两个线程，一个线程在某个DOM节点上添加内容，另一个线程删除了这个节点，这时浏览器应该以哪个线程为准？ ## 什么是Web Worker？为了利用`多核CPU`的计算能力，`HTML5`提出`Web Worker`标准，允许JavaScript脚本创建`多个线程`，但是子线程完全受主线程控制，且`不得操作DOM`。所以，这个新标准并没有改变JavaScript单线程的本质。在worker线程中，虽然无法`直接操作dom节点`，也不能使用window对象的`默认方法`和`属性`，但是仍然可以使用window对象下的东西，比如`websocket`，`indexedDB`等。 `workers` 和`主线程`间的数据传递通过这样的消息机制进行——双方都使用`postMessage()` 方法发送各自的消息，使用 `onmessage 事件`处理函数来响应消息（消息被包含在`Message`事件的 data 属性中）。这个过程中数据并不是被共享而是被复制。关于web worker的兼容性问题，在`can i use`中查找一轮后发现，基本目前所有主流的浏览器都支持了，因此放心食用，无需考虑兼容性的问题。 ![image-20220702000223372](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/072d26e748eb47db8783a856b57858a8~tplv-k3u1fbpfcp-zoom-1.image) ## 小试牛刀前面学习了那么多武功秘籍，少侠们，确定不来一展身手吗？ ![img](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5f8e69bc0c384f03a750985867886a72~tplv-k3u1fbpfcp-zoom-1.image) 小羽这里简单的写了一个小demo，这个demo的内容就是`递归获取斐波那契数列`。会分为`单线程`和`多线程`模式，然后分别测试运行`20次`fb方法所需要的时间。 - 单线程模式：利用for循环直接执行20次fb，统计执行时间 - 多线程模式：利用for循环，创建多个worker线程。并使用promise.all处理这些异步的worker线程，等待所有的worker执行完成后，统计执行时间 ``` web worker ``` ``` /* * @Author: xiaoyu * @Description: worker 线程 * @Date: 2022-05-08 08:41:30 * @LastEditors: xiaoyu * @LastEditTime: 2022-06-29 23:17:44 */ // 方法对象 const funcObj = { fb: (n) => { if(n===1 || n ===2){ return 1; } return funcObj.fb(n-1) + funcObj.fb(n-2) } } // onmessage事件 onmessage = function(e){ const {data} = e; const res = funcObj[data.function](data.data) // 将获取的数据通过postMessage发送到主线程 self.postMessage({ data: res, name: 'worker test' }) self.close() } ``` 打开任务管理器，点击单线程测试按钮进行单线程的测试。可以从下图发现，`单线程`的调用时间约为`70s`，cpu的调用基本上也就只是两个核心在切换工作，小羽在多次测试后，其实是有多个核心在切换工作，不过`单一`时间只有`一个核心`是在满载工作（递归获取斐波那契数列）。 ![image-20220630002226796](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5c325a79229c42a7b74f9a74a4c7bc7b~tplv-k3u1fbpfcp-zoom-1.image) 同样是打开任务管理器，然后点击多线程测试按钮。此时咱们的`cpu`就不再`偷懒`了，直接16线程满载运行，只需要`7.9s`就完成了20次递归获取斐波那契数列。咱们简单的计算一下使用`web worker`多线程提升效果：(70750-7973)/7973 ≈7.87。即提升了`7.87倍`的`效率`。当然这是在8核16线程上的电脑上跑了，如果在核心数不同的cpu上这个倍数也是会发生相应的变化 ![img](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a41c5ae2afb94564a89d350942fa84d1~tplv-k3u1fbpfcp-zoom-1.image) ![image-20220630002853364](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7f7068054c0e4f05bc727bd81f7ca5c3~tplv-k3u1fbpfcp-zoom-1.image) ## 在单页面应用中使用通过上面的例子，是不是`so easy`呀？好啦，那咱们就算掌握了`web worker`的`基本使用`方法啦。但是在react、vue等`单页面`应用中，webpack/vite通常会将js代码`打包`成一个js文件。因此通过上面的new Worker('worker.js')的方式来新建worker，将会报`访问不到`worker.js的错误。所以，在`单页面应用`中，咱们该怎么使用`web worker`呢？ > 方案1：既然webpack/vite会将js的代码打包成一个js文件，那咱们不让它打包不就好了。而单页面应用的工程下，通常都是会有一个public的`静态资源目录`，咱们将worker.js放入其中即可。 > > 方案2：webpack4及以下的版本可以使用`worker-loader` > > 方案3：webpack5/vite则可以使用`new Worker(new URL('worker.js', import.meta.url))`的方式 ``` import React from 'react' export default function WebWorkerTest() { const handleClick = () => { const number = 1 const workerList = [] console.log('%c 开始多线程测试 ', 'color:#fff; background:#00897b ') for (let i = 0; i < number; i++) { const workerItem = new Promise((resolve, reject) => { const myWorker = new Worker(new URL('../utils/fb.worker.ts', import.meta.url)) myWorker.postMessage({ function: 'fb', data: 43 }) myWorker.onmessage = (e) => { resolve(e.data) // 关闭worker线程 myWorker.terminate() } }) workerList.push(workerItem) } console.time('worker多线程执行时间') Promise.all(workerList).then(res => { console.log(res) console.timeEnd('worker多线程执行时间') }) } return ( <> ) } ``` ``` // fb.worker.ts // 方法对象 const funcObj = { fb: (n: number): number => { if (n === 1 || n === 2) { return 1; } return funcObj.fb(n - 1) + funcObj.fb(n - 2); }, }; // onmessage事件 onmessage = function (e) { const { data } = e; const res = funcObj[data.function](data.data); // 将获取的数据通过postMessage发送到主线程 self.postMessage({ data: res, name: "worker test", }); self.close(); }; ``` ## 注意事项虽然web worker可以调用cpu的多线程，从而提高咱们页面的性能。但是它不是`随便使用`的，如果滥用web worker可能不仅不会得到性能的提升，还可能造成性能的`损耗`。举一个简单的小栗子如果咱们将`递归获取斐波那契数列`第n位的方法，将传入参数修改为`第2位`，这时候咱们再重跑单线程测试和多线程测试。结果如下图，咱们可以发现`单线程模式`下，获取20次斐波那契数列第二位的时间仅需要`1.5ms`，而在`多线程`的情况下却需要`78ms`。这是为什么呢？因为咱们每次`创建worker线程`以及`possmessage通信`都是需要`损耗`一些性能以及时间的。因此web worker是不可以`滥用`的哦，日常开发中，建议在需要消耗比`较多`的cpu`运算能力`的时候酌情使用。 ![image-20220701233019032](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/49c895bce80f4981b5a50d2d5269babf~tplv-k3u1fbpfcp-zoom-1.image) ## 小结本文通过了几个简单的小栗子，带大家学习web worker的基本知识，使用方法，以及需要注意的事项。小伙伴们在日常的开发中可以按需尝试哦，让自己的项目中多些亮点，也可以让面试官眼前一亮哦。如果看这篇文章后，感觉有收获的小伙伴们可以`点赞`+`关注`哦~ ![img](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f6e0b3bc76c34402967180f9624dc42a~tplv-k3u1fbpfcp-zoom-1.image) 如果想和`小羽`交流技术可以加下[wx](https://cdn.sulg.top/images%2Fwx.png)，也欢迎小伙伴们来和小羽`唠唠嗑`，嘿嘿~ ps:本文原创，转载请标明出处 - 我正在参与掘金技术社区创作者签约计划招募活动，[点击链接报名投稿](https://juejin.cn/post/7112770927082864653 "https://juejin.cn/post/7112770927082864653")。