当异步不再能满足需求:对浏览器中的多线程的介绍

转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。

原文转载自 https://neoteric.eu/blog/when-async-is-not-enough-introduction-to-multithreading-in-the-browser/

先说最重要的:JavaScript代码可以异步执行,但并不意味着它是跑在多个线程里。那么异步到底是什么意思?让我们想象发一个Ajax请求,向服务端请求数据。你并不是立即得到响应——你需要等待一小段时间,让服务端返回数据。在等待响应的过程中,程序运行着你其他部分的代码。如果不是这样,Ajax请求会冻结住,不让后面的代码执行,直到收到服务端的响应——这不是我们想要的,对吧?

事件循环(Event Loop)

在JavaScript运行环境中,有个非常重要的概念,叫事件循环。它周而复始地工作着,每一次循环被称为一个"tick"。如果在某一个tick中,有等待着的事件队列需要处理,那么它们会一个个地被执行。大家所熟知的setTimeout函数就是一个很好的例子。它的第一个参数是一个回调函数——一个在某段时间之后被执行的函数。当setTimeout被解析时,它被压入函数调用栈的栈顶,它设置一个定时器,然后就从栈顶弹出,把你的回调函数塞到事件循环的后面——那意味着这个回调函数不会精确地在定义的时间间隔后执行——在事件队列中等待的其他事件需要被优先处理。当时机到来,你的回调函数被压入函数调用栈的栈顶,然后执行。你发向服务器的请求,也是同样的原理——你定义一个回调函数,当收到响应后,它被塞进事件循环队列的后面。

函数调用栈(Call Stack)

函数调用栈是一个底层的数据结构——它记录我们运行到程序哪儿了。当程序进入一个函数,就把它放在栈顶,当从函数中返回,就意味着把它从栈中弹出。让我们使用一点递归式的逻辑来简单展示一下:

function factorial(n) {
  if(n === 1 || n === 0) {
    return 1;
  }
  return factorial(n - 1) * n;
}
console.log(factorial(3)); // 3! = 6

WebWorkers

你已经看到,异步代码,解决的是一件事情"现在发生"还是"以后发生",而不是解决如何让"多个事情同时发生"。但如果有一些处理器密集型任务,我们担心它会让界面卡住,怎么办?

答案是WebWorkers。它允许JavaScript代码在后台以一个独立的线程被执行。它允许主线程流畅运行,不被阻塞。WebWorkers在另一个与window不同的全局上下文环境中。这也带来了一些局限:比如,你不能直接在Worker里操作DOM。最基础的(也是浏览器支持得最好的)WebWorker类型是Dedicated Worker。

想创建一个Worker,你需要向Worker构造函数传入一个文件名,在该文件中包含了需要执行的JavaScript脚本。

// 在主线程
var factorialWorker = new Worker('factorial.worker.js');

比如说,我们想得到一整组数字的阶乘。

想向Worker传数据,你需要调用postMessage方法:

// 在主线程
var arr = [50, 100, 125, 150];
for(var i = 0; i < arr.length; ++i) {
  factorialWorker.postMessage(arr[i]);
}

你可以通过事件在主线程和Worker线程之间通信。如果你想监听Worker的返回值,就在主线程注册一个事件监听器。

// 在主线程
factorialWorker.addEventListener('message', function(event) {
  console.log('!' + event.data.number + ' = ' + event.data.factorial);
});

这会输出传入给Worker的数字的阶乘。

剩下唯一要做的事情就是创建factorial.workder.js文件。

它需要返回当前计算的数字的阶乘,还要定义计算阶乘的函数本身。

在Worker中,有一个self属性。它返回指向WorkerGlobalScope的引用。利用它,我们可以和向Worker发送数据的脚本通信。  

// factorial.workder.js
function factorial(n) {
  if(n === 1 || n === 0) {
    return 1;
  }
  return factorial(n - 1) * n;
}

self.addEventListener('message', function(event) {
  self.postMessage({ number: event.data, factorial: factorial(event.data) });
});

这里发生的情况是,我们创建了一个新的Worker,并监听它给我们返回的数据。然后,我们向它发送数据——Worker会得到数据,在完成它内部的计算之后,向我们发送一个响应。所有的计算都在一个单独线程中完成。很酷吧?

不过你可能会遇到一些问题。第一个问题是Chrome不能以本地文件的方式使用WebWorkers。不过你可以开启一个http服务器来尝试使用它。

Webpack

另一个问题可能在你使用Webpack时出现。它可能会给你一个404 Not Found错误,因为它不知道你想以WebWorker的形式加载文件。你需要额外的加载器(loader)来加载类似的文件。让我带你看看这个过程。首先,用npm安装加载器:

npm install --save-dev worker-loader

然后你需要在webpack.config.js中添加一条规则:

module: {
  rules: [
    {
      test: /\.worker\.js$/,
      use: { loader: 'worker-loader' }
        
    },
    (...)
	]
}

现在,如果你引入以.workder.js结尾的文件,Webpack会使用worker-loader来加载。让我们用ES6的一些特性来修改一下代码:  

import FactorialWorker from './factorial.worker.js';

const factorialWorker = new FactorialWorker();
factorialWorker.addEventListener('message', event => {
  console.log(`!${event.data.number} = ${event.data.factorial}`);
});

const arrayOfNumbers = [50, 100, 125, 150];
for(let number of arrayOfNumbers) {
  factorialWorker.postMessage(number);
}

总结一下,当开发一个背后有很多操作(尤其是密集型计算)的富应用时,WebWorkers会非常有帮助。尝试一下,亲自看看吧。我鼓励你去试验。  

 

posted @ 2018-12-21 13:46 葡萄城技术团队 阅读(...) 评论(...) 编辑 收藏