Web Worker多线程编程

Web Worker 解决了什么问题

浏览器 Javascript 是以单线程方式运行的,也就是意味着 JS 执行和 UI 渲染占用同一个主线程,当 Javascript 进行高负载的数据处理或运算时,UI 渲染就很有可能被阻断,浏览器就会出现卡顿,这样很容易降低用户体验。

为此,Javascrip 提供了异步操作,如定时器、ajax、I/O 回调等,但这些异步代码都是运行在主线程上的,如果主线程被阻塞,那么异步代码也就无法执行,不能从根本上解决问题。所以多线程Web worker应运而生,它是 HTML5 标准的一部分,允许创建一个新的子线程,子线程和主线程可以同时允许,且互不干扰。

此外 worker 和主线程之间可以通过postMessageonmessage方法进行双向数据通信

Web Worker 如何使用

示例如下

js 复制代码
/*main.js*/
const worker = new Worker("./js/worker.js");
console.log("🚀 ~ worker:", worker);
worker.postMessage("hello");
worker.onmessage = ({ data }) => {
  console.log("🚀", data);
  for (let i = 0; i < 100; i++) {
    console.log("main:", i);
  }
  // worker.terminate()
};
js 复制代码
/*worker.js*/
addEventListener("message", ({ data }) => {
  console.log(data);
  postMessage("hi");
  for (let i = 0; i < 100; i++) {
    console.log("worker:", i);
  }
});

Web Worker 需要注意的问题

访问限制

woorker 子线程所在的全局对象,与主线程不在同一个上下文环境,所以无法访问到主线程的 window 对象,包括 document 对象,document 对象无法被访问到,但是可以通过 postMessage 来传递数据。

跨域限制

worker 脚本文件必须与主线程脚本同源,这个可以将 worker 脚本文件转换成 Blob 对象,在生成 URL,传给 Worker 的构造函数

应用场景

  • 使用专用线程进行数学运算,比如处理大批量数据、读取用户上传文件、更改 canvas 位图等
  • 高频用户交互
  • 数据的预取
相关推荐
华仔啊17 小时前
Vue3+CSS 实现的 3D 卡片动画,让你的网页瞬间高大上
前端·css
江城开朗的豌豆17 小时前
解密React虚拟DOM:我的高效渲染秘诀 🚀
前端·javascript·react.js
vivo互联网技术17 小时前
拥抱新一代 Web 3D 引擎,Three.js 项目快速升级 Galacean 指南
前端·three.js
江城开朗的豌豆17 小时前
React应用优化指南:让我的项目性能“起飞”✨
前端·javascript·react.js
会飞的青蛙17 小时前
GIT 配置别名&脚本自动化执行
前端·git
再吃一根胡萝卜17 小时前
🔍 当 `<a-menu>` 遇上 `<template>`:一个容易忽视的菜单渲染陷阱
前端
Asort18 小时前
JavaScript 从零开始(六):控制流语句详解——让代码拥有决策与重复能力
前端·javascript
无双_Joney18 小时前
[更新迭代 - 1] Nestjs 在24年底更新了啥?(功能篇)
前端·后端·nestjs
在云端易逍遥18 小时前
前端必学的 CSS Grid 布局体系
前端·css