這篇文章將為大家詳細講解有關HTML5中Web Worker指的是什么，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

成都創(chuàng)新互聯(lián)，是成都地區(qū)的互聯(lián)網(wǎng)解決方案提供商，用心服務為企業(yè)提供網(wǎng)站建設、成都app軟件開發(fā)、成都小程序開發(fā)、系統(tǒng)按需求定制制作和微信代運營服務。經(jīng)過數(shù)10年的沉淀與積累，沉淀的是技術和服務，讓客戶少走彎路，踏實做事，誠實做人，用情服務，致力做一個負責任、受尊敬的企業(yè)。對客戶負責，就是對自己負責，對企業(yè)負責。

瀏覽器中的Web Worker

背景介紹

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

進程與線程的區(qū)別

根本區(qū)別：進程是操作系統(tǒng)資源分配的基本單位，而線程是任務調度和執(zhí)行的基本單位。
 在操作系統(tǒng)中能同時運行多個進程（程序）；而在同一個進程（程序）中有多個線程同時執(zhí)行。

兼容性

web worker是什么？

簡單來說，其實就是在Javascript單線程執(zhí)行的基礎上，開啟一個子線程，進行程序處理，而不影響主線程的執(zhí)行，當子線程執(zhí)行完畢之后再回到主線程上，在這個過程中并不影響主線程的執(zhí)行過程。

舉個栗子

傳統(tǒng)情況下，執(zhí)行下面的代碼后，整個頁面都會被凍結，由于javascript是單線程處理，如下代碼已經(jīng)完全組塞了后續(xù)的執(zhí)行

while(1){}

如果換一種方式，我們通過開啟一個新的線程來執(zhí)行這段代碼，將他放在一個單獨的worker.js文件中,在主線程執(zhí)行以下代碼，則可以避免這種情況。

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

Web Worker的用法

判斷當前瀏覽器是否支持web worker

if (typeof (Worker) != "undefined") { //瀏覽器支持web worker  
    if (typeof (w) == "undefined") { //w是未定義的,還沒有開始計數(shù)        
        w = new Worker("webworker.js"); //創(chuàng)建一個Worker對象,利用Worker的構造函數(shù)  
    }
    //onmessage是Worker對象的properties  
    w.onmessage = function (event) { //事件處理函數(shù),用來處理后端的web worker傳遞過來的消息  
        // do something
    };
} 
else { // 瀏覽器不支持web worker
    // do something
}

API

①創(chuàng)建新的Worker

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

②傳遞參數(shù)

worker.postMessage()

③接收消息

worker.onMessage = function(msg){}

④異常處理

worker.onerror = function(err){}

⑤結束worker

worker.terminate()

⑥載入工具類函數(shù)

importScripts()

Worker作用域

當我們創(chuàng)建一個新的worker時，該代碼會運行在一個全新的javascript的環(huán)境中（WorkerGlobalScope）運行,是完全和創(chuàng)建worker的腳本隔離，這時我們可以吧創(chuàng)建新worker的腳本叫做主線程，而被創(chuàng)建的新的worker叫做子線程。
  WorkerGlobalScope是worker的全局對象，所以它包含所有核心javascript全局對象擁有的屬性如JSON等，window的一些屬性，也擁有類似于XMLHttpRequest()等。
  但是我們所開啟的新的worker也就是子線程，并不支持操作頁面的DOM。

線程間的通訊是傳值而不是傳地址

主線程與子線程數(shù)據(jù)通信方式有多種，通信內容，可以是文本，也可以是對象。需要注意的是，這種通信是拷貝關系，即是傳值而不是地址，子線程對通信內容的修改，不會影響到主線程。事實上，瀏覽器內部的運行機制是，先將通信內容串行化，然后把串行化后的字符串發(fā)給子線程，后者再將它還原。

JavaScript中的數(shù)據(jù)類型存放原理以及傳遞規(guī)則

共享線程（SharedWorker）

共享線程是為了避免線程的重復創(chuàng)建和銷毀過程，降低了系統(tǒng)性能的消耗，
  共享線程SharedWorker可以同時有多個頁面的線程鏈接。
  使用SharedWorker創(chuàng)建共享線程，也需要提供一個javascript腳本文件的URL地址或Blob,該腳本文件中包含了我們在線程中需要執(zhí)行的代碼，如下：

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

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

worker.port.onmessage = function(msg){};

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

worker.port.postMessage(msg);

運行原理

生命周期

①當一個web worker的文檔列表不為空的時候，這個web worker會被稱之為許可線程。
②當一個web worker的文檔列表中的任何一個對象都是處于完全活動狀態(tài)的時候，這個web worker會被稱之為需要激活線程。
③當一個web worker是許可線程并且擁有計數(shù)器或者擁有數(shù)據(jù)庫事務或者擁有網(wǎng)絡連接或者它的web worker列表不為空的時候，這個web worker會被稱之為受保護的線程。
④當一個web worker是一個非需要激活線程同時又是一個許可線程的時候，這個web worker會被稱之為可掛起線程。

以webKit為例加載并執(zhí)行worker的過程

應用

可以做什么：

1.可以加載一個JS進行大量的復雜計算而不掛起主進程，并通過postMessage，onmessage進行通信
2.可以在worker中通過importScripts(url)加載另外的腳本文件
3.可以使用 setTimeout(), clearTimeout(), setInterval(), and clearInterval()
4.可以使用XMLHttpRequest來發(fā)送請求
5.可以訪問navigator的部分屬性

不可以做什么：

1.不能跨域加載JS
2.worker內代碼不能訪問DOM
3.各個瀏覽器對Worker的實現(xiàn)不大一致，例如FF里允許worker中創(chuàng)建新的worker,而Chrome中就不行
4.不是每個瀏覽器都支持這個新特性

關于HTML5中Web Worker指的是什么就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

分享文章：HTML5中WebWorker指的是什么
網(wǎng)頁地址：http://m.rwnh.cn/article22/ipjejc.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供App開發(fā)、網(wǎng)站維護、網(wǎng)站排名、響應式網(wǎng)站、標簽優(yōu)化、網(wǎng)站設計公司

廣告

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)