Web Worker

Amio 发布于2019-08-19 17:31 / 906人阅读

摘要：中的就使的多线程编程成为可能。使用是一段运行在后台的代码，不会影响页面性能。总结在中，没有，，等对象。但是可以使用，，等对象。上面的限制导致了一般用于有耗时较长的业务中，比如有大量计算的页面。

介绍

大家都知道，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一般用于有耗时较长的业务中，比如有大量计算的页面。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78599.html

浅谈HTML5 Web Worker

摘要：事实上，浏览器内部的运行机制是，先将通信内容串行化，然后把串行化后的字符串发给子线程，后者再将它还原。当一个的文档列表中的任何一个对象都是处于完全活动状态的时候，这个会被称之为需要激活线程。浏览器中的Web Worker 背景介绍我们都知道JavaScript这个语言在执行的时候是采用单线程进行执行的，也就是说在同一时间只能做一件事，这也和这门语言有很大的关系，采用同步执行的方式进...

Tecode 2019-08-23 15:54 评论0 收藏0
JS异步那些事四（HTML 5 Web Workers）

摘要：向添加一个事件监听器当传递消息时，会执行事件监听器中的代码。终止当我们创建对象后，它会继续监听消息即使在外部脚本完成之后直到其被终止为止。 JS异步那些事一（基础知识）JS异步那些事二（分布式事件）JS异步那些事三（Promise）JS异步那些事四（HTML 5 Web Workers）JS异步那些事五（异步脚本加载）什么是 Web Worker？当在 HTML ...

ZoomQuiet 2019-08-21 13:48 评论0 收藏0