登陆

JavaScript Web Workers:初学者攻略

admin 2019-07-02 159人围观 ,发现0个评论



在2019年,Web生态体系已开展到浏览器是依据JavaScript构建的运JavaScript Web Workers:初学者攻略用程序的履行环境。这体现在职业年复一年推出新结构、典范、模块加载器和绑缚器、依靠管理器、构建东西和包管理器的速度上。

当互联网前期构思JavaScript时,互联网开展的方向并不清晰。由于职业和生态体系的继续快速改变,对浏览器和Web规范向后兼容的需求,JavaScript的开展变成了不断更新的补丁和hack。


今日的移动设备一般装备8个以上CPU内核或12个以上GPU内核。台式机和服务器CPU最多有16个内核,32个线程或更多。

在这种环境中,具有单线程的JavaScript Web Workers:初学者攻略干流编程或脚本环境是一个瓶颈。

JavaScript是单线程的

这意味着,经过规划,JavaScript引擎 - 开始的浏览器 - 有一个首要的履行线程,简而言之,在完结进程A或函数A之前,不能履行进程B或函数B.当网页履行某些内容时,网页的UI对任何其他JavaScript处理都没有呼应 - 这称为DOM堵塞。

这十分低效,特别是与其他言语比较。

假如咱们去JS Bin并在浏览器的JavaScript操控台中运转此代码:

//noprotect
i = 0;
while (i < 60000) { console.log("The number is " + i); i++;}

...整个jsbin.com网站将无法呼应,直到浏览器计数 - 并记载 - 为60,000。

咱们将无法与页面上的任何内容进行交互,由于浏览器正忙。

现在,这是一个相对要求不高的核算进程,今日的网络运用程序一般触及要求更高的使命。

当用户与页面无缝交互时,咱们需求能够在后台核算内容。

Web Workers

W3C在2009年发布了Web作业者规范的初稿。完好的规范能够在Web超文本运用技能作业组网站上找到 - 或许WHATWG-- W3C的Web规范安排代替计划。

Web worker是一种异步体系或协议,用于网页在后台履行使命,独立于主线程和网站UI。它是一个阻隔的环境,与窗口目标,文档目标,直接的Internet拜访阻隔,最适合长期运转或要求严苛的核算使命。

除了Web worker(一个专用于多线程的体系)之外,还有其他办法能够在JavaScript中完结异步处理,例如异步Ajax调用和作业循环。

为了证明这一点,咱们将回到JS Bin并测验以下代码片段:

console.log("A");
setTimeout(function(){console.log("B");},2000);
console.log("C");
setTimeout(function(){console.log("D");},0);
console.log("E");
setTimeout(function(){console.log("F");},1000);

当咱们运转它时,咱们的日志序列是A,C,E,D,F,B。浏览器首要调度没有超时的操作,然后它们依照各自指定的次序履行setTimeout()函数。可是,这种异步性不应该与多线程主动混杂。依据主机的不同, 这一般仅仅咱们解说的次序调用的单线程仓库。

Web Workers 和多线程

正如Mozilla的JavaScript参阅网站所解说的那样,Web worker是“在后台线程中运转脚本的Web内容的手法”。

咱们以下列方法运用它们:咱们在浏览器中检查Worker()结构函数的可用性,假如它可用,咱们实例化一个worker目标,脚本URL作为参数。该脚本将在独自的线程上履行。

出于安全原因,有必要从同一主机或域供给脚本,这也是假如咱们运用file:// scheme在本地翻开文件,Web worker将无法作业的原因。

if (typeof(Worker) !== "undefined") { 
worker = newWorker("worker.js");
}

现在咱们在worker.js文件中界说这段代码:

i = 0;
while (i < 200000) {
postMessage("Web Worker Counter: " + i);
i++;
}

假如您想编写高质量的JavaScript Web worker文件,请检查咱们的书,JavaScript:Best Practice。

线程的别离

这儿需求留意的一件重要作业是在主浏览器窗口线程和作业规模内别离窗口和文档履行规模。

为了运用作业线程,这两个规模需求能够进行通讯。为此,咱们运用worker.js文件中的postMessage()函数 - 将音讯发送到主浏览器线程 - 以及主线程中的worker.onJavaScript Web Workers:初学者攻略message侦听器来侦听作业者音讯。

咱们还能够将音讯从主浏览器线程发送到作业线程或函数。仅有的区别是咱们回转的东西,并在主线程上调用worker.postMessage(),在作业线程上调用onmessage。引证Mozilla的开发人员参阅:

请留意,onmessage和postMessage()在主脚本线程中运用时需求挂起Worker目标,但在worker中运用时则不需求挂起。这是由于,在worker内部,worker实际上是大局目标。

咱们能够以相同的方法运用terminate()办法来完毕咱们的worker的履行。

考虑到一切这些,咱们来看这个比如:

index.html













start blocking thread

test browser responsiveness




and worker.js:

i = 0;
while (i < 200000) {
postMessage("Web Worker Counter: " + i); i++;
}

这使咱们有时机测验主线程履行对页面行为和功用的影响与Web worker的影响。

在本教程中,咱们运用http-server在本地供给文件。


现在咱们能够看到作业线程不会阻挠主浏览器进程的交互性,而且循环遍历200,000个数字不会影响主线程。 #workerOutput元素中的数字在每次迭代时都会更新。

堵塞线程或主线程在进入循环时会阻挠一切独裁者交互(咱们在此处将迭代次数设置为200,000,但假如咱们将其增加到2,000,000则会愈加显着)。

另一件事咱们指出一个被堵塞的主线程是作业进程在每次迭代时更新页面,主线程中的循环(在index.html中界说的循环)仅在最终一次迭代时更新#mainThreadOutput元素。

这是由于浏览器过于消耗计数(for循环)以便能够重绘DOM,因而只要在完结for循环的事务(循环完毕时)才会履行此操作。

总结

在本文中,咱们介绍了web worker,这是一种协助Web职业跟上越来越严苛的Web运用程序的技能。这是经过为web运用程序供给一种办法来使用多处理器和多线程设备,将一些多线程超级功用赋予JavaScript。

Web worker将移动和桌面浏览器环境转变为运用程序渠道,为他们供给严厉的履行环境。这种严厉性可能会迫使咱们在多个线程之间供给目标的仿制,并考虑到这些束缚来规划咱们的运用程序。


本文由大前端书院编译出品,原文来自sitepoint,作者Tonino Jankov,若转载请注明出处,转发感激不尽。

  • 联创股份7月8日快速反弹
  • 广晟有色7月8日快速反弹
  • 章鱼彩票优惠-元隆雅图7月8日盘中跌幅达5%
  • 请关注微信公众号
    微信二维码
    不容错过
    Powered By Z-BlogPHP