前端 Web Workers 简介

weixin_46787337

已于 2023-12-10 17:16:14 修改

阅读量1.2k

点赞数 13

CC 4.0 BY-SA版权

文章标签：前端

于 2023-12-10 17:03:32 首次发布

本文链接：https://blog.csdn.net/weixin_46787337/article/details/134910743

简介

以前我们总说，JS 是单线程没有多线程，当 JS 在页面中运行长耗时同步任务的时候就会导致页面假死影响用户体验，从而需要设置把任务放在任务队列中；执行任务队列中的任务也并非多线程进行的，然而现在 HTML5 提供了我们前端开发这样的能力 - Web Workers API，我们一起来看一看 Web Worker 是什么，怎么去使用它，在实际生产中如何去用它来进行产出。

概述

Web Workers 使得一个 Web 应用程序可以在与主执行线程分离的后台线程中运行一个脚本操作。这样做的好处是可以在一个单独的线程中执行费时的处理任务，从而允许主（通常是 UI）线程运行而不被阻塞。

它的作用就是给 JS 创造多线程运行环境，允许主线程创建 worker 线程，分配任务给后者，主线程运行的同时 worker 线程也在运行，相互不干扰，在 worker 线程运行结束后把结果返回给主线程。这样做的好处是主线程可以把计算密集型或高延迟的任务交给 worker 线程执行，这样主线程就会变得轻松，不会被阻塞或拖慢。这并不意味着 JS 语言本身支持了多线程能力，而是浏览器作为宿主环境提供了 JS 一个多线程运行的环境。

不过因为 worker 一旦新建，就会一直运行，不会被主线程的活动打断，这样有利于随时响应主线程的通性，但是也会造成资源的浪费，所以不应过度使用，用完注意关闭。或者说：如果 worker 无实例引用，该 worker 空闲后立即会被关闭；如果 worker 实列引用不为 0，该 worker 空闲也不会被关闭。

兼容性

在这里插入图片描述

注意事项

worker 线程的使用有一些注意点：

同源限制 worker 线程执行的脚本文件必须和主线程的脚本文件同源，这是当然的了，总不能允许 worker 线程到别人电脑上到处读文件吧
文件限制为了安全，worker 线程无法读取本地文件，它所加载的脚本必须来自网络，且需要与主线程的脚本同源
DOM 操作限制 worker 线程在与主线程的 window 不同的另一个全局上下文中运行，其中无法读取主线程所在网页的 DOM 对象，也不能获取 document、window等对象，但是可以获取navigator、location(只读)、XMLHttpRequest、setTimeout族等浏览器API
通信限制 worker 线程与主线程不在同一个上下文，不能直接通信，需要通过postMessage方法来通信
脚本限制 worker 线程不能执行alert、confirm，但可以使用 XMLHttpRequest 对象发出 ajax 请求

示例

在主线程中生成 Worker 线程很容易：

var myWorker = new Worker(jsUrl, options)

Worker() 构造函数，第一个参数是脚本的网址（必须遵守同源政策），该参数是必需的，且只能加载 JS 脚本，否则报错。第二个参数是配置对象，该对象可选。它的一个作用就是指定 Worker 的名称，用来区分多个 Worker 线程。

// 主线程

var myWorker = new Worker('worker.js', {
   
    name : 'myWorker' });

// Worker 线程
self.name // myWorker

关于 api 什么的，直接上例子大概就能明白了，首先是 worker 线程的 js 文件：

workerThread1.js 文件中

关于 api 什么的，直接上例子大概就能明白了，首先是 worker 线程的 js 文件：

// workerThread1.js

let i = 1

function simpleCount() {
   
   
  i++
  self.postMessage(i)
  setTimeout(simpleCount, 1000)
}