Skip to content

Web Workers

创建线程池,复用多核能力加速计算

主线程应当一心一意的执行你的代码,任何在 关键渲染路径 中 不必要的脚本都应当被迁移到 Web Worker 中。

适用场景

非核心工作:

  • 请求类:缓存、预请求
  • 计算类:加密、计算 MD5
  • 数据处理:排序、查找
  • 预渲染:canvas(new OffscreenCanvas)

限制

  • 同源策略
  • DOM 访问限制
  • 通信限制 基于拷贝的消息通信,不能直接共享内存
  • 文件系统访问限制:沙盒运行
  • 无法访问全局作用域

使用

  • 支持内联创建 blob url

简化使用 GoogleChromeLabs/comlink: Comlink makes WebWorkers enjoyable.

错误处理

worker.addEventListener('error', function (event) {
  // ...
});

浅析Web Worker使用技巧及实战场景 - 古兰精 - 博客园

2021 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 的 - 知乎

Mental model - Qwik

Exploring The Potential Of Web Workers For Multithreading On The Web — Smashing Magazine