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 位图等
  • 高频用户交互
  • 数据的预取
相关推荐
真滴book理喻5 分钟前
Vue(四)
前端·javascript·vue.js
蜜獾云7 分钟前
npm淘宝镜像
前端·npm·node.js
dz88i88 分钟前
修改npm镜像源
前端·npm·node.js
Jiaberrr11 分钟前
解锁 GitBook 的奥秘:从入门到精通之旅
前端·gitbook
顾平安1 小时前
Promise/A+ 规范 - 中文版本
前端
聚名网1 小时前
域名和服务器是什么?域名和服务器是什么关系?
服务器·前端
桃园码工1 小时前
4-Gin HTML 模板渲染 --[Gin 框架入门精讲与实战案例]
前端·html·gin·模板渲染
沈剑心2 小时前
如何在鸿蒙系统上实现「沉浸式」页面?
前端·harmonyos
一棵开花的树,枝芽无限靠近你2 小时前
【PPTist】组件结构设计、主题切换
前端·笔记·学习·编辑器
m0_748237052 小时前
Chrome 关闭自动添加https
前端·chrome