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 位图等
  • 高频用户交互
  • 数据的预取
相关推荐
萌萌哒草头将军6 小时前
⚡⚡⚡尤雨溪宣布开发 Vite Devtools,这两个很哇塞 🚀 Vite 的插件,你一定要知道!
前端·vue.js·vite
小彭努力中6 小时前
7.Three.js 中 CubeCamera详解与实战示例
开发语言·前端·javascript·vue.js·ecmascript
浪裡遊7 小时前
跨域问题(Cross-Origin Problem)
linux·前端·vue.js·后端·https·sprint
LinDaiuuj7 小时前
判断符号??,?. ,! ,!! ,|| ,&&,?: 意思以及举例
开发语言·前端·javascript
敲厉害的燕宝7 小时前
Pinia——Vue的Store状态管理库
前端·javascript·vue.js
Aphasia3117 小时前
react必备JavaScript知识点(二)——类
前端·javascript
玖玖passion7 小时前
数组转树:数据结构中的经典问题
前端
呼Lu噜7 小时前
WPF-遵循MVVM框架创建图表的显示【保姆级】
前端·后端·wpf
珠峰下的沙砾7 小时前
Vue3 里 CSS 深度作用选择器 :global
前端·javascript·css
航Hang*8 小时前
WEBSTORM前端 —— 第2章:CSS —— 第3节:背景属性与显示模式
前端·css·css3·html5·webstorm