當前位置 : IT培訓網 > Web前端 > Web教程 > HTML5 Web Workers是如何運行的

HTML5 Web Workers是如何運行的

時間:2016-12-09 15:51:33??來源:web前端培訓網??作者:IT培訓網??已有:名學員訪問該課程
標簽(Tag):?? html5(196)
好了,看到這里你懂了嗎,這些 JavaScript腳本的運行不會影響頁面的性能,它只是在后臺運行而已,如果你想要學習HTML5 web workers方面的知識,那就趕緊關注IT培訓網小編吧!

在HTML5 web頁面中有這樣一些功能,那就是用腳步JavaScript控制的特效或者功能在運行著,這些功能的運行會影響頁面打開速度嗎,會拖慢用戶的瀏覽速度嗎,想要知道的話,趕緊看下面吧!

HTML5 Web Workers

web worker 是運行在后臺的 JavaScript,不會影響頁面的性能。

什么是 Web Worker

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

web worker 是運行在后臺的 JavaScript,獨立于其他腳本,不會影響頁面的性能。您可以繼續做任何愿意做的事情:點擊、選取內容等等,而此時 web worker 在后臺運行。

瀏覽器支持

HTML5 Web Workers是如何運行的_www.oalvodamoda.com

Internet Explorer 10, Firefox, Chrome, Safari 和 Opera 都支持Web workers.

HTML5 Web Workers 實例

下面的例子創建了一個簡單的 web worker,在后臺計數:

源代碼:

<!DOCTYPE html>

<html>

<head> 

<meta charset="utf-8"> 

<title>IT培訓網(www.oalvodamoda.com)</title> 

</head>

<body>

<p>計數: <output id="result"></output></p>

<button onclick="startWorker()">開始工作</button>

<button onclick="stopWorker()">停止工作</button>

<p><strong>注意:</strong> Internet Explorer 9 及更早 IE 版本瀏覽器不支持 Web Workers.</p>

<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>

運行結果:

HTML5 Web Workers是如何運行的_www.oalvodamoda.com

demo_workers.js 文件代碼:

var i=0;

function timedCount()

{

    i=i+1;

    postMessage(i);

    setTimeout("timedCount()",500);

}

timedCount();

檢測瀏覽器是否支持 Web Worker

在創建 web worker 之前,請檢測用戶的瀏覽器是否支持它:

if(typeof(Worker)!=="undefined")

{

    // 是的! Web worker 支持!

    // 一些代碼.....

}

else

{

    //抱歉! Web Worker 不支持

}

創建 web worker 文件

現在,讓我們在一個外部 JavaScript 中創建我們的 web worker。

在這里,我們創建了計數腳本。該腳本存儲于 "demo_workers.js" 文件中:

var i=0;

function 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=function(event){

    document.getElementById("result").innerHTML=event.data;

};

終止 Web Worker

當我們創建 web worker 對象后,它會繼續監聽消息(即使在外部腳本完成之后)直到其被終止為止。

如需終止 web worker,并釋放瀏覽器/計算機資源,請使用 terminate() 方法:

w.terminate();

完整的 Web Worker 實例代碼

我們已經看到了 .js 文件中的 Worker 代碼。下面是 HTML 頁面的代碼:

實例

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>IT培訓網(www.oalvodamoda.com)</title>

</head>

<body>

<p>計數: <output id="result"></output></p>

<button onclick="startWorker()">開始工作</button>

<button onclick="stopWorker()">停止工作</button>

<p><strong>注意:</strong> Internet Explorer 9 及更早 IE 版本瀏覽器不支持 Web Workers.</p>

<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>

運行結果:

HTML5 Web Workers是如何運行的_www.oalvodamoda.com

Web Workers DOM

由于 web worker 位于外部文件中,它們無法訪問下例 JavaScript 對象:

window 對象

document 對象

parent 對象

好了,看到這里你懂了嗎,這些腳本的運行不會影響頁面的性能,它只是在后臺運行而已,如果你想要學習HTML5 web workers方面的知識,那就趕緊關注IT培訓網小編吧!

頂一下
(0)
0%
踩一下
(0)
0%
------分隔線----------------------------
------分隔線----------------------------
Web 教程
1、HTML 教程
1.1 HTML 簡介
1.2 HTML 編輯器
1.3 HTML 基礎
1.4 HTML 元素
1.5 HTML 屬性
1.6 HTML 標題
1.7 HTML 段落
1.8 HTML 文本格式化
1.9 HTML 鏈接
1.10 HTML 頭部
1.11 HTML CSS
1.12 HTML 圖像
1.13 HTML 表格
1.14 HTML 列表
1.15 HTML 區塊
1.16 HTML 布局
1.17 HTML 表單
1.18 HTML 框架
1.19 HTML 顏色
1.20 HTML 顏色名
1.21 HTML 顏色值
1.22 HTML 腳本
1.23 HTML 字符實體
1.24 HTML URL
1.25 HTML 速查列表
1.26 HTML 總結
1.27 HTML 簡介
2、HTML5
2.1 HTML5 教程
2.2 HTML5 瀏覽器支持
2.3 HTML5 新元素
2.4 HTML5 Canvas
2.5 HTML5 內聯 SVG
2.6 HTML5 MathML
2.7 HTML5 拖放
2.8 HTML5 地理定位
2.9 HTML5 Video(視頻)
2.10 HTML5 Audio(音頻)
2.11 HTML5 Input 類型
2.12 HTML5 表單元素
2.13 HTML5 表單屬性
2.14 HTML5 語義元素
2.15 HTML5 Web 存儲
2.16 HTML5 Web SQL
2.17 HTML5 應用程序緩存
2.18 HTML5 Web Workers
2.19 HTML5 SSE
2.20 HTML5 WebSocket
2.21 HTML5 代碼規范
3、HTML 媒體
3.1 HTML 媒體(Media)
3.2 HTML 插件
3.3 HTML 音頻(Audio)
3.4 HTML視頻(Videos)播放
五月情天