Web Workers

image.png

随着 web 应用的复杂性的与时俱增，越来越复杂的计算在所难免。长时间运行的JavaScript进程会导致浏览器冻结用户界面。Web Worders通过让JS在后台运行解决了这个问题。

浏览器实现Web Worders规范的方式有很多种，可以使用线程、后台进程或者运行在其他处理器核心上的进程等。具体的实现细节其实没有那么重要，重要的是开发人员现在可以放心地运行JS，而不必担心会影响用户体验了。

如果后端接口一次性传递给几万条数据，加载时间过长如何解决？

web Workers

长列表优化

一、使用Web Workers

创建workers对象

var w = new Worker('test.js')

这行代码会导致浏览器去下载test.js文件，但只有Worder接收到消息才会实际执行文件中的代码。

要给Worker传递消息，可以使用postMessage()方法

通过postMessage传递消息

消息内容可以是任何能够被序列化的值，eg:

worker.postMessage({
    type:'command',
    message:'start!'
})

Worker是通过message和error事件与页面通信的。来自worker的数据被保存在event.data中。

worker.onmessage = function(event){
    var data = evnet.data
    //这里可以对数据进行处理
}

Worker不能完成给定的任务时会触发error事件。

具体来说，Worker内部的JS在执行时，只要遇到错误，就会触发error事件。发生error事件时，事件对象中包含三个属性：filename、lineno和message，分别代表发生错误的文件名、代码行号和完成的错误信息。eg:

worker.onerror = function(event){
    console.log('ERROR' + event.filename + "(" + event.lineno + "):" + event.message)
}

建议大家在使用Web Workers时，使用都要使用onerror事件处理程序，及时这个函数除了打印错误日志之外什么都没错。否则，Worker就会在发生错误时，悄无生息地失败了。

任何时候，只要调用terminate()方法就可以停止Worker工作。而且，Worker中的代码会立即停止执行，包括error和message也不会再触发。

worker.terminate()

二、Worker全局作用域

关于Web Worker，最重要的是要知道它所执行的JS代码完全在另一个作用域中，与当前页面中的代码不共享作用域。

在Web Worker中，同样有一个全局对象worker和其他对象及方法，但在这里不能访问DOM，也无法通过任何方式影响页面的外观。显然，Web Worker的运行环境与页面环境相比，功能是相当有限的。

当页面在worker对象上调用postMessage()时，数据会以异步方式被传递给worker，进而触发worker中的message事件。为了处理来自页面的数据，同样也需要创建一个onmessage事件处理程序。

eg: 需要Worker对传入的数组进行排序，将处理后的数据返回到页面

//Web Worker内部的代码
self.onmessage = function(event) {
    var data = event.data
    //默认的sort()方法只比较字符串
    data.sort(function(a, b){
        return a - b;
    })
    self.postMessage(data)
}

这里的self引用得是Worker全局作用域中的worker对象（与页面中new的Worker对象不是同一个对象）

worker中的this.png

在Worker中调用postMessage()会以异步的方式触发页面中Worker实例的message事件。如果页面想要这使用这个Worker，可以这样：

//在页面中
var data = [2,36,4,567,89,0,28];
worker = new Worker("test.js");
worker.onmessage = function(event){
    var data = event.data;
    //对排序后的数组进行操作
}
//将数组发送给worker排序
worker.postMessage(data);

排序的确是比较消耗时间的操作，因此转交给Worker就不会阻塞用户界面了。另外，把彩色图像转换成灰阶图像、加密解密数据或者解决定时器的计算偏差等都可以放在Worker中计算。

在Worker内部，调用close()方法也可以停止工作，就像在页面中调用terminate()方法一样，worker停止工作后就不会再有事件发生了。

//Web Worker内部的代码
self.close()

三、包含其他脚本

既然无法在Worker中动态创建新的<script>元素，那是不是就不能向Worker中添加其他脚本了？不是的，Worker的全局作用域提供importScripts()方法。该方法接收一个或多个指向JS文件的URL。每个加载过程都是异步进行的，因此所有脚本加载并执行扣，importScirpt()才会执行。eg:

//Web Worker内部代码
importScripts("file1.js", "file2.js")

即使file2.js先于file1.js下载完，执行的时候仍然会按照先后顺序执行。而且，这些脚本是在Worker的全局作用域中执行，如果脚本中包含与页面有关的JavaScirpt代码，可能会报错

总结：Web Worker可以运行异步JS代码来避免阻塞用户界面，通过onmessage和postMessage进行页面与进程之间的数据传输

四、Web Workers未来

关于在Worker内部能访问什么不能访问什么，至今仍然争论不休。有人认为Worker应该像页面一样能够访问任意数据，不光是XHR，还有localStorage、sessionStorage、Web Sockets等。好像支持这个观点的人更多一些，因此未来的Worker全局作用域很可能会有更大的空间