084_html5WebWorkers
1. web worker是運行在后臺的JavaScript, 不會影響頁面的性能。
2. 什么是Web Worker?
2.1. 當在html頁面中執行腳本時, 頁面的狀態是不可響應的, 直到腳本已完成。
2.2. web worker是運行在后臺的JavaScript, 獨立于其他腳本, 不會影響頁面的性能。您可以繼續做任何愿意做的事情: 點擊、選取內容等等, 而此時web worker在后臺運行。
3. 瀏覽器支持: 所有主流瀏覽器均支持web worker, 除了Internet Explorer。
4. 檢測 Web Worker 支持
4.1. 在創建web worker之前, 請檢測用戶的瀏覽器是否支持它:
if(typeof(Worker)!=="undefined") {// Yes! Web worker support!// Some code..... } else {// Sorry! No Web Worker support.. }5. 創建web worker文件
5.1. 現在, 讓我們在一個外部JavaScript中創建我們的web worker。
5.2. 在這里, 我們創建了計數腳本。該腳本存儲于"demo_workers.js"文件中:
var i = 0;function timedCount() {i = i + 1;postMessage(i);setTimeout("timedCount()", 500); }timedCount();5.3. 以上代碼中重要的部分是postMessage()方法: 它用于向html頁面傳回一段消息。
5.4. 注釋: web worker通常不用于如此簡單的腳本, 而是用于更耗費CPU資源的任務。
6. 創建Web Worker對象
6.1. 我們已經有了web worker文件, 現在我們需要從html頁面調用它。
6.2. 下面的代碼檢測是否存在worker, 如果不存在, 它會創建一個新的web worker對象, 然后運行"demo_workers.js"中的代碼:
if(typeof(w) == "undefined") {w = new Worker("demo_workers.js"); // 服務器上的一個js文件 }6.3. 然后我們就可以從web worker發生和接收消息了。
6.4. 向web worker添加一個"onmessage"事件監聽器:
w.onmessage = function(messageEvent) {document.getElementById("result").innerHTML = messageEvent.data; };6.5. 當web worker傳遞消息時, 會執行事件監聽器中的代碼。event.data中存有來自event.data的數據。
7. 終止Web Worker
7.1. 當我們創建web worker對象后, 它會繼續監聽消息(即使在外部腳本完成之后)直到其被終止為止。
7.2. 如需終止web worker, 并釋放瀏覽器/計算機資源, 請使用terminate()方法:
w.terminate();8. 完整的Web Worker實例代碼
8.1. 新建一個名叫WebWorkers的動態Web工程
8.2. worker.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html><head><meta charset="utf-8" /><title>Web Workers</title></head><body><p>計數: <output id="result"></output></p><button onclick="startWorker()">開始 Worker</button> <button onclick="stopWorker()">停止 Worker</button><br /><br /><script type="text/javascript">var w;function startWorker() {if(typeof(Worker) !== "undefined") {if(typeof(w) == "undefined") {w = new Worker("demo_workers.js");}w.onmessage = function (messageEvent) {document.getElementById("result").innerHTML = messageEvent.data;};} else {document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Workers...";}}function stopWorker() { w.terminate();}</script></body> </html>8.3. demo_workers.js
var i = 0;function timedCount() {i = i + 1;postMessage(i);setTimeout("timedCount()", 500); }timedCount();8.4. 啟動服務器, 訪問worker.html
9. Web Workers和DOM
9.1. 由于web worker位于外部文件中, 它們無法訪問下例JavaScript對象:
?9.1.1. window對象
?9.1.2. document對象
?9.1.3. parent對象
總結
以上是生活随笔為你收集整理的084_html5WebWorkers的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 083_html5应用程序缓存
- 下一篇： 085_html5服务器发送事件