2015年12月16日 星期三

HTML5 - Web Workers

web worker 是執行在後台的 JavaScript,不會影響頁面的性能。
什麼是 Web Worker?

當在 HTML 頁面中執行scripts時,頁面的狀態是不可響應的,直到scripts已完成。

web worker 是執行在後台的 JavaScript,獨立於其他scripts,不會影響頁面的性能。您可以繼續做任何願意做的事情:點擊、選取內容等等,而此時 web worker 在後台執行。

簡單的範例程式如下:
<!DOCTYPE html>
<html>
<body>

<p>計數: <output id="result"></output></p>
<button onclick="startWorker()">開始</button>
<button onclick="stopWorker()">停止</button>

<script>
var w;

function startWorker() {
    if(typeof(Worker) !== "undefined") {
        if(typeof(w) == "undefined") {
            w = new Worker("demo_workers.js");
        }
        w.onmessage = function(event) {
            document.getElementById("result").innerHTML = event.data;
        };
    } else {
        document.getElementById("result").innerHTML = "抱歉,你的瀏覽器不支持 Web Workers...";
    }
}

function stopWorker() {
    w.terminate();
    w = undefined;
}
</script>

</body>
</html>

沒有留言:

張貼留言