0

0

javascript的Web Workers是什么_它如何实现多线程?

幻影之瞳

幻影之瞳

发布时间:2025-12-18 17:59:17

|

761人浏览过

|

来源于php中文网

原创

web workers 是浏览器提供的后台线程 api,通过独立执行上下文与主线程消息通信实现并发,不阻塞主线程且无法访问 dom;需用 postmessage 传递可序列化数据,适用于纯计算等任务。

javascript的web workers是什么_它如何实现多线程?

Web Workers 是浏览器提供的一个 API,让你能在后台线程中运行 JavaScript 代码,**不阻塞主线程**,从而避免页面卡顿。它不是传统意义上的“多线程”(JavaScript 本身仍是单线程),而是通过**独立的执行上下文 + 主线程与工作线程之间的消息通信**,实现并发执行的效果。

Web Workers 的本质:独立的 JS 执行环境

每个 Worker 都运行在自己的全局上下文中(有自己的 selfconsolesetTimeout 等),但**没有 DOM、windowdocument 等浏览器 API**——它不能直接操作页面。Worker 和主线程之间**不能共享内存或变量**,只能靠 postMessage()onmessage 传递可序列化的数据(如对象、数组、字符串,也支持 Transferable 对象如 ArrayBuffer 实现零拷贝)。

如何创建和使用 Worker

基本用法分三步:

  • 写一个单独的 JS 文件(例如 worker.js),里面定义 self.onmessage 处理消息,并用 self.postMessage() 返回结果
  • 在主线程中用 new Worker('worker.js') 创建实例
  • worker.postMessage(data) 发送数据,用 worker.onmessage 接收响应

例如:主线程计算斐波那契数列这种耗时操作,交给 Worker 做,主线程继续响应用户点击或动画,体验更流畅。

简单听记
简单听记

百度网盘推出的一款AI语音转文字工具

下载

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

常见类型:Dedicated vs Shared vs Service Worker

Dedicated Worker:最常用,一对一绑定,仅被创建它的脚本访问。
Shared Worker:多个浏览上下文(如不同 tab 或 iframe)可共用同一个 Worker,需通过 port 通信。
Service Worker:虽同属 Worker 机制,但定位不同——专用于拦截网络请求、实现离线缓存和推送,生命周期由浏览器管理,与页面无直接关联。

注意限制和最佳实践

Worker 中无法访问:localStorageDOMdocument.cookieXMLHttpRequest(但可用 fetch)、parent 等。
建议把纯计算、数据解析、加密解密、大量数组处理等任务移入 Worker。
频繁通信会带来开销,尽量减少 postMessage 次数,必要时批量传数据或使用 Transferable 提升性能。

基本上就这些。它不是让 JS 变成多线程语言,而是提供了一种安全、隔离、通信明确的并发模型。

热门AI工具

更多
DeepSeek
DeepSeek

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

豆包大模型
豆包大模型

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

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

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

文心一言
文心一言

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

讯飞写作
讯飞写作

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

即梦AI
即梦AI

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

ChatGPT
ChatGPT

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

相关专题

更多
cookie
cookie

Cookie 是一种在用户计算机上存储小型文本文件的技术,用于在用户与网站进行交互时收集和存储有关用户的信息。当用户访问一个网站时,网站会将一个包含特定信息的 Cookie 文件发送到用户的浏览器,浏览器会将该 Cookie 存储在用户的计算机上。之后,当用户再次访问该网站时,浏览器会向服务器发送 Cookie,服务器可以根据 Cookie 中的信息来识别用户、跟踪用户行为等。

6466

2023.06.30

document.cookie获取不到怎么解决
document.cookie获取不到怎么解决

document.cookie获取不到的解决办法:1、浏览器的隐私设置;2、Same-origin policy;3、HTTPOnly Cookie;4、JavaScript代码错误;5、Cookie不存在或过期等等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

362

2023.11.23

阻止所有cookie什么意思
阻止所有cookie什么意思

阻止所有cookie意味着在浏览器中禁止接受和存储网站发送的cookie。阻止所有cookie可能会影响许多网站的使用体验,因为许多网站使用cookie来提供个性化服务、存储用户信息或跟踪用户行为。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

432

2024.02.23

cookie与session的区别
cookie与session的区别

本专题整合了cookie与session的区别和使用方法等相关内容,阅读专题下面的文章了解更详细的内容。

97

2025.08.19

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

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

553

2023.08.03

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

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

216

2023.09.04

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

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

1553

2023.10.24

字符串介绍
字符串介绍

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

640

2023.11.24

pixiv网页版官网登录与阅读指南_pixiv官网直达入口与在线访问方法
pixiv网页版官网登录与阅读指南_pixiv官网直达入口与在线访问方法

本专题系统整理pixiv网页版官网入口及登录访问方式,涵盖官网登录页面直达路径、在线阅读入口及快速进入方法说明,帮助用户高效找到pixiv官方网站,实现便捷、安全的网页端浏览与账号登录体验。

462

2026.02.13

热门下载

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

精品课程

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

共58课时 | 5.2万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 3万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.4万人学习

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

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