《基于新信息技術(shù)的HTML5和CSS3網(wǎng)頁設(shè)計進(jìn)階教程》課件-第6章

第6章WebWorkers多線程6.1WebWorkers簡介6.2瀏覽器支持檢測6.3WebWorkers分類6.4WebWorkersAPI 6.5WebWorkers基本用法6.6WebWorkers完整實例

6.1WebWorkers簡介

WebWorkers的作用就是為JavaScript創(chuàng)造多線程環(huán)境，允許主線程創(chuàng)建Worker線程，將一些任務(wù)分配給后者運(yùn)行。在主線程運(yùn)行的同時，Worker線程在后臺運(yùn)行，兩者互不干擾。等到Worker線程完成計算任務(wù)，再把結(jié)果返回給主線程。這樣的好處是，一些計算密集型或高延遲的任務(wù)被Worker線程承擔(dān)了，主線程(通常負(fù)責(zé)UI交互)就會很流暢，不會被阻塞或拖慢。

Worker線程一旦新建成功，就會始終運(yùn)行，不會被主線程上的活動(比如用戶點(diǎn)擊按鈕、提交表單)打斷，這樣有利于隨時響應(yīng)主線程的通信。但是，這也造成了Worker比較耗費(fèi)資源，因此Worker不應(yīng)該過度使用，而且一旦使用完畢，就應(yīng)該關(guān)閉。

另外，Worker運(yùn)行在另一個全局上下文中，不同于當(dāng)前的window，線程所在的全局對象與主線程不一樣，因此無法讀取主線程所在網(wǎng)頁的DOM對象，也無法使用document、window、parent這些對象，不能執(zhí)行alert()方法和confirm()方法。

6.2瀏覽器支持檢測

目前為止，除了InternetExplorer9(IE9)及更早的版本外，所有主流瀏覽器均支持WebWorkers。我們可以通過以下代碼檢測瀏覽器是否支持WebWorkers。

6.3WebWorkers分類

WebWorkers可分為兩種類型：專用線程DedicatedWebWorkers和共享線程SharedWebWorkers。DedicatedWebWorkers隨當(dāng)前頁面的關(guān)閉而結(jié)束，只能被創(chuàng)建它的頁面訪問。與之相對應(yīng)的SharedWebWorkers可以被多個頁面訪問。在JavaScript代碼中，“Work”類型代表DedicatedWebWorkers，而“SharedWorkers”類型代表SharedWebWorkers。

在絕大多數(shù)情況下，使用DedicatedWebWorkers就足夠了，因為一般來說在WebWorkers中運(yùn)行的代碼是專為當(dāng)前頁面服務(wù)的。而在一些特定情況下，WebWorkers可能運(yùn)行的是更為普遍性的代碼，可以為多個頁面服務(wù)。在這種情況下，我們會創(chuàng)建一個共享線程的SharedWebWorkers，它可以被與之相關(guān)聯(lián)的多個頁面訪問，只有當(dāng)所有關(guān)聯(lián)的頁面都關(guān)閉的時候，該SharedWebWorkers才會結(jié)束。相對DedicatedWebWorkers，SharedWebWorkers稍微復(fù)雜些，但使用方法基本相同，下面以DedicatedWebWorkers為例進(jìn)行說明。

6.4WebWorkersAPI

WebWorkersAPI提供了一系列的屬性和方法，用于創(chuàng)建線程和與線程通信。這些屬性和方法在DedicatedWebWorkers和SharedWebWorkers中都能夠使用。這些方法分為兩個部分：一部分提供給主線程使用；另一部分提供給Worker線程使用。

主要的API如下所示：

主線程使用Worker()構(gòu)造函數(shù)創(chuàng)建一個線程，返回一個Worker對象。對線程的操作都需要使用此返回的Worker對象。

Worker線程有自己的全局對象，不是主線程的window，而是一個專門為Worker定制的全局對象，這個對象的名字為“self”，只能在Worker線程中使用。而在window上面的對象和方法不是全部都可以使用。self對象一些自己的全局屬性和方法如表6-2所示。

6.5WebWorkers基本用法

6.5.1主線程在主線程中，首先調(diào)用Worker()構(gòu)造函數(shù)，新建一個Worker線程。構(gòu)造函數(shù)的參數(shù)是一個腳本文件(.js文件)，該文件就是Worker線程所要執(zhí)行的任務(wù)。由于Worker不能讀取本地文件，所以這個腳本必須來自網(wǎng)絡(luò)。如果下載腳本文件沒有成功，Worker啟動就會失敗。

由于Worker是異步處理，因此主線程必須通過worker.onmessage指定監(jiān)聽函數(shù)，接收子線程發(fā)回來的消息及執(zhí)行后續(xù)操作。事件對象event的data屬性可以獲取Worker發(fā)來的數(shù)據(jù)。

主線程還可以監(jiān)聽Worker是否發(fā)生錯誤，如果發(fā)生錯誤，Worker會觸發(fā)主線程的error事件，主線程通過worker.onerror事件進(jìn)行監(jiān)聽。

錯誤事件有以下3個用戶關(guān)心的字段：

●

message：錯誤信息。

●

filename：發(fā)生錯誤的腳本文件名。

●

lineno：發(fā)生錯誤時所在腳本文件的行號。

6.5.2Worker線程

Worker線程內(nèi)部需要有一個監(jiān)聽函數(shù)，監(jiān)聽主線程是否有message被發(fā)送到Worker，并通過self.onmessage事件進(jìn)行監(jiān)聽，事件對象event的data屬性可以獲取發(fā)來的數(shù)據(jù)。

在Worker中接收主線程發(fā)送過來的數(shù)據(jù)，并進(jìn)行處理，代碼如下：

6.5.3數(shù)據(jù)通信

前面已經(jīng)講過如何將數(shù)據(jù)在主線程和Worker之間進(jìn)行傳遞，這些數(shù)據(jù)可以是任何類型，需要注意的是，這種通信是復(fù)制關(guān)系，即是傳值而不是傳址，Worker對通信內(nèi)容的修改不會影響到主線程。傳遞給Worker的對象需要經(jīng)過序列化，在另一端還需要反序列化。頁面與Worker不會共享同一個實例，最終的結(jié)果就是在每次通信結(jié)束時生成了數(shù)據(jù)的一個副本。大部分瀏覽器使用結(jié)構(gòu)化復(fù)制來實現(xiàn)該特性。

但是，以復(fù)制方式發(fā)送二進(jìn)制數(shù)據(jù)，會造成性能問題。比如，主線程向Worker發(fā)送一個500MB文件，默認(rèn)情況下瀏覽器會生成一個原文件的副本。為了解決這個問題，JavaScript允許主線程把二進(jìn)制數(shù)據(jù)直接轉(zhuǎn)移給子線程，但是一旦轉(zhuǎn)移，主線程就無法再使用這些二進(jìn)制數(shù)據(jù)了，這是為了防止出現(xiàn)多個線程同時修改數(shù)據(jù)的情況。這種轉(zhuǎn)移數(shù)據(jù)的方法，叫作TransferableObjects。該方法使得主線程可以快速把數(shù)據(jù)交給Worker，對于影像處理、聲音處理、3D運(yùn)算等就非常方便了，不會產(chǎn)生性能負(fù)擔(dān)。

6.6WebWorkers完整實例

例6-1

WebWorkers實現(xiàn)多線程實例。實現(xiàn)頁面，要求如下：

●

頁面中顯示的數(shù)字不斷增加。

●

在頁面數(shù)字變化過程中頁面輸入框能夠輸入內(nèi)容。

創(chuàng)建一個JavaScript文件，命名為myWorker.js，代碼如下：

頁面效果如圖6-1所示。

圖6-1WebWorkers實現(xiàn)多線程頁面效果

在JavaScript文件中，首先定義一個變量用于計數(shù)，接下來使用self.onmessage監(jiān)聽主線程發(fā)送過來的消息，當(dāng)主線程有消息發(fā)送過來時，判斷消息如果是“start”，則開始執(zhí)行start()函數(shù)；函數(shù)中使用while無限循環(huán)對變量進(jìn)行累加，當(dāng)i為100萬的倍數(shù)時則向主線程發(fā)送消息，將變量的值傳遞給主線程。注意：此處不能太過頻繁向主線程發(fā)送消息，否則主線程處理不及會導(dǎo)致整個頁面停止響應(yīng)。

在HTML頁面中，放入兩個元素，一個p元素用于顯示W(wǎng)orker發(fā)送過來的變量的