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全局作用域很可能会有更大的空间
网友评论