0

0

javascript Web Worker是什么_怎样进行多线程编程?

狼影

狼影

发布时间:2026-01-07 20:24:33

|

869人浏览过

|

来源于php中文网

原创

web worker 是浏览器提供的后台线程机制,通过消息传递与主线程通信,不可直接访问 dom;需用 postmessage 传数据回主线程更新;创建须从外部文件加载,支持结构化克隆与 transferable 优化;模块 worker 需 type: 'module' 且注意兼容性;worker 实例需手动 terminate 避免内存泄漏。

javascript web worker是什么_怎样进行多线程编程?

Web Worker 是浏览器提供的、让 JavaScript 在后台线程中运行的机制,它不阻塞主线程,能真正实现并发执行——但要注意,它不是“多线程”意义上的共享内存并发,而是通过消息传递(postMessage / onmessage)进行隔离通信。

Web Worker 为什么不能直接访问 DOM?

因为 DOM 操作是主线程专属的,Worker 运行在独立上下文,没有 windowdocumentlocalStorage 等全局对象。试图访问会直接抛出 ReferenceErrorundefined

  • 可用的全局对象只有 selfconsolesetTimeoutfetchimportScripts() 等有限 API
  • 想操作 DOM?必须把结果通过 postMessage 发回主线程,由主线程决定怎么更新
  • 常见错误:在 Worker 里写 document.getElementById() —— 运行即报错,且无堆提示(除非打开 DevTools 的 Workers 面板)

如何创建并通信一个基本 Worker?

Worker 必须从外部 JS 文件加载(不能是内联字符串或 Blob URL,除非用 URL.createObjectURL()),且路径受同源策略限制。

主线程代码示例:

飞书多维表格
飞书多维表格

表格形态的AI工作流搭建工具,支持批量化的AI创作与分析任务,接入DeepSeek R1满血版

下载

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

const worker = new Worker('worker.js');
worker.postMessage({ type: 'calculate', data: [1, 2, 3, 4] });

worker.onmessage = function (e) {
  console.log('主线程收到:', e.data); // { result: 10 }
};

worker.onerror = function (e) {
  console.error('Worker 报错:', e.message, e.filename, e.lineno);
};

对应 worker.js 内容:

self.onmessage = function (e) {
  if (e.data.type === 'calculate') {
    const sum = e.data.data.reduce((a, b) => a + b, 0);
    self.postMessage({ result: sum });
  }
};
  • self 在 Worker 中等价于全局作用域,不要用 thiswindow
  • 传给 postMessage 的数据会被结构化克隆(structured clone),不支持函数、DOM 节点、undefinedSymbol
  • 如需传大量数据(如 ArrayBuffer),可用 transferable 选项避免拷贝:postMessage(data, [arrayBuffer])

Worker 中如何加载其他脚本或模块?

Worker 默认不支持 ES Module(import 语法),但可通过 importScripts() 同步加载传统脚本,或使用 new Worker(url, { type: 'module' }) 创建模块型 Worker(需服务端支持 MIME 类型 application/javascript)。

  • importScripts('lib.js', 'utils.js'):按顺序同步加载,任一失败则整个 Worker 初始化失败
  • 模块 Worker 示例:
    const worker = new Worker('./math-worker.js', { type: 'module' });
    ,然后在 math-worker.js 中可直接写 import { add } from './utils.mjs';
  • 注意:模块 Worker 不支持 importScripts(),二者互斥
  • Chrome 和 Firefox 支持良好,Safari 对模块 Worker 的 import.meta.url 解析有兼容性问题,慎用于生产环境

最易被忽略的一点:Worker 实例不会自动销毁。即使任务完成,只要没调用 worker.terminate() 或页面卸载,它就持续占用内存和线程资源。尤其在频繁创建/销毁场景下(比如每输入一个字符就启一个 Worker 做校验),务必手动清理。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

WorkBuddy
WorkBuddy

腾讯云推出的AI原生桌面智能体工作台

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
chrome什么意思
chrome什么意思

chrome是浏览器的意思,由Google开发的网络浏览器,它在2008年首次发布,并迅速成为全球最受欢迎的浏览器之一。本专题为大家提供chrome相关的文章、下载、课程内容,供大家免费下载体验。

1057

2023.08.11

chrome无法加载插件怎么办
chrome无法加载插件怎么办

chrome无法加载插件可以通过检查插件是否已正确安装、禁用和启用插件、清除插件缓存、更新浏览器和插件、检查网络连接和尝试在隐身模式下加载插件方法解决。更多关于chrome相关问题,详情请看本专题下面的文章。php中文网欢迎大家前来学习。

838

2023.11.06

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

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

760

2023.08.03

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

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

221

2023.09.04

java基础知识汇总
java基础知识汇总

java基础知识有Java的历史和特点、Java的开发环境、Java的基本数据类型、变量和常量、运算符和表达式、控制语句、数组和字符串等等知识点。想要知道更多关于java基础知识的朋友,请阅读本专题下面的的有关文章,欢迎大家来php中文网学习。

1566

2023.10.24

字符串介绍
字符串介绍

字符串是一种数据类型,它可以是任何文本,包括字母、数字、符号等。字符串可以由不同的字符组成,例如空格、标点符号、数字等。在编程中,字符串通常用引号括起来,如单引号、双引号或反引号。想了解更多字符串的相关内容,可以阅读本专题下面的文章。

649

2023.11.24

java读取文件转成字符串的方法
java读取文件转成字符串的方法

Java8引入了新的文件I/O API,使用java.nio.file.Files类读取文件内容更加方便。对于较旧版本的Java,可以使用java.io.FileReader和java.io.BufferedReader来读取文件。在这些方法中,你需要将文件路径替换为你的实际文件路径,并且可能需要处理可能的IOException异常。想了解更多java的相关内容,可以阅读本专题下面的文章。

1228

2024.03.22

php中定义字符串的方式
php中定义字符串的方式

php中定义字符串的方式:单引号;双引号;heredoc语法等等。想了解更多字符串的相关内容,可以阅读本专题下面的文章。

1204

2024.04.29

C# ASP.NET Core微服务架构与API网关实践
C# ASP.NET Core微服务架构与API网关实践

本专题围绕 C# 在现代后端架构中的微服务实践展开,系统讲解基于 ASP.NET Core 构建可扩展服务体系的核心方法。内容涵盖服务拆分策略、RESTful API 设计、服务间通信、API 网关统一入口管理以及服务治理机制。通过真实项目案例,帮助开发者掌握构建高可用微服务系统的关键技术,提高系统的可扩展性与维护效率。

76

2026.03.11

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 6万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 3.4万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.6万人学习

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

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号