轻松上手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请求。

二、例子

1、主线程

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

<div>
    Worker 输出内容：<span id='app'></span>
    <input type='text' title='' id='msg'>
    <button onclick='sendMessage()'>发送</button>
    <button onclick='stopWorker()'>stop!</button>
</div>

<script>
    if (typeof (Worker) === 'undefined') // 使用Worker前检查一下浏览器是否支持
        document.writeln(' Sorry! No Web Worker support.. ')
    else {
        window.w = new Worker('worker.js')
        // 指定worker线程发消息时的回调，也可以通过 worker.addEventListener('message',cb)的方式
        window.w.onmessage = ev => {
            document.getElementById('app').innerHTML = ev.data
        }
        // 指定worker线程发生错误时的回调，也可以 worker.addEventListener('error',cb)
        window.w.onerror = err => {
            w.terminate()
            console.log(err.filename, err.lineno, err.message) // 发生错误的文件名、行号、错误内容
        }

        function sendMessage() {
            const msg = document.getElementById('msg')
            // 主线程往worker线程发消息，消息可以是任意类型数据，包括二进制数据
            window.w.postMessage(msg.value)
        }

        function stopWorker() {
            // 主线程关闭worker线程
            window.w.terminate()
        }
    }
</script>

2、主线程中的api，worker表示是 Worker 的实例

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

3、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()
}

4、worker线程中api，self，代表子线程自身

• self.postMessage: worker线程往主线程发消息，消息可以是任意类型数据，包括二进制数据
• self.close: worker线程关闭自己
• self.onmessage: 指定主线程发worker线程消息时的回调，也可以self.addEventListener(‘message’,cb)
• self.onerror: 指定worker线程发生错误时的回调，也可以 self.addEventListener(‘error’,cb)

5、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 对象