前端培训-中级阶段(24)- Web Workers 多线程(2019-11-07期)

linong

前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门,但也仅仅是入门,现在前端开发的定义已经远远不止这些。前端小课堂(HTML/CSS/JS),本着提升技术水平,打牢基础知识的中心思想,我们开课啦(每周四)。

JS 是单线程事件循环模型。使用上来说如果有大量高强度的计算会导致 UI渲染进程卡顿。
按照 FPS: 60 来计算 1000ms/60 = 16.666ms。我们一段程序的占用时间需要低于16.666ms

Web Workers 用法

new Worker(url),将会在 worker 线程中运行代码,该环境与主线程不同

因为并不是浏览器环境,所以 DOM、window 是无法使用的。当然也有一些API可以使用 localstroage、websocket、indexDB、XMLHttpRequest 等是没问题的。

同时分为两种环境。

  1. 独享模式:DedicatedWorkerGlobalScope (一个专用线程对应一个主线程)
  2. 共享模式:SharedWorkerGlobalScope(一个共享线程对应多个主线程)

主线程worker线程 之间使用 postMessage() 方法来发送信息,通过 onmessage 这个事件监听来接收信息。

数据的传输方式为传递副本,而不是直接共享数据。所以也导致有时传递的损耗高于计算的损耗。
当然,也支持整体内存移交给 worker,不过这样使用的话,主线程就访问不了这块内容了。
测试地址

worker

独享线程(Dedicated Web Worker),只能由创建时的主线程使用。

//html
wk = new Worker('/static/workers/1190000020913212.js');
demo2.addEventListener('click', function(){
    wk.postMessage(str)
})

//1190000020913212.js
onmessage = function(e) {
    var str = e.data;
    console.time('reportString');
    console.log(str.length, str.split('').join('+').length)
    console.timeEnd('reportString');
}

Shared Worker

同域多个窗口 多个脚本运行时,可以用于通信。
比如 iframe、标签页。

// html
swkPIP = new SharedWorker('/static/workers/1190000020913212-SharedWorker-pip.js');
swkPIP.port.start();
swkPIP.port.postMessage(args)

// worker.js
var portArr = [];
onconnect = function(e) {
    var port = e.ports[0];
    portArr.push(port)
    port.addEventListener('message', function(e) {
      console.log(self, e, port)
      if(e.data.type == 'private'){
          port.postMessage(['pip', e.data]);    
      }else if(e.data.type == 'public'){
          portArr.forEach(v=>v.postMessage(['pip', e.data]))
      }else if(e.data.type == 'publicNoSelf'){
          portArr.forEach(v=>v!=port&&v.postMessage(['pip', e.data]))
      }
    });
    port.start(); // Required when using addEventListener. Otherwise called implicitly by onmessage setter.
}

从实现代码中可以看到。
Shared Worker 需要使用 prot 通道。还需要 start() 开启通道。

可以实现的效果

  1. 跨窗口通信
  2. 比如说有一些轮询的接口,在多窗口的场景中会形成密集的访问。如果我们把请求转入Shared Worker,Shared Worker中做节流。拉回数据再通知各个窗口。
  3. 比如用户在一个窗口中登录,把登录状态通知给其他窗口。

Service Workers

用于浏览器服务器之前的代理服务。可以实现离线访问拦截请求更新缓存等。
navigator.serviceWorker.register('/static/js/sw-20190621.js')

其他事项

通过URL.createObjectURL()创建URL对象,可以实现创建内嵌的worker

开启worker需要一个同源的URL。有时我们也不需要一个这样的文件,那么我们就可以通过一个指向内存的URL。

// worker.js
var str = `
    var i = 0;
    function test(){
        postMessage(++i);
        setTimeout(test, 1000);
    }
    test();
`;
// html
var blob = new Blob([str]);
var wk = new Worker(window.URL.createObjectURL(blob));

通过转让对象来传递数据

默认情况下,主线程与 worker 之前的数据传递是通过拷贝,也就是JSON.stringify()之后再发送,接受使用JSON.parse()处理。
这样使用起来在会损耗一部分在序列化反序列化中。
所以 worker 给我们提供了一种更高效的方式,将整块数据传入(整块内存移交,再源环境将不可访问)。

myWorker.postMessage(uInt8Array, [uInt8Array]);

通过postMessage的第二个入参,我们把uInt8Array对象整个发送出去。

执行环境的上下文

我们都知道 浏览器环境的上下文Node环境的上下文是不一样的,其中有一些是浏览器环境中独有的。worker环境也是不一样。
其中 self 指向当前环境的 global,与 Window 不是同一个对象,而是 WorkerGlobalScope

微信公众号:前端linong

clipboard.png

参考文献

  1. 前端培训目录、前端培训规划、前端培训计划
  2. https://www.sitepen.com/blog/the-return-of-sharedarraybuffers-and-atomics/
  3. JavaScript 性能利器 —— Web Worker
阅读 1.4k

javascript-lNong
只此一生,何必从众

Read-Search-Ask

22.7k 声望
4.8k 粉丝
0 条评论

Read-Search-Ask

22.7k 声望
4.8k 粉丝
文章目录
宣传栏