红杉资本|广州蓝景技术分享—开发语言JavaScript之多线程 2.0时代|交易|meta|创投圈

各位编程的小伙伴，今天我们广州蓝景实训部，继续和大家分享前端技术干货， JavaScript之多线程

我们知道客户端JavaScript其中一个基本的特性就是单线程：比如，浏览器无法同时运行两个事件处理程序，它也无法在一个事件处理程序运行的时候触发一个计时器。
随着Web应用复杂性的与日俱增，越来越复杂的计算在所难免。长时间运行的JavaScript进程会导致浏览器冻结用户界面，让人感觉屏幕“冻结”了，这就造成了用户体验问题，这时候要解决这个问题就需要用到多线程操作了（多线程简单来说就是你干着这件事的同时还能做其他事情，而这两件事之间不会发生冲突）在Web Workers标准中，定义了解决客户端JavaScript无法多线程的问题。
其中定义的“Worker”是指执行代码的并行线程（或者叫后台线程）。
一、worker的使用
1、怎样新建一个线程
要创建一个线程只需要实例化一个Worker对象出来就行了，然后传入对应的参数即需要在worker中运行的js脚本的url
实例：
index.js
var worker = new Worker(“test.js”);
这样我们就创建好了一个并行线程。
2、如何传递数据
在web workers标准中，给我们提供了一个postMissage方法来传递数据，通过message事件来接受数据。
（1）数据从并行线程传递到js主线程
实例：
test.js文件
function test(nm){
return n*m;

var res = test(23);
postMessage(res);
index.js文件
var worker = new Worker(“test.js”);
worker.onmessage = function(e){
console.log(e.data);//6

这里e.data的值即为在并行线程中传递过来的数据
（2）数据从主线程传递到js并行线程
实例：
index.js文件
1).var worker = new Worker(\"test.js\");
2).workder.postMessage(\"本大爷从主线程而来！\")
test.js文件
1)onmessage = function(e){
2)console.log(e.data);//本大爷从主线程而来！
3)
这样就完成了数据的相互传递，如果传递的数据不止一个，可以通过对象形式传入多个(可以随便传递任何形式的对象数据) ，比如：
test.js文件
var msg = “我是并行线程中的数据”;
function test(nm){
return n*m;

var res = test(23);
postMessage({resmsg);
index.js文件
1)var worker = new Worker(\"test.js\");
2)worker.onmessage = function(e){
3) console.log(e.data);
4)
5)在e.data中同样可以得到在test.js文件里传入过来的两个数据。
（3）如果worker抛出异常，并且他自己没有对其进行捕获和处理，可以通过监听的一个error事件来传递异常。
实例：
index.js文件
// 记录错误消息日志：包括Worker的文件名和行数
worker.onerror = function(e) {
console.log(\"Error at \" + e.filename + “:” + e.lineno + \": \" + e.message);

3、如何结束并行线程
Worker对象有一个方法：terminate()该方法强制一个worker线程结束运行。
实例：
index.js文件
worker.terminate();
二、Worker的作用域
关于Web Worker ，最重要的是要知道它所执行的JavaScript代码完全在另一个作用域中，与当前网页中的代码不共享作用域*（因此在worker代码中不能进行DOM操作）* 。 WorkerGlobalScope全局对象表示了该新的运行环境。 WorkerGlobalScope对象在某种程度上来说是大于核心的JavaScript全局对象，但又小于整个客户端的Window对象。同样在WorkerGlobalScope中也有postMessage和message方法。