Web Worker

引见

人人都晓得,Javascript是单线程的,所以假如页面中的Javascript有大批盘算的话,很轻易壅塞页面的动画或许交互相应。
HTML5中的Web Worker就使Javascript的多线程编程成为可能。

运用

Web Worker是一段运转在背景的Javascript代码,不会影响页面机能。我们能够经由过程new Worker来建立一个Web Worker。

// 建立Web Worker
var worker = new Worker("task.js");
// 向Web Worker通报音讯
worker.postMessage( {
            index: 1,
            msg: 'Hello task'
        } );
//设置postMessage的监听
worker.onmessage = function(message) {
  var data = message.data;
  console.log(JSON.stringify(data));
  // terminate 要领用于住手worker的继承运转
    worker.terminate();
};
worker.onerror = function(error){
  worker.terminate();
  console.log(error.filename, error.lineno, error.message);
}

下面是task.js的代码

onmessage = function(message) {
  var data = message.data;
  data.msg = 'Hello main';
  postMessage(data);
}

从上面的例子中,能够看出,Web Worker与主页面之间经由过程postMessage来完成通讯。

总结

在Web Worker中,没有window,document,DOM等对象。然则能够运用navigator,location,XMLHttpRequest等对象。
上面的限定致使了Web Worker平常用于有耗时较长的营业中,比方有大批盘算的页面。

    原文作者:chenhao_ch
    原文地址: https://segmentfault.com/a/1190000004369037
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞