美文网首页
JS多线程-webworker的基本使用

JS多线程-webworker的基本使用

作者: johe_jianshu | 来源:发表于2020-03-24 19:19 被阅读0次

Web Worker

JavaScript 语言采用的是单线程模型，也就是说，所有任务只能在一个线程上完成，一次只能做一件事。前面的任务没做完，后面的任务只能等着。随着电脑计算能力的增强，尤其是多核 CPU 的出现，单线程带来很大的不便，无法充分发挥计算机的计算能力。

Web Worker 的作用，就是为 JavaScript 创造多线程环境，允许主线程创建 Worker 线程，将一些任务分配给后者运行。在主线程运行的同时，Worker 线程在后台运行，两者互不干扰。等到 Worker 线程完成计算任务，再把结果返回给主线程。这样的好处是，一些计算密集型或高延迟的任务，被 Worker 线程负担了，主线程（通常负责 UI 交互）就会很流畅，不会被阻塞或拖慢。

Worker 线程一旦新建成功，就会始终运行，不会被主线程上的活动（比如用户点击按钮、提交表单）打断。这样有利于随时响应主线程的通信。但是，这也造成了 Worker 比较耗费资源，不应该过度使用，而且一旦使用完毕，就应该关闭。

  • webWorker创建一个新线程，不会阻塞主线程从而渲染流畅（主线程阻塞会阻塞渲染）
  • WebWorker不会被主线程打断，但也造成Worker比较耗费资源，一旦使用完毕，就应该关闭
  • 同源限制：分配给Worker线程运行的脚本文件，必须与主线程的脚本文件同源
  • DOM限制：Worker线程没法操作和读取主线程所在的DOM对象，也无法使用document、window、parent这些对象，但是Worker线程可以访问navigator对象和location对象
  • Worker和主线程不能直接通信，需要通过消息完成
  • 脚本限制：不能指向alrt()和confirm方法
  • 文件限制：加载的脚本必须来自网络，不能为本地文件

API

构造函数:

var myWorker = new Worker(jsUrl, options);

jsUrl是脚本的网址，必须遵循同源策略，并且只能加载JS脚本，否则会报错。
第二个参数是配置对象：

// 主线程
var myWorker = new Worker('worker.js', { name : 'myWorker' });

// Worker 线程
self.name // myWorker

Worker线程对象的属性和方法(主线程使用)：

  • Worker.onerror：指定 error 事件的监听函数。
  • Worker.onmessage：指定 message 事件的监听函数，发送过来的数据在Event.data属性中
  • Worker.onmessageerror：指定 messageerror 事件的监听函数。发送的数据无法序列化成字符串时，会触发这个事件。
  • Worker.postMessage()：向 Worker 线程发送消息。
  • Worker.terminate()：立即终止 Worker 线程

Worker线程的属性和方法(worker线程使用):

  • self.name： Worker 的名字。该属性只读，由构造函数指定。
  • self.onmessage：指定message事件的监听函数。
  • self.onmessageerror：指定 messageerror 事件的监听函数。发送的数据无法序列化成字符串时，会触发这个事件。
  • self.close()：关闭 Worker 线程。
  • self.postMessage()：向产生这个 Worker 线程发送消息。
  • self.importScripts()：加载 JS 脚本。

基本使用

构造函数:Worker(url),接收一个文件的url，获取文件来创建一个Worker线程。

var worker = new Worker('work.js')

主线程通过worker.onmessage来接收worker的数据，通过worker.postMessage()来传递给worker数据。

worker.postMessage('hello')
worker.onmessage = function(event){
    //event.data为传过来的数据
    //do something
}

self.onmessage = function(e){
    console.log(e.data)
}
//或者是
self.addEventListener('message',function(e){
    console.log(e.data)
})

通过importScripts方法可以在worker内部加载其他脚本

importScripts('file1','file2')

关闭worker：

//主线程中
worker.terminate()
//worker线程
self.close()

传值问题

主线程与 Worker 之间的通信内容，可以是文本，也可以是对象。需要注意的是，这种通信是拷贝关系，即是传值而不是传址，Worker 对通信内容的修改，不会影响到主线程。事实上，浏览器内部的运行机制是，先将通信内容串行化，然后把串行化后的字符串发给 Worker，后者再将它还原。

主线程和Worker之间传递的数据是传值的，而不是传址的，这样避免了Worker线程操作主线程的数据，传递数据时，会调用内容的toString()方法(二进制数据除外)，再传值,所以对象尽量经过JSON.stringify后传值

主线程与worker之间可以交换二进制数据，比如File、Blob、ArrayBuffer等类型，也可以在线程之间发送.

// 主线程
var uInt8Array = new Uint8Array(new ArrayBuffer(10));
for (var i = 0; i < uInt8Array.length; ++i) {
  uInt8Array[i] = i * 2; // [0, 2, 4, 6, 8,...]
}
worker.postMessage(uInt8Array);

// Worker 线程
self.onmessage = function (e) {
  var uInt8Array = e.data;
  postMessage('Inside worker.js: uInt8Array.toString() = ' + uInt8Array.toString());
  postMessage('Inside worker.js: uInt8Array.byteLength = ' + uInt8Array.byteLength);
};

转移大文件而不是拷贝

拷贝方式发送二进制数据，会造成性能问题。比如，主线程向 Worker 发送一个 500MB 文件，默认情况下浏览器会生成一个原文件的拷贝。为了解决这个问题，JavaScript 允许主线程把二进制数据直接转移给子线程，但是一旦转移，主线程就无法再使用这些二进制数据了，这是为了防止出现多个线程同时修改数据的麻烦局面。这种转移数据的方法，叫做Transferable Objects。这使得主线程可以快速把数据交给 Worker，对于影像处理、声音处理、3D 运算等就非常方便了，不会产生性能负担


// Transferable Objects 格式
worker.postMessage(aMessage, transferList);

// 例子
var ab = new ArrayBuffer(1);
worker.postMessage(ab, [ab]);
  • transferList:数组，用于传递所有权，如果一个对象的所有权被转义，在发送它的上下文中将变为不可用，可转义对象必须是ArrayBuffer、MessagePort(MessageChanel的port)或者ImageBitmap的实例。

在页面内创建Web Worker

通常情况下，Worker 载入的是一个单独的 JavaScript 脚本文件，但是也可以载入与主线程在同一个网页的代码。

通过script标签

<body>
    <script id="worker" type="app/worker">
      addEventListener('message', function () {
        postMessage('some message');
      }, false);
    </script>
</body>

上面是一段嵌入网页的脚本，注意必须指定<script>标签的type属性是一个浏览器不认识的值，上例是app / worker。

//基于script的内容创建一个Blob对象
var blob = new Blob([document.querySelector('#worker').textContent]);
// 生成指向Blob对象的blobURL
var url = window.URL.createObjectURL(blob);
// 请求blobURL来创建worker
var worker = new Worker(url);

worker.onmessage = function (e) {
  // e.data === 'some message'
};

worker线程完成轮询

有时，浏览器需要轮询服务器状态，以便第一时间得知状态改变。这个工作可以放在 Worker 里面。

function createWorker(f) {
  var blob = new Blob(['(' + f.toString() +')()']);
  var url = window.URL.createObjectURL(blob);
  var worker = new Worker(url);
  return worker;
}

var pollingWorker = createWorker(function (e) {
  var cache;

  function compare(new, old) { ... };

  setInterval(function () {
    fetch('/my-api-endpoint').then(function (res) {
      var data = res.json();

      if (!compare(data, cache)) {
        cache = data;
        self.postMessage(data);
      }
    })
  }, 1000)
});

pollingWorker.onmessage = function () {
  // render data
}

pollingWorker.postMessage('init');

一个完整的使用例子:

 function createWorker(fn) {
    var blob = new Blob([`(${fn.toString()})()`])
    var blobURL = window.URL.createObjectURL(blob)
    var worker = new Worker(blobURL)
    return worker
}
var webWorker = createWorker(function () {
    function init() {
        let i = 0
        setInterval(function () {
            self.postMessage(++i)
        }, 1000)
    }
    self.onmessage = function (messageEvent) {
        switch (messageEvent.data) {
            case "init":
                init()
                break
            case "stop":
                console.log("close!");
                self.close();
                break;
        }

    }
})
webWorker.onmessage = function (event) {
    console.log(event.data)
    if (event.data === 5) {
        webWorker.postMessage("stop")
        //主线程关闭webWorker.terminate()
    }
}
webWorker.postMessage("init")

MessageChannel

Vue的$nextTick实现中，优先检测是否支持原生的setImmediate(Node和高版本IE\chrome支持),不支持的话检测是否支持原生的MessageChannel,如果再不支持就会降级为setTimeout.

setImmediate\MessageChannel\setTimeout都属于宏任务，宏任务就是等待主线程空闲后才会被执行的任务（宏任务->微任务->渲染->宏任务的执行过程），实现宏任务效果最理想的就是setImmediate，MessageChannel也可以替代，但setImmediate和MessageChannel的浏览器支持没有setTimeout好，setTimeout有一个致命缺点就是即使设置setTimeout(fn,0),fn不会立即被推入到宏任务队列中，在chrome中至少是4ms以上。而 setImmediate可以将任务直接推入到宏任务队列

MessageChannle允许我们创建一个新的消息通道，并通过它的两个MessagePort属性发送数据。

var channel = new MessageChannel()
//两个端口
channel.port1
channel.port2

MessageChannel创建了一个通信的管道，这个管道有两个端口，每个端口都可以通过postMessage发送数据，而一个端口只要绑定了onmessage回调方法，就可以接收从另一个端口传过来的数据。(这一点和Web Worker类似，传递的数据从event.data获取)

var channel = new MessageChannel();
var port1 = channel.port1;
var port2 = channel.port2;
port1.onmessage = function(event) {
    console.log("port1收到来自port2的数据：" + event.data);
}
port2.onmessage = function(event) {
    console.log("port2收到来自port1的数据：" + event.data);
}

port1.postMessage("发送给port2");
port2.postMessage("发送给port1");

多个worker之间的通信

当我们使用多个Web Worker并想要在两个Web Worker之间实现通信的时候，MessageChannel可以派上用场:

//主线程
var w1 = new Worker("worker1.js");
var w2 = new Worker("worker2.js");
var ch = new MessageChannel();
//由于直接传递会被转化成字符串，这里使用转移数据的方法
//MessageChannel会被自动存储在event.ports里面
w1.postMessage("port1", [ch.port1]);
w2.postMessage("port2", [ch.port2]);
w2.onmessage = function(e) {
    console.log(e.data);
}
//worker1
self.onmessage = function(e) {
    const  port = e.ports[0];
    //传递给worker2
    port.postMessage("this is from worker1")        
}
//worker2
onmessage = function(e) {
    const  port = e.ports[0];
    //接受worker1消息
    port.onmessage = function(e){
        //传递回主线程
        self.postMessage(e.data)
    }        
}

相关文章

网友评论

      本文标题：JS多线程-webworker的基本使用

      本文链接：https://www.haomeiwen.com/subject/vjeayhtx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|JS多线程-webworker的基本使用|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！