如何使用 Web Worker 为 JS 创造多线程环境?

沐华

Web Worker是什么

我们都知道JS是单线程的,所有任务在一个线程上,一次只能做一件事。虽然可以通过AJAX、定时器等可以实现"并行",但还是没有改变JS单线程的本质,把一些复杂的运算放在页面上执行,还是会导致很卡,甚至卡死

而HTML5标准中的Web Worker为JS创造多线程环境,允许主线程创建Worker线程并给它分配任务,而且在主线程执行任务的时候,worker线程可以同时在后台执行它的任务,互不干扰

这让我们可以将一些复杂运算、高频输入的响应处理、大文件分片上传等放在worker线程处理,最后再返回给主线程。很大程度上缓解了主线程UI渲染阻塞的问题,页面就会很流畅

使用 Web Worker 有几个注意点:

  • 同源限制:worker线程运行的文件必须和主线程的脚本是同源
  • 文件限制:worker线程不能打开本机的文件系统(file://),只能加载网络文件
  • 其他限制:worker线程不能操作DOM、不能使用document、window、parent对象和alert、confirm方法

但可以使用location、navigator,不过只能只读不能改写;还可以使用XMLHttpRequest发送AJAX请求;还可以使用缓存

怎么使用 Web Worker呢?

分别看看在主线程的页面和 worker 线程中的方法和用法

主线程中的方法和使用

创建 worker 进程,直接 new 就完事儿了,而且主线程内和 worker 线程内都可以创建多个 worker 线程

可以传两个参数,第一个是网络脚本文件的链接,不能是本地路径,第二个是配置对象,不是必填

假设引入了一个网络文件 worker1.js

// 主线程
const worker = new Worker('http://worker1.js')

然后使用 worker.postMessage() 方法向 worker 线程发送数据,参数可以是各种数据类型,包括二进制。注意!发送过去的数据是传值,也就是拷贝关系而不是传址,所以 worker 线程内部无论怎么修改,都不会影响到主线程的数据

worker.postMessage('这是发给worker线程的消息')

然后再通过 worker.onmessage 监听并接收 worker 线程处理完返回的数据

worker.onmessage = function(event){
    const data = event.data // 这是返回的数据
}

如果 worker 线程中内部发生错误,会触发主线程的 onerror 事件

worker.onerror( event => {
    console.log( 'worker 线程内部执行报错了', event )
})
// 或者
worker.onerrer = function( event ){
    console.log( 'worker 线程内部执行报错了', event )
}
// 或者
worker.addEventListener('error', event => {
    console.log( 'worker 线程内部执行报错了', event )
})

最后是关掉 worker 线程,因为 worker 线程创建成功就会始终运行,不会主动关闭,所以我们不用的时候要主动关掉,避免浪费资源

worker.terminate() // 这样 worker 线程就关闭了

worker 线程中的方法和使用

worker 线程内部执行上下文跟主线程的执行上下文 window 不一样,是一个叫 WorkerGlobalScope 的东西,我们可以用它或者 self 来访问全局对象

如果主线程创建 worker 线程的时候有传第二个参数,在 worker1.js 里面,也就是在 worker 线程里可以直接这样获取,比如区分多个 worker 线程的时候

// 主线程
const worker = new Worker('http://worker1.js', { name: 'worker1' })

// worker1.js
self.name // worker1  

worker 线程里面,需要监听并接收主线程发送过来的数据。

self.addEventListener('message', event => {
    const data = event.data // 接收到的数据 
    ...
    self.postMessage( '这是处理好的数据' ) // 将处理好的数据发送给主线程
}, false)
// 或者 不要 self 也可以
addEventListener('message', event => {
    const data = event.data // 接收到的数据 
    ...
    self.postMessage( '这是处理好的数据' ) // 将处理好的数据发送给主线程
}, false)

如果 worker 线程内部需要加载其他脚本,只能用importScripts()方法,路径还是只能网络文件,不能使用本地的

importScripts('http://worker2.js', 'http://worker3.js') // 可以引入多个

worker 线程内部也可以使用 onerror 监听错误,和主线程使用方式一样。

worker 线程内部也可以关闭 worker 线程,方法和主线程不一样

self.close() // 这样就从内部关闭了

worker 线程能不能直接写在主线程的页面里

能!

既然它要接收一个网络地址URL,就给它创建一个URL

首先给 script 标签起一个浏览器不认识的type,然后将这个标签里的内容转成二进制对象,然后为这个对象生成URL,再用这个URL创建 worker 线程,如下

<!DOCTYPE html>
    <body>
        <div>这是页面</div>
        <script id="worker" type="xxxxx">
            // worker 线程
            addEventListener('message', event => {
                console.log(event.data) // 收到了吗
                postMessage('收到了') // 发送给主线程
            })
        </script>
        <script type="text/javascript">
            // 主线程
            const blob = new Blob([ document.querySelector('#worker').textContent ])
            const url = window.URL.createObjectURL(blob)
            const worker = new Worker(url)
            worker.postMessage('收到了吗')
            worker.onmessage = event => {
                console.log(event.data) // 收到了
            }
        </script>
    </body>
</html>

worker 线程轮询

function createWorker(fn){
    const blob = new Blob([fn.toString()])
    const url = window.URL.createObjectURL(blob)
    const worker = new Worker(url)
    return worker
}

const webWorker = createWorker(function(){
    let cache;
    
    function compare(new, old){ ... }
    
    setInterval(()=>{
        fetch('/api/xxx').then(res=>{
            let data = res.data
            if(!compare(data, cache)){
                cache = data
                self.postMessage(data)
            }
        })
    },1000)
})

结语

点赞支持、手留余香、与有荣焉

参考

# Web Worker 使用教程

阅读 156
35 声望
0 粉丝
0 条评论
你知道吗?

35 声望
0 粉丝
文章目录
宣传栏