Web Worker 詳細介紹

fuyi501 發布于2019-08-21 18:19 / 3178人閱讀

摘要：專用線程不僅僅支持傳輸二進制數據，也支持結構化的數據格式。但是我們所開啟的新的也就是子線程，并不支持操作頁面的。共享線程共享線程是為了避免線程的重復創建和銷毀過程，降低了系統性能的消耗，共享線程可以同時有多個頁面的線程鏈接。

原文鏈接

Web Worker 詳細介紹 - 原文鏈接

[TOC]

1、簡介

我們都知道JavaScript這個語言在執行的時候是采用單線程進行執行的，也就是說在同一時間只能做一件事，這也和這門語言有很大的關系，采用同步執行的方式進行運行，如果出現阻塞，那么后面的代碼將不會執行，HTML5則提出了web Worker標準，表示JavaScript允許有多個線程，但是子線程完全受主線程的控制，切子線程不能操作DOM，只有主線程可以操作DOM，所以以主線程為主的單線程執行原理成了JavaScript這門語言的核心。關于JavaScript的運行機制可以參考阮一峰的文章JavaScript 運行機制詳解：再談Event Loop

2、Web Worker

下面我們來說說web worker到底是什么，簡單明了的一句話其實就是在Javascript單線程執行的基礎上，開啟一個子線程，進行程序處理，而不影響主線程的執行，當子線程執行完畢之后再回到主線程上，在這個過程中并不影響主線程的執行過程。
舉個例子：
傳統情況下，執行下面的代碼后，整個頁面都會被凍結，由于javascript是單線程處理，如下代碼已經完全組塞了后續的執行

while(true){}

如果換一種方式，我們通過開啟一個新的線程來執行這段代碼，將他放在一個多帶帶的worker.js文件中,在主線程執行以下代碼。

var worker = new Worker("worker.js")

創建線程

在創建線程的時候需要給實例化的Worker傳入唯一一個參數，指向一個javascript文件資源的url或者Blob對象（Blob對象就是一個包含有只讀原始數據類文件對象），調用這個構造函數之后，一個線程就被創建了，如下：

var worker = new Worker("worker.js");
var worker = new Worker(blob);

線程通信

Web Worker的基本原理就是在當前的主線程中加載一個只讀文件來創建一個新的線程，兩個線程同時存在，且互不阻塞，并且在子線程與主線程之間提供了數據交換的接口postMessage和onmessage。來進行發送數據和接收數據。其數據格式可以為結構化數據（JSON等）；
當我們創建了一個worker實例之后，我們可以通過如下兩種方式來發送數據：

var worker = new Worker("worker.js");  //實例化對象

//第一種傳遞方式
worker.postMessage(message,taransferList);

//第二種傳遞方式
worker.postMessage({ 
     operation: "list_all_users", 
     //ArrayBuffer object 
     input: buffer, 
     threshold: 0.8, 
}, [buffer]);

如果要想一個專用線程發送數據，那么我們需要使用線程中的 postMessage 方法。專用線程不僅僅支持傳輸二進制數據，也支持結構化的 JavaScript 數據格式。在這里有一點需要注意，為了高效地傳輸 ArrayBuffer 對象數據，需要在 postMessage 方法中的第二個參數中指定它。

同時我們如果需要接收某個線程傳來的數據可以使用onmessage來進行接收，方法如下：

//方法一
worker.onmessage = function(event){
    var data = event.data;        //通過event.data來獲取傳入的參數
}

//方法二
worker.addEventListener("message",target);

下面是一段運行在chrome中的參數傳遞方式：

index.html




    
    webWorker

worker.js

onmessage = function (e) {
    console.log(e.data);
    postMessage("2222")
};

此時我們的瀏覽器打印出的log是如下：

3、Worker基本使用

上面我們已經說了創建一個新的線程、傳遞數據、接收數據的方法，下面再次做一個精簡的回顧。

創建新的Worker

var worker = new Worker("worker.js")

傳遞參數

worker.postMessage("text");

接收消息

worker.onmessage = function (e) {
        var message = e.data;
};

異常處理

worker.onerror = function(e){
    console.log("error at "+e.filename ":" + e.lineno + e.message)
}

結束worker

worker.terminate();

載入工具類函數

importScripts("./utils/base64.js","./utils/map.js"...)

需要注意的是importScripts是同步方法，一旦importScripts方法返回就可以開始使用載入的腳本，而不需要回調函數。

4、Worker作用域

當我們創建一個新的worker時，改代碼會運行在一個全新的javascript的環境中（WorkerGlobalScope）運行,是完全和創建worker的腳本隔離，這時我們可以吧創建新worker的腳本叫做主線程，而被創建的新的worker叫做子線程。

WorkerGlobalScope是worker的全局對象，所以它包含所有核心javascript全局對象擁有的屬性如JSON等，window的一些屬性，也擁有類似于XMLHttpRequest()等。

但是我們所開啟的新的worker也就是子線程，并不支持操作頁面的DOM。

5、共享線程 SharedWorker

共享線程是為了避免線程的重復創建和銷毀過程，降低了系統性能的消耗，共享線程SharedWorker可以同時有多個頁面的線程鏈接。

使用SharedWorker創建共享線程，也需要提供一個javascript腳本文件的URL地址或Blob,該腳本文件中包含了我們在線程中需要執行的代碼，如下：

var worker = new SharedWorker("sharedworker.js");

共享線程也使用了message事件監聽線程消息，但使用SharedWorker對象的port屬性與線程通信如下。

worker.port.onmessage = function(e){
    ...
}

同時我們也可以使用SharedWorker對象的port屬性向共享線程發送消息如下。

worker.port.postMessage("message");

摘錄

文章大部分類容摘自《指尖上行》一書

參考文獻
1、JavaScript 運行機制詳解：再談Event Loop —— 阮一峰
2、深入 HTML5 Web Worker 應用實踐：多線程編程

GPU云服務器云服務器 web-worker 詳細介紹起來詳細介紹指令詳細介紹

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/90341.html

初步整理的關于 Progressive Web Apps 的資料

摘要：在上看到發的視頻被狂轉開始注意之前幾乎對這個詞語沒有印象看到是在的演講還以為是新技術在上找一下這次好多個視頻是關于的視頻的內容主要是講網站優化分別用做例子可惜沒有大概要等小右補方案應該沒有問題從視頻看優化的效果非常顯著本來好幾秒的在 Twitter 上看到 Addy Osmani 發的視頻被狂轉, 開始注意https://twitter.com/addyosmani/status/7...

luffyZh 2019-08-19 18:24 評論0 收藏0
前端每周清單第 45 期: Safari 支持 Service Worker, Parcel 完整教

摘要：的另一個核心特性，蘋果表示也正在開發中，按開發進度可能幾個月后就能與我們見面。是基于的本地化數據庫，支持以及瀏覽器環境。前端每周清單專注前端領域內容，以對外文資料的搜集為主，幫助開發者了解一周前端熱點；分為新聞熱點、開發教程、工程實踐、深度閱讀、開源項目、巔峰人生等欄目。歡迎關注【前端之巔】微信公眾號（ID: frontshow），及時獲取前端每周清單。本期是 2017 年的最后一...

趙春朋 2019-08-21 18:24 評論0 收藏0
前端每周清單半年盤點之 PWA 篇

摘要：前端每周清單專注前端領域內容，以對外文資料的搜集為主，幫助開發者了解一周前端熱點分為新聞熱點開發教程工程實踐深度閱讀開源項目巔峰人生等欄目。前端每周清單專注前端領域內容，以對外文資料的搜集為主，幫助開發者了解一周前端熱點；分為新聞熱點、開發教程、工程實踐、深度閱讀、開源項目、巔峰人生等欄目。歡迎關注【前端之巔】微信公眾號（ID：frontshow），及時獲取前端每周清單；本文則是對于...

崔曉明 2019-08-20 19:01 評論0 收藏0
web worker 的傳值方式以及耗時對比

摘要：背景前一陣子開發的項目導入由于自己的代碼問題引起了個性能問題一個的文件轉換成數據大概要耗時雖然后面發現是某個使用頻率非常高的函數內部用了構造函數造成的所以這里順便提醒一下如果你很在乎幾毫秒的差距的話建議謹慎使用哈但是在優化的過程中一度懷疑是背景前一陣子開發的項目 pptx 導入, 由于自己的代碼問題,引起了個性能問題,一個 40p 的 pptx 文件,轉換成 json 數據,大概要...

warkiz 2019-08-23 15:06 評論0 收藏0