需要了解關於Web Workers的7件事-html教學-PHP中文網

　介紹

　　Web Workers允許你在背景執行JavaScript程式碼，而不會阻止web使用者介面。 Web Workers可以提升網頁的整體效能，還可以增強使用者體驗。 Web Workers有兩種風格－專用Web Workers和共用Web Workers。本文討論了你所需要知道的Web worker的七個關鍵方面，幫助你決定在應用程式中使用它們的話。

# 　1.Web Workers允許你在背景執行JavaScript程式碼

# 　　通常，你在Web頁面中編寫的JavaScript程式碼在與使用者介面相同的執行緒中執行。這就是為什麼當你點擊一個會觸發漫長處理過程的按鈕，網頁的使用者介面會凍結。除非處理完成，否則你就無法工作於使用者介面。 Web worker允許你在背景執行JavaScript，以便使用者介面保持回應，即使同時正在執行某些腳本。執行腳本的後台執行緒通常稱為worker thread或worker。你可以產生盡可能多的worker，只要你想。你也可以將資料傳遞到正在worker thread中執行的腳本，並在完成時將值傳回主執行緒。然而，Web Workers有一些限制，如下所示：

# Web Workers無法從web頁面存取DOM元素。
# Web Workers無法從web頁面存取全域變數和JavaScript函數。
# Web Workers不能呼叫alert()或confirm()函數。
# 不能在Web Workers中存取諸如窗口，文檔和parent這樣的物件。

　　但是，你可以使用setTimeout()，setInterval()等函數。你也可以使用XMLHttpRequest物件向伺服器發出Ajax請求。

　2.Web Workers有兩種類型

　　Web Workers有兩種：專用Web Workers和共用Web Workers。專用Web Workers隨同創建它們的網頁一起存在和死亡。這意味著在網頁中建立的專用Web Workers無法透過多個網頁存取。另一方面，共用Web Workers在多個網頁之間是共用的。 Worker類別代表專用Web Workers，而SharedWorker類別代表共用Web Workers。

　　在許多情況下，專用Web Workers就可以滿足你的需求。這是因為通常你需要在worker thread中執行一個網頁的特定腳本。然而，有時，你需要在worker thread中執行一個腳本，而這個worker thread對多個網頁通用。在這種情況下，建立許多專用Web Workers，每個頁面一個，不如使用共用Web Workers。由一個網頁建立的共享web worker仍然可用於其他網頁。只有當所有到它的連接被關閉，才能毀壞它。共享Web Workers比專用Web Workers更複雜一點。

　3.Worker物件代表專用Web Worker

# 　　現在，你了解了Web Workers的基礎知識，讓我們來看看如何使用專用Web Workers。下面討論的範例假設你已使用喜歡的開發工具建立了一個Web應用程序，並且還在其Script資料夾中加入了jQuery和Modernizr函式庫。將HTML頁面新增至web應用程序，然後鍵入以下程式碼：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="scripts/modernizr.js"></script>
    <script src="scripts/jquery-2.0.0.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            if (!Modernizr.webworkers)
            {
                alert("This browser doesn&#39;t support Web Workers!");
                return;
            }
            $("#btnStart").click(function () {
                var worker = new Worker("scripts/lengthytask.js");
                worker.addEventListener("message", function (evt) {
                    alert(evt.data);
                },false);
                worker.postMessage(10000);
            });
        });

    </script>
</head>
<body>
    <form>
        <input type="button" id="btnStart" value="Start Processing" />
    </form>
</body>
</html>

登入後複製

　　上面的HTML頁麵包含一個觸發一些JavaScript處理的按鈕（btnStart）。請注意，該網頁引用了Modernizr和jQuery庫。

熱門教學

更多>

相關教學