讲师中心 微信公众号

工具推荐

视频效率加速
剧云
剧云

中文短剧剧本制作平台

updream

一键生成高质量推广成片

Laper
Laper

剧本策划到成片协作

Seko
Seko

AI短剧一键生成成片

什么是Web Worker在javascript中_怎样在后台线程执行任务【教程】

风涛吖_4679

风涛吖_4679

发布时间:2026-01-21 20:07:25

|

419人浏览过

|

来源于php中文网

原创

Web Worker 不能操作 DOM 且不共享 window、document 等全局对象,运行于独立线程,专用于耗时计算;通过 postMessage/onmessage 双向通信,仅支持结构化克隆数据,可用 transferable 提升大数据传输性能。

什么是web worker在javascript中_怎样在后台线程执行任务【教程】

Web Worker 不能直接操作 DOM,也不共享主线程的全局对象(比如 window、document),它运行在独立线程里,专为执行耗时计算任务而设计。

Web Worker 的创建和通信机制

主线程用 new Worker() 实例化一个 Worker,脚本路径必须是同源 URL(本地文件协议 file:// 下多数浏览器会拒绝加载);Worker 内部通过 self.postMessage() 发送消息,主线程用 worker.onmessage 接收;反过来也一样——双向通信只能靠 postMessage() 和 onmessage,没有共享内存。

  • Worker 构造函数只接受一个 JS 文件路径,不支持内联函数或字符串代码
  • 传参只能序列化(即走 structured clone 算法),function、undefined、Symbol、Promise、RegExp 等无法传递
  • 若需大量数据传输(如 ArrayBuffer),可用 transferable 选项避免拷贝,提升性能

常见错误:Worker 报错 “Uncaught ReferenceError: window is not defined”

这是最典型的误用——在 Worker 脚本中写了 console.log(document.body) 或调用了依赖 window 的第三方库。Worker 全局对象是 self,可用 self.fetch、self.setTimeout,但没有 document、localStorage、XMLHttpRequest(部分浏览器已支持 fetch)。

CDP浏览器大师
CDP浏览器大师

CDP浏览器大师:通过Chrome DevTools Protocol驱动已登录浏览器实现自动化任务,解决反爬封号、选择器失效、SPA路由难导航、固定sleep不准四大痛点。核心能力包括UA伪装、WebGL/Canvas指纹混淆、智能等待、动态选择器以及可视化调试。

下载
  • 检查所有全局变量引用,把 window.xxx 改成 self.xxx(如果存在)
  • 避免在 Worker 中 import 含浏览器 API 调用的模块(例如某些未做环境判断的工具库)
  • 调试时用 self.console.log(),而非假设 console 自动可用(虽然多数浏览器做了映射,但不可依赖)

怎样安全地复用 Worker 或处理多个任务

每个 new Worker() 实例对应一个独立线程,频繁创建销毁开销大;更合理的方式是复用单个 Worker,用消息中的 type 字段区分任务类型(如 "sort"、"filter"),再在 Worker 内部用 switch 分发处理逻辑。

立即学习“Java免费学习笔记(深入)”;

  • 主线程发送结构化消息:worker.postMessage({ type: "sort", data: [3,1,4] })
  • Worker 中监听:self.onmessage = ({ data }) => { switch(data.type) { ... } }
  • 长期运行的 Worker 需主动关闭:主线程调用 worker.terminate(),或 Worker 自己调用 self.close()
  • 注意:Worker 内无法使用 async/await 顶层语法,需包裹在函数中

真正容易被忽略的是错误捕获——Worker 内抛出的异常不会冒泡到主线程,也不会触发 window.onerror;必须显式监听 self.onerror 或用 try/catch 包裹主逻辑,否则静默失败。

热门AI工具

更多
讯飞绘文

讯飞绘文是一款由科大讯飞推出的一站式 AIGC 内容运营平台。

咔片AIPPT

一款在线AI演示文稿制作工具,可根据主题和内容需求辅助生成PPT结构与页面,提高演示材料制作效率。

Laper
Laper Hot

Laper是专为编剧、导演和制片人推出的 AI 原生剧本创作工具。

UP简历
UP简历 Hot

一款AI办公效率工具,主要用于基于AI技术的免费在线简历制作工具,适合需要提升相关任务效率的用户。

PixPix
PixPix Hot

PixPix是一款面向电商视觉生产的AI商品图生成工具。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

Loomy
Loomy Hot

一款AI工具,主要用于科大讯飞发布的桌面级 AI 助理,比 OpenClaw 更易用、更安全!,适合需要提升相关任务效率的用户。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

相关专题

更多
switch语句用法
switch语句用法

switch语句用法:1、Switch语句只能用于整数类型,枚举类型和String类型,不能用于浮点数类型和布尔类型;2、每个case语句后面必须跟着一个break语句,以防止执行其他case的代码块,没有break语句,将会继续执行下一个case的代码块;3、可以在一个case语句中匹配多个值,使用逗号分隔;4、Switch语句中的default代码块是可选的等等。

1071

2023.09.21

Java switch的用法
Java switch的用法

Java中的switch语句用于根据不同的条件执行不同的代码块。想了解更多switch的相关内容,可以阅读本专题下面的文章。

1437

2024.03.13

sort排序函数用法
sort排序函数用法

sort排序函数的用法:1、对列表进行排序,默认情况下,sort函数按升序排序,因此最终输出的结果是按从小到大的顺序排列的;2、对元组进行排序,默认情况下,sort函数按元素的大小进行排序,因此最终输出的结果是按从小到大的顺序排列的;3、对字典进行排序,由于字典是无序的,因此排序后的结果仍然是原来的字典,使用一个lambda表达式作为key参数的值,用于指定排序的依据。

1158

2023.09.04

全局变量怎么定义
全局变量怎么定义

本专题整合了全局变量相关内容,阅读专题下面的文章了解更多详细内容。

5185

2025.09.18

python 全局变量
python 全局变量

本专题整合了python中全局变量定义相关教程,阅读专题下面的文章了解更多详细内容。

2210

2025.09.18

c++ 全局变量
c++ 全局变量

本专题整合了c++全局变量的使用、定义、作用域等等内容,阅读专题下面的文章了解更多详细内容。

199

2026.03.17

js 字符串转数组
js 字符串转数组

js字符串转数组的方法:1、使用“split()”方法;2、使用“Array.from()”方法;3、使用for循环遍历;4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容,供大家免费下载体验。

1898

2023.08.03

js截取字符串的方法
js截取字符串的方法

js截取字符串的方法有substring()方法、substr()方法、slice()方法、split()方法和slice()方法。本专题为大家提供字符串相关的文章、下载、课程内容,供大家免费下载体验。

3104

2023.09.04

Postman身份认证怎么配置
Postman身份认证怎么配置

本专题从实际API接口调试场景出发,讲解Postman身份认证的完整配置流程,包括常见认证协议介绍、授权参数设置、访问令牌填写、OAuth 2.0授权及认证失败排查,帮助用户正确完成接口授权与访问验证。

40

2026.11.06

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
WebStorm 官方调试文档
WebStorm 官方调试文档

共0课时 | 0人学习

React 教程
React 教程

共58课时 | 12.5万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 6.8万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn