本篇內容主要講解“HTML5的Web Workers怎么創建”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“HTML5的Web Workers怎么創建”吧!
web worker是運行在后臺的JavaScript，不會影響頁面的性能。
什么是Web Worker？
當在HTML頁面中執行腳本時，頁面的狀態是不可響應的，直到腳本已完成。
web worker是運行在后臺的JavaScript，獨立于其他腳本，不會影響頁面的性能。您可以繼續做任何愿意做的事情：點擊，拾取內容等等，而此時web worker在后臺運行。
瀏覽器支持
所有主流瀏覽器均支持web worker，除了Internet Explorer。
HTML5 Web Workers實例
下面的例子創建了一個簡單的web worker，在后臺計數：
計數：
<！DOCTYPE html>
<html>
<身體>
<p>計數：<output id =“ result”> </ output> </ p>
<button onclick =“ startWorker（）”>開始工作者</ button>
<button onclick =“ stopWorker（）”>停止Worker </ button>
<br /> <br />
<腳本>
var w;
函數startWorker（）
{
if（typeof（Worker）！==“未定義”）
{
if（typeof（w）==“ undefined”）
{
w = new Worker（“ / example / html5 / demo_workers.js”）;
}
w.onmessage =函數（事件）{
document.getElementById（“ result”）。innerHTML = event.data;
};
}
別的
{
document.getElementById（“ result”）。innerHTML =“對不起，您的瀏覽器不支持Web Workers ...”;
}
}
函數stopWorker（）
{
w.terminate（）;
}
</ script>
</ body>
</ html>
檢測Web Worker支持
在創建web worker之前，請檢測用戶的瀏覽器是否支持它：
if（typeof（Worker）！==“未定義”）
{
// 是的！網絡工作者支持！
//一些代碼.....
}
別的
{
// 對不起！不支持Web Worker。
}
創建網絡工作者
現在，讓我們在一個外部JavaScript中創建我們的web worker。
在這里，我們創建了計數腳本。該腳本存儲于“ demo_workers.js”文件中：
var i = 0;
函數timedCount（）
{
i = i + 1;
postMessage(i);
setTimeout（“ timedCount（）”，500）;
}
timedCount（）;
以上代碼中重要的部分是 postMessage（） 方法-它用于向HTML頁面傳回一段消息。
注釋： web worker通常不使用如此簡單的腳本，或者用于更耗費CPU資源的任務。
創建Web Worker對象
我們已經有了web worker文件，現在我們需要從HTML頁面調用它。
下面的代碼檢測是否存在worker，如果不存在，-它會創建一個新的web worker對象，然后運行“ demo_workers.js”
if（typeof（w）==“ undefined”）
{
w = new Worker（“ demo_workers.js”）;
}
然后我們就可以從web worker發生和接收消息了。
向web worker添加一個“ onmessage”事件監聽器：
w.onmessage =功能（事件）{
document.getElementById（“ result”）。innerHTML = event.data;
};
當web worker傳遞消息時，會執行事件監聽器中的代碼。
終止網絡工作者
當我們創建web worker對象后，它會繼續監聽消息（即使在外部腳本完成之后）直到其被終止為止。
如果終止網絡工作人員，并釋放瀏覽器/計算機資源，請使用Terminate（）方法：
w.terminate（）;
完整的Web Worker實例代碼
我們已經看到了.js文件中的Worker代碼。下面是HTML頁面的代碼：
實例
<！DOCTYPE html>
<html>
<身體>
<p>計數：<output id =“ result”> </ output> </ p>
<button onclick =“ startWorker（）”>開始工作者</ button>
<button onclick =“ stopWorker（）”>停止工作者</ button>
<br /> <br />
<腳本>
var w;
函數startWorker（）
{
if（typeof（Worker）！==“未定義”）
{
if（typeof（w）==“ undefined”）
{
w = new Worker（“ demo_workers.js”）;
}
w.onmessage =函數（事件）{
document.getElementById（“ result”）。innerHTML = event.data;
};
}
別的
{
document.getElementById（“ result”）。innerHTML =“對不起，您的瀏覽器
不支持Web Workers ...”；
}
}
函數stopWorker（）
{
w.terminate（）;
}
</ script>
</ body>
</ html>
網絡工作者和DOM
由于web worker位于外部文件中，它們無法訪問下例JavaScript對象：
window對象
document對象
parent對象
到此，相信大家對“HTML5的Web Workers怎么創建”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
