Web Work 简介

本文介绍了WebWorker的基本概念及其两种类型:dedicatedWebWorker和SharedWebWorker。详细解释了它们的工作原理和使用方法,包括如何创建、通信及终止这些Worker。并通过实例展示了如何利用SharedWebWorker实现页面间的通信。

通过使用WebWork我们就可以在浏览器后台使用JavaScript,而不占用浏览器自身的线程,WebWorker可以提高应用的额总体性能。一般来说,点击一个按钮运行 javascript 后,在这段代码运行完毕之前页面时无法响应客户的操作的,但是代码可以交给WebWorker运行,这样javascript依然可以响应用户的操作。
WebWorker可以分为两种类型:dedicated Web WorkerShared Web Worker,在javascript中work代表dedicated Web Worker ,及单线程,随着当前页面的关闭而结束,也就意味着代码只能被创建他的页面使用;ShareWork代表 Shared Web Worker,及多线程,可以由多个页面进行访问。
使用方法同WebSocket

    var worker = new Worker('dedicated.js');//创建一个专线,并给Worker的构造函数提供一个指向Javascript文件资源的URL即可
    worker.onmessage = function (event) { ... };//接收专线传过来的数据
    worke.addEventListener('message', function(event){})

ShareWork 让js多线程,最重要的用途就是从多个页面中提取公共模块,当服务器有跟更新的时候先由ShareWorker处理,然后再由ShareWorker发送到所有的相关页面,这样无论用户同时打开多少个页面,都不会产生冗余对的长连接。
例如淘宝,想让游览器选项卡之间进行通信(也可以用cookie等,但是成本高),

var worker = new SharedWorker('sharedworker.js', ’mysharedworker’ );//第二个参数如果提供,那么这个参数将作用于这个共享线程的名称。
    worker.port.onmessage = function(event){...};//从端口接收数据
    worker.port.postMessage('字符串');//向端口发送普通的文本数据
    worker.port.postMessage({ username: 'usertext'; 
    live_city: ['data-one', 'data-two', 'data-three','data-four']});//向端口发送结构化数据。json数据格式
通过terminate()来终止服务。
Web Worker 是浏览器提供的一种多线程机制,允许开发者在后台线程中运行 JavaScript 脚本[^5]。传统的前端 JavaScript 代码运行在浏览器的主线程上,所有任务都共享同一线程,这可能会导致页面在执行复杂计算或耗时操作时变得卡顿甚至无响应。Web Worker 的出现解决了这一问题,它通过创建一个独立于主线程的子线程来执行特定任务,从而避免阻塞用户界面。 ### Web Worker 在前端开发中的用途 Web Worker 主要用于处理那些需要长时间运行或计算密集型的任务,以保持主线程的流畅性。常见用途包括: - **复杂计算**:例如图像处理、数据加密、大规模数组排序等。 - **后台任务**:如文件解析(CSV、JSON)、音频/视频编码转换等。 - **实时更新**:与 WebSocket 配合使用,处理实时通信数据,例如聊天应用的消息推送、在线游戏的状态同步等[^5]。 ### Web Worker 的实现方式 Web Worker 的实现基于 `Worker` 构造函数,开发者可以通过指定一个外部 JavaScript 文件路径来创建一个新的工作线程。主线程和 Worker 线程之间通过 `postMessage()` 方法进行消息传递,并通过 `onmessage` 事件监听器接收返回的数据。以下是一个简单的示例: ```javascript // main.js - 主线程代码 const worker = new Worker('worker.js'); worker.onmessage = function(event) { console.log('收到Worker返回的数据:', event.data); }; worker.postMessage({ number: 10 }); // 向Worker发送数据 // worker.js - Worker线程代码 self.onmessage = function(event) { const result = event.data.number * 2; self.postMessage(result); // 返回计算结果 }; ``` 此外,还有一种称为 **SharedWorker** 的变体,它可以被多个浏览上下文(如多个标签页、iframe)共享[^1]。然而,由于其兼容性和使用场景较为有限,目前主要使用的仍然是普通 Worker。 需要注意的是,Web Worker 并非完全替代主线程的功能,而是作为其补充存在。Worker 线程无法直接访问 DOM、某些全局变量(如 `window` 和 `document`),也不能使用一些依赖于 UI 的 API(如 `alert()` 或 `prompt()`)。因此,它更适合用于纯逻辑运算和后台服务支持。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值