概念
(1)通过使用Web Workers,Web应用程序可以在独立于主线程的后台线程中,运行一个脚本操作。这样做的好处是可以在独立线程中执行费时的处理任务,从而允许主线程(通常是UI线程)不会因此被阻塞/放慢
(2)js有了多线程能力。js是单线程,虽然提供了异步的方案,但本质上还是单线程运行,webworkers让js有了多线程的能力,但是使用起来还是有部分限制
使用注意点
Web Worker有以下几个使用注意点:
(1)同源限制:分配给Worker线程运行的脚本文件,必须与主线程的脚本文件同源
(2)DOM限制:Worker线程所在的全局对象,与主线程不一样,无法读取主线程所在网页的DOM对象,也无法使用document、window、parent这些对象。但是,Worker线程可以navigator对象和location对象
(3)通信联系:Worker线程和主线程不在同一个上下文环境,它们不能直接通信,必须通过消息完成
(4)脚本限制:Worker线程不能执行alert()方法和confirm()方法,但可以使用XMLHttpRequest对象发出AJAX请求
(5)文件限制:Worker线程无法读取本地文件,即不能打开本机的文件系统(file://),它所加载的脚本,必须来自网络
基本用法
数据通信
(1)主线程与Worker之间的通信内容,可以是文本,也可以是对象。需要注意的是,这种通信是拷贝关系,即是传值不是传址,Worker对通信内容的修改,不会影响到主线程。事实上,浏览器内部的运行机制,先将通信内容串行化,然后把串行化后的字符串发给Worker,后者再将它还原。
(2)主线程与Worker之间也可以交换二进制数据,例如:File、Blob、ArrayBuffer等类型,也可以在线程之间发送
实战场景
参考网址
[1] https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Workers_API
[2] https://www.ruanyifeng.com/blog/2018/07/web-worker.html
[3] https://www.freecodecamp.org/chinese/news/general-introduction-to-web-worker/