Home 开源项目 Guestbook 专栏 Admin
开源项目:

搜索中...

未找到与 "" 相关的文章

换个关键词试试看

输入关键词搜索文章

支持搜索标题、内容、摘要

Web Workers 完全指南:让 JavaScript 多线程运行

admin · 2026-05-30 17:10 · 前端 · 20

JavaScript 是单线程的,但浏览器不是

JavaScript 运行在单线程事件循环中,这意味着长时间计算会阻塞 UI 更新,导致页面卡顿。Web Workers 允许我们在后台线程中运行脚本,与主线程并行执行。

Worker 类型对比

Dedicated Worker 专属单个页面,Shared Worker 可被多个页面共享,Service Worker 代理网络请求用于离线缓存。

基础用法

创建 Worker 文件,通过 postMessage 通信,处理完成后返回结果。

实战:图片批量处理

结合批量加水印工具的实际场景,在 Worker 中使用 OffscreenCanvas 处理图像。

性能对比

处理 100 张图片:单线程约 15 秒,4 Worker 约 4 秒,8 Worker 约 2.5 秒。

注意事项

Worker 中无法访问 DOM,通过 postMessage 传递数据会被结构化克隆,使用 Transferable Objects 避免大数据拷贝开销。

总结

Web Workers 是前端性能优化的重要工具,SnowmanNunu 工具箱的多个工具都利用了这一技术。

微博 Twitter

评论 (0)

暂无评论,来说两句吧!

发表评论

支持 Markdown 语法和 Emoji 😀