Web Workers
创建线程池,复用多核能力加速计算
主线程应当一心一意的执行你的代码,任何在 关键渲染路径 中 不必要的脚本都应当被迁移到 Web Worker 中。
适用场景
非核心工作:
- 请求类:缓存、预请求
- 计算类:加密、计算 MD5
- 数据处理:排序、查找
- 预渲染:canvas(new OffscreenCanvas)
限制
- 同源策略
- DOM 访问限制
- 通信限制 基于拷贝的消息通信,不能直接共享内存
- 文件系统访问限制:沙盒运行
- 无法访问全局作用域
使用
- 支持内联创建 blob url
简化使用 GoogleChromeLabs/comlink: Comlink makes WebWorkers enjoyable.
错误处理
worker.addEventListener('error', function (event) {
// ...
});
浅析Web Worker使用技巧及实战场景 - 古兰精 - 博客园
michaeltreat/Web-Worker-Demo: JavaScript with more than one thread? WebWorkers!
How Partytown's Sync Communication Works - DEV Community
我们是如何利用 Qwik 和 Partytown 削减掉 页面中 99% 的 JavaScript 的 - 知乎
Exploring The Potential Of Web Workers For Multithreading On The Web — Smashing Magazine