一文带你看懂一种多线程解决方案Web Worker的使用方法

通过使用 Web Workers,Web 应用程序可以在独立于主线程的后台线程中,运行一个脚本操作。这样做的好处是可以在独立线程中执行费时的处理任务,从而允许主线程(通常是 UI 线程)不会因此被阻塞/放慢。

使用构造函数(例如,Worker())创建一个 worker 对象,构造函数接受一个 JavaScript 文件 URL — 这个文件包含了将在 worker 线程中运行的代码。

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

注意点

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

例子

主线程

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

Worker 输出内容:
主线程中的api,worker表示是 Worker 的实例
  • worker.postMessage: 主线程往worker线程发消息,消息可以是任意类型数据,包括二进制数据
  • worker.terminate: 主线程关闭worker线程
  • worker.onmessage: 指定worker线程发消息时的回调,也可以通过worker.addEventListener(‘message’,cb)的方式
  • worker.onerror: 指定worker线程发生错误时的回调,也可以 worker.addEventListener(‘error’,cb)
worker线程

Worker线程中全局对象为 self,代表子线程自身,这时 this指向self

// worker.js
let i = 1

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

simpleCount()

// 指定主线程发worker线程消息时的回调,也可以self.addEventListener('message',cb)
self.onmessage = ev => {
    // worker线程往主线程发消息,消息可以是任意类型数据,包括二进制数据
    self.postMessage(ev.data + ' 呵呵~')
}

// 指定worker线程发生错误时的回调,也可以 self.addEventListener('error',cb)
self.onerror = er =>{
    // worker线程关闭自己
    self.close()
}
worker线程中api,self,代表子线程自身
  • self.postMessage: worker线程往主线程发消息,消息可以是任意类型数据,包括二进制数据
  • self.close: worker线程关闭自己
  • self.onmessage: 指定主线程发worker线程消息时的回调,也可以self.addEventListener(‘message’,cb)
  • self.onerror: 指定worker线程发生错误时的回调,也可以 self.addEventListener(‘error’,cb)
worker线程中加载脚本的api:
importScripts('script1.js')	// 加载单个脚本
importScripts('script1.js', 'script2.js')	// 加载多个脚本

实战场景

  1. 加密数据
    有些加解密的算法比较复杂,或者在加解密很多数据的时候,这会非常耗费计算资源,导致UI线程无响应,因此这是使用Web Worker的好时机,使用Worker线程可以让用户更加无缝的操作UI。
  2. 预取数据
    有时候为了提升数据加载速度,可以提前使用Worker线程获取数据,因为Worker线程是可以是用 XMLHttpRequest 的。
  3. 预渲染
    在某些渲染场景下,比如渲染复杂的canvas的时候需要计算的效果比如反射、折射、光影、材料等,这些计算的逻辑可以使用Worker线程来执行,也可以使用多个Worker线程,这里有个射线追踪的示例。
  4. 复杂数据处理场景
    某些检索、排序、过滤、分析会非常耗费时间,这时可以使用Web Worker来进行,不占用主线程。
  5. 预加载图片
    有时候一个页面有很多图片,或者有几个很大的图片的时候,如果业务限制不考虑懒加载,也可以使用Web Worker来加载图片

Web Workers 的可用功能

由于 Web Workers 的多线程特性,它只能使用一部分 JavaScript 功能。以下是可使用的功能列表:

  • navigator 对象
  • location 对象(只读)
  • XMLHttpRequest
  • setTimeout()/clearTimeout() 和 setInterval()/clearInterval()
  • Application Cache
  • 使用 importScripts 来引用外部脚本
  • 创建其它 web workers

Web Worker 的局限性

令人沮丧的是,Web Workers 不能够访问一些非常关键的 JavaScript 功能:

  • DOM(非线程安全的)
  • window 对象
  • document 对象
  • parent 对象

你可能感兴趣的:(vue,javascript,多线程,Worker,worker线程在与主线程,postMessage,XMLHttpRequest,importScripts,onmessage)