Web Workers实战教程基于HTML Standard规范用5个官方Demo跑通单核到多核并行计算【免费下载链接】htmlHTML Standard项目地址: https://gitcode.com/gh_mirrors/ht/htmlWeb Workers 是让网页拥有后台并行计算能力的核心 API而 HTML StandardHTML 标准规范仓库内置了一整套官方 Worker Demo覆盖单核计算、多核并行、模块化工人、共享工人和加密库等 5 大场景。本教程基于 HTML Standard 规范中的 demos/workers/ 目录带你从零基础跑通 5 个官方示例理解单核到多核并行计算的完整思路。一、为什么需要 Web Workers网页的 JavaScript 默认跑在主线程上一旦某个耗时的循环开始执行页面就会卡住、点击无响应。Web Workers 的解决思路很直接——把重计算挪到一个独立的后台线程执行页面 UI 保持流畅计算完成后 Worker 通过postMessage把结果发回主线程更新界面。整个通信模型就是输入 → 后台处理 → 输出的数据流 记住两个核心方法主线程用new Worker(xxx.js)创建工人、用worker.postMessage()发消息Worker 内部用postMessage()回传结果、用onmessage接收消息。二、官方 5 个 Demo 全景速览 ️HTML Standard 仓库的 demos/workers/ 目录下有 5 个由浅入深的示例Demo路径核心知识点① 单核素数demos/workers/primes/最简 Workeronmessage回传结果② 多核并行demos/workers/multicore/一个 Worker 再开 10 个 Worker③ 模块化工人demos/workers/modules/type: moduleimport 导入过滤模块④ 多视图共享demos/workers/multiviewer/SharedWorker 多窗口共享数据⑤ 加密库demos/workers/crypto/MessageChannel 点对点专用通道三、Demo 1单核素数搜索primespage.html 是学习 Web Workers 的最佳起点页面只有一行关键代码var worker new Worker(worker.js);Worker 端的 worker.js 是一个死循环不断寻找下一个素数每找到一个就postMessage(n)发回页面页面实时把当前最大素数显示在output里。✅关键收获Worker 线程与主线程完全隔离不能直接访问 DOM一切交流都靠消息这是 Worker 编程的第一心智模型。四、Demo 2多核并行计算multicore单核不够快worker.js 演示了Worker 里的 Worker它一口气创建num_workers 10个子工人把 1000 万项计算任务均匀切块分给每个子工人并行执行。每个子工人 core.js 的套路非常标准onmessage分两步收到任务的起始值start和结束值end执行完计算后postMessage(result)交回结果并close()关闭自身主 Worker 用pending_workers计数器收集所有结果凑齐 10 份才向页面汇报最终答案。✅关键收获这就是最经典的任务分片task partitioning并行计算模式——切任务、分工人、汇结果性能可随核数线性提升。五、Demo 3模块化 Worker 与图像滤镜modules传统 Worker 是一个大文件而 page.html 展示了更工程化的写法const worker new Worker(worker.js, { type: module });加上{ type: module }后worker.js 就能用 ES 模块语法import * as filters from ./filters.js引入滤镜库。filters.js 里导出grayscale灰度和brighten提亮 20%两个像素处理函数Worker 拿到图像数据、应用滤镜后还用postMessage(imageData, [imageData.data.buffer])把内存缓冲区转移transfer回主线程——零拷贝飞快官方 Demo 的候选图像就包括这张仓库里的 robots.jpeg 示例图✅关键收获模块 Worker 转移对象Transferable是现代前端图像处理、点云渲染等重场景的标准配置。六、Demo 4SharedWorker 多窗口共享multiviewer普通 Worker 是一人一份而 SharedWorker 能让多个页面共享同一个后台线程。page.html 每次点击按钮就打开一个 viewer 窗口所有窗口都连接到同一个 worker.js 里的迷宫地图数据。它的通信模型多了一层port主页面用new SharedWorker(test.js)后必须通过worker.port.onmessage收消息注意不是worker.onmessageWorker 端则监听onconnect事件、从event.ports[0]取到通信端口。同一套思路的最小示例在 shared/001/test.js 里只有 3 行。✅关键收获多标签页状态同步、协作光标、跨窗口聊天——SharedWorker 是天然的选择。七、Demo 5加密库与 MessageChannelcrypto最后一个 Demo 展示点对点专用通道。page.html 把一个加解密库 libcrypto-v1.js 放进 Worker每次加密/解密都通过new MessageChannel()开辟一条临时私密通道port2转交给 Workerport1留在主线程密钥生成、加密、解密都在后台线程完成页面只负责收发消息任务完成后port.close()关闭通道干净利落。✅关键收获MessageChannel 让哪个线程只和谁说话变得可控是构建并发安全应用的关键件。八、总结如何选型你的 Worker你的需求推荐方案参考 Demo页面卡顿想挪走重计算普通Workerprimes数据量大需要榨干多核Worker 池 任务分片multicore代码复杂想模块化组织type: modulemodules多个页面/窗口共享状态SharedWorkermultiviewer需要点对点私密通信MessageChannelcryptoWeb Workers 的 API 其实很小真正的门槛在于并发思维。HTML Standard 仓库这 5 个官方 Demo 由简到繁正好构成一条完整学习路径建议按顺序在本地浏览器需通过 http 服务器访问Worker 不支持 file 协议逐一跑起来配合 DevTools 的 Worker 调试面板单核到多核的并行计算能力就到手了 【免费下载链接】htmlHTML Standard项目地址: https://gitcode.com/gh_mirrors/ht/html创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考