JavaScript Web Worker用法指南

🧑‍🎓 个人主页:《爱蹦跶的大A阿》

🔥当前正在更新专栏:《VUE》 、《JavaScript保姆级教程》、《krpano》

​ 

✨ 前言

        Web Worker可以将耗时任务放到后台执行,避免阻塞UI。本文将详细介绍Web Worker的用法,让你可以提升web应用性能。

通过本文你将学习:

  • Web Worker的工作原理
  • 不同类型worker的区别
  • worker的创建和通信用法
  • worker间的数据传递方法
  • worker的调试技巧
  • worker可以提升应用性能的场景
  • 弥补worker在老浏览器不兼容的方法

准备让Web Worker成为你的网页优化利器了吗?让我们开始吧!

第一节:Web Worker简介

Web Worker可以将JS代码运行在后台线程,实现多线程:

  • 不阻塞主UI线程,提升互动性
  • 与主线程同时运行,实现并行
  • 通过消息传递与主线程通信

DEDICATED WORKER:专属于一个页面 SHARED WORKER:可被多个页面共享

第二节:创建Worker

创建一个Dedicated Worker的基本步骤是:

  1. 主线程中用new Worker()实例化一个Worker对象,并传入脚本的路径
  2. 在指定的js脚本中使用self对象对worker进行编程
  3. self对象表示worker的全局作用域,可以添加事件监听器
  4. 常见的事件有onmessage、onerror等

一个典型的示例:

// 主线程
const worker = new Worker('work.js');worker.postMessage('start');// work.js
self.addEventListener('message', e => {console.log('worker recv:', e.data);self.postMessage('hello from worker');
});

Worker线程中不能直接访问DOM,但可以通过postMessage()与主线程通信。

创建一个Shared Worker步骤类似,只是用SharedWorker实例,并可以指定worker的名称。

Shared Worker可以被多个窗口访问,从而共享同一个逻辑。

Dedicated Worker专属于一个页面文档。根据实际需求选择合适的Worker类型。

创建shared worker:

// 主线程
const worker = new SharedWorker('work.js');// work.js 
self.addEventListener('connect', (e) => {// 收到连接
});

第三节:worker间通信

主线程 -> worker:

worker.postMessage('hello');

worker -> 主线程:

self.postMessage('hi from worker');

 

  1. 主线程到worker的通信

主线程使用worker对象的postMessage()方法向worker发送消息:

// 主线程 
worker.postMessage('start');

 postMessage()可以发送各种数据类型,包括原始类型、对象、数组等。

  1. worker到主线程的通信

worker中使用self.postMessage()发送:

// worker内
self.postMessage('message from worker');

 self代表worker的全局作用域。

  1. 接收消息

主线程通过worker.onmessage监听消息:

// 主线程
worker.onmessage = function(e) {console.log(e.data);
}

worker中通过self.onmessage监听:

// worker内 
self.onmessage = function(e) {console.log(e.data);
}

e.data是消息内容。

  1. 传递数据注意事项
  • 对象会串行化,记得调用JSON.parse()
  • 传递函数需要把函数字符串化

这些是worker间通信的主要方式,可以传递不同类型的数据,充分利用多线程带来的好处。

第五节:Worker中的异步请求

Worker线程可以发出AJAX请求,使用与主线程相同的XMLHttpRequest对象:

// Worker内
const xhr = new XMLHttpRequest();
xhr.open('GET', '/data');
xhr.onload = () => {self.postMessage(xhr.response); 
}
xhr.send();

这样可以在Worker中完成异步数据加载,不影响主UI线程。

第六节:调试Worker

主线程可以通过inspect()调试运行中的Worker:

const worker = new Worker();
worker.inspect();

 

这会打开DevTools来调试worker线程。

也可以将console日志发送到主线程:

// Worker内
self.postMessage(console.log.apply(console, arguments));

第七节:使用场景

Worker常用于:

  • 超大数据排序、搜索、处理
  • 数据转换与编译,如Json、Excel
  • 高延迟任务或高计算工作,如机器学习

第八节:兼容性和代替方案

低版本浏览器可能不支持Worker,可以使用polyfill或只在新浏览器使用。

也可以使用setTimeout模拟后台线程。

✨ 结语     

        在这篇文章中,我们全面介绍了Web Worker的用法 - 它可以将JavaScript代码运行在后台线程,实现多线程计算。

        首先,我们看到Web Worker的优点,它不会阻塞主UI线程,可以实现并行执行任务。然后,我们介绍了Dedicated Worker和Shared Worker的区别,以及创建和终止Worker的方法。

        接下来,我们重点讲解了Worker之间的消息通信机制,这是利用多线程的关键。我们也讨论了Worker中发起异步请求和调试技巧。

        最后,给出了Web Worker的实际应用场景,以及需要注意的兼容性问题。

        我尽量用通俗的语言和示例给出了全面的讲解,希望这篇文章可以帮助大家正确使用Web Worker来优化web应用性能。如果还有任何问题,欢迎在评论交流!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/617982.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Leetcode】673.最长递增子序列的个数(Hard)

一、题目 1、题目描述 给定一个未排序的整数数组 nums , 返回最长递增子序列的个数 。 注意 这个数列必须是 严格 递增的。 示例1: 输入: [1,3,5,4,7] 输出: 2 解释: 有两个最长递增子序列,分别是 [1, 3, 4, 7] 和[1, 3, 5, 7]。示例2: 输入: [2,2,2,2,2] 输出: 5 解…

训练营四十五天 | ● 70. 爬楼梯 (进阶)● 322. 零钱兑换 ● 279.完全平方数

70. 爬楼梯 (进阶) 一次跨1-m个台阶为物品,共有n个台阶为背包容量,排列问题,完全背包 代码随想录 import java.util.*; public class Main { public static void main (String[] args) { Scanner sc new…

FineBI实战项目一(22):各省份订单个数及订单总额分析开发

点击新建组件,创建各省份订单个数及订单总额组件。 选择自定义图表,将province拖拽到横轴,将cnt和total拖拽到纵轴。 调节纵轴的为指标并列。 修改横轴和纵轴的标题。 修改柱状图样式: 将组件拖拽到仪表板。 结果如下:…

【专业英语】计算机专业英语(第三版)清华大学出版社

专业英语 部分专业名词 短语 在这里插入图片描述

FlinkCDC的分析和应用代码

前言:原本想讲如何基于Flink实现定制化计算引擎的开发,并以FlinkCDC为例介绍;发现这两个在表达上不知以谁为主,所以先分析FlinkCDC的应用场景和技术实现原理,下一篇再去分析Flink能在哪些方面,做定制化计算…

hostnamectl命令使用方法

hostnamectl命令是一个用于管理系统主机名的命令。它可以用于查看、设置和修改主机名、静态主机名和图标名称。 使用hostnamectl命令可以执行以下操作: 查看当前主机名:运行hostnamectl命令,它将显示当前主机名及相关信息,如静态…

U盘用完到底能不能直接拔?一篇搞懂

有没有人懂这种情况!! 传输完文件之后,觉得大功告成 以十分帅气的姿势 and 迅雷不及掩耳之势 “咻”地一下把U盘直接给……拔掉了…… 然后瞬间想起没有安全退出,陷入深深的懊悔…… (甚至还要再花时间&#xff0…

linux系统nginx proxy做反向代理

Nginx Proxy代理 代理概念正向代理反向代理两者的区别 nginx Proxy 配置代理模块代理配置启用nginx proxy代理 代理概念 正向代理 正向代理的过程隐藏了真实的请求客户端,服务器不知道真实的客户端是谁,客户端请求的服务都被代理服务器代替请求。我们常…

WebServer 跑通/运行/测试(详解版)

👂 椿 - 沈以诚 - 单曲 - 网易云音乐 目录 🎂前言 🌼跑通 (1)系统环境 (2)克隆源码 (3)安装和配置 Mysql (4)写 sql 语句 (5&…

IDM 用户帐号过期提醒

芯片设计环境通常有比较严格的安全管理,用户帐号过期后就不能登录环境,影响用户工作。为减少影响,应该提前向用户发送提醒,及时更新密码。 方案设计 通过IDM REST API接口获取所有帐号信息,根据以下条件过滤&#xf…

win11下载Hbuliderx 安装闪退解决教程+安装包分享

在官网下载 目录 在官网下载 出现闪退 下载失败 2.2. 最终在百度网盘里下载了历史版本 2.3. 然后解压文件 2.4. 双击打开 2.5. 安装成功 出现闪退 下载失败 结果下载失败,一下子弹出的下载框就会闪退 2.2. 最终在百度网盘里下载了历史版本 下载的网盘链接: …

黑马苍穹外卖学习Day5

文章目录 Redis学习Redis简介准备工作Redis常用数据类型介绍各数据类型的特点Redis常用命令字符串操作命令哈希操作命令列表操作命令集合操作命令有序集合操作命令通用操作命令 在Java中操作Redis导入Spring Data Redis坐标配置Redis数据源编写配置类,创建RedisTemp…

Scipy 中级教程——图像处理

Python Scipy 中级教程:图像处理 Scipy 的图像处理模块提供了许多功能,用于读取、处理和分析图像。在本篇博客中,我们将深入介绍 Scipy 中的图像处理功能,并通过实例演示如何应用这些工具。 1. 读取和显示图像 首先&#xff0c…

linux多进程基础(2):僵尸进程以及解决方法wait()函数(大白话解释)

在我的linux多线程多进程基础专栏中,已和大家一起分享了僵尸线程.在这一篇文章中我将分享僵尸进程以及解决方法wait()函数. 1.僵尸进程 什么是僵尸进程呢?用最通俗易懂的话来说就是子进程执行结束的时候其父进程并没有及时回收该子进程导致成为僵尸进程.如果僵尸进程数量较多…

【模型评估 06】超参数调优

对于很多算法工程师来说,超参数调优是一件非常头疼的事情。除了根据经验设定所谓的“合理值”之外,一般很难找到合理的方法去寻找超参数的最优取值。而与此同时,超参数对于模型效果的影响又至关重要。有没有一些可行的办法去进行超参数的调优…

10分钟快速搭建个人博客、文档网站!

本文来分享 8 个现代化前端工具,帮你快速生成个人博客、文档网站! VitePress VitePress 是一款静态站点生成器,专为构建快速、以内容为中心的网站而设计。简而言之,VitePress 获取用 Markdown 编写的源内容,为其应用…

前端面试 -- vue系列

Vue系列 1. vue理解:2. SPA(单页面应用理解)3. vue实例挂载的过程4. v-for和v-if优先级5. SPA首屏加载速度慢的原因和解决办法6. Vue中给对象添加新属性界面不刷新(直接给对象添加属性)7. vue组件之间的通信方式有哪些…

python24.1.13for循环

对列表、字典、字符串等进行迭代 range

Legion R7000 2021(82JW)原装出厂Win10/WIN11系统预装OEM系统镜像

LENOVO联想拯救者R7000 2021款(82JW)笔记本电脑原厂Windows10/11系统 链接:https://pan.baidu.com/s/1m_Ql5qu6tnw62PbpvXB0hQ?pwd6ek4 提取码:6ek4 原装出厂系统自带所有驱动、出厂主题壁纸、系统属性专属联机支持标志、系统属性专属联想的LOGO标…

Linux期末总复习( 详解 )

文章目录 一、选择题二、填空题三、简答题四、操作题 一、选择题 1.在创建Linux分区时,一定要创建( D )两个分区 A. FAT/NTFS  B. FAT/SWAP  C. NTFS/SWAP  D.SWAP/根分区 2.在Red Hat Linux 9 中,系统默认的&#xf…