Web Worker 详细介绍_Web Workers的使用

Web Worker是什么？

当在 html 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。

简单明了的一句话其实就是在Javascript单线程执行的基础上，开启一个子线程，进行程序处理，而不影响主线程的执行，当子线程执行完毕之后再回到主线程上，在这个过程中并不影响主线程的执行过程。

举个例子：传统情况下，执行下面的代码后，整个页面都会被冻结，由于javascript是单线程处理，如下代码已经完全组塞了后续的执行。

while(true){}

如果换一种方式，我们通过开启一个新的线程来执行这段代码，将他放在一个单独的worker.js文件中,在主线程执行以下代码。

var worker = new Worker("worker.js")

Service Worker 是一个由事件驱动的 worker，它由源和路径组成。它可以控制它关联的网页，解释且修改导航，资源的请求，以及一种非常细粒度的方式来缓存资源以让你非常灵活地控制程序在某些情况下的行为（比如网络不可用）。

Web Workers 是以加载 .js 文件的方式实现的，这些文件会在页面中异步加载。使用类线程的消息传输－获取模式。它们非常适合于为用户提供最新的 UI ，高性能及流畅的体验。

Web Worker兼容性

除了IE，主流浏览器一般都支持Web Worker。

判断浏览器对Web Worker的支持：

if(typeof(Worker)!=="undefined"){
   //支持
}else{
  //不支持code
}

Web Worker基本使用

1、创建新的Worker

var worker = new Worker("worker.js")

2、传递参数

worker.postMessage("text");

3、接收消息

worker.onmessage = function (e) {
        var message = e.data;
};

4、异常处理

worker.onerror = function(e){
    console.log("error at "+e.filename ":" + e.lineno + e.message)
}

5、结束worker

worker.terminate();

6、载入工具类函数

importScripts("./utils/base64.js","./utils/map.js"...)

Web Worker作用域

当我们创建一个新的worker时，改代码会运行在一个全新的javascript的环境中（WorkerGlobalScope）运行,是完全和创建worker的脚本隔离，这时我们可以吧创建新worker的脚本叫做主线程，而被创建的新的worker叫做子线程。

WorkerGlobalScope是worker的全局对象，所以它包含所有核心javascript全局对象拥有的属性如JSON等，window的一些属性，也拥有类似于XMLHttpRequest()等。

但是我们所开启的新的worker也就是子线程，并不支持操作页面的dom。

Web Worker共享线程-SharedWorker

共享线程是为了避免线程的重复创建和销毁过程，降低了系统性能的消耗，共享线程SharedWorker可以同时有多个页面的线程链接。

使用SharedWorker创建共享线程，也需要提供一个javascript脚本文件的URL地址或Blob,该脚本文件中包含了我们在线程中需要执行的代码，如下：

var worker = new SharedWorker("sharedworker.js");

共享线程也使用了message事件监听线程消息，但使用SharedWorker对象的port属性与线程通信如下。

worker.port.onmessage = function(e){
    ...
}

同时我们也可以使用SharedWorker对象的port属性向共享线程发送消息如下。

worker.port.postMessage("message");

参考：

《指尖上行》一书
w3school:http://www.w3school.com.cn/html5/html_5_webworkers.asp
Web Worker 详细介绍:http://xiangzongliang.com/blogContent?blog=82

链接: https://fly63.com/article/detial/793