Web Worker

Amio 發布于2019-08-19 17:31 / 1035人閱讀

摘要：中的就使的多線程編程成為可能。使用是一段運行在后臺的代碼，不會影響頁面性能。總結在中，沒有，，等對象。但是可以使用，，等對象。上面的限制導致了一般用于有耗時較長的業務中，比如有大量計算的頁面。

介紹

大家都知道，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一般用于有耗時較長的業務中，比如有大量計算的頁面。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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