<rt id="bn8ez"></rt>
<label id="bn8ez"></label>

  • <span id="bn8ez"></span>

    <label id="bn8ez"><meter id="bn8ez"></meter></label>

    qileilove

    blog已經轉移至github,大家請訪問 http://qaseven.github.io/

    HTML 5 Web Workers

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

    什么是 Web Worker?

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

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

    瀏覽器支持

    所有主流瀏覽器均支持 web worker,除了 Internet Explorer。

    HTML5 Web Workers 實例

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

    計數:

     

    親自試一試

    檢測 Web Worker 支持

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

    if(typeof(Worker)!=="undefined")   {   // Yes! Web worker support!   // Some code.....   } else   {   // Sorry! No Web Worker support..   } 

    創建 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 傳遞消息時,會執行事件監聽器中的代碼。event.data 中存有來自 event.data 的數據。

    終止 Web Worker

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

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

    w.terminate();

    完整的 Web Worker 實例代碼

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

    實例

    <!DOCTYPE html> <html> <body>  <p>Count numbers: <output id="result"></output></p> <button onclick="startWorker()">Start Worker</button> <button onclick="stopWorker()">Stop Worker</button> <br /><br />  <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="Sorry, your browser  does not support Web Workers..."; } }  function stopWorker() { w.terminate(); } </script>  </body> </html> 

    親自試一試

    Web Workers 和 DOM

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

    • window 對象
    • document 對象
    • parent 對象

    posted on 2014-04-10 16:01 順其自然EVO 閱讀(196) 評論(0)  編輯  收藏 所屬分類: HTML5

    <2025年5月>
    27282930123
    45678910
    11121314151617
    18192021222324
    25262728293031
    1234567

    導航

    統計

    常用鏈接

    留言簿(55)

    隨筆分類

    隨筆檔案

    文章分類

    文章檔案

    搜索

    最新評論

    閱讀排行榜

    評論排行榜

    主站蜘蛛池模板: 中文字幕无码成人免费视频| 国产在线jyzzjyzz免费麻豆| 亚洲AV蜜桃永久无码精品| 亚洲乱码卡三乱码新区| 91手机看片国产永久免费| 亚洲第一页在线观看| 色播精品免费小视频| 中文字幕 亚洲 有码 在线| 99久久99久久精品免费看蜜桃| 亚洲欧洲日本精品| 西西大胆无码视频免费| 亚洲另类自拍丝袜第五页| 国产青草视频免费观看97| 国产大陆亚洲精品国产| 亚洲精品麻豆av| 国产午夜精品免费一区二区三区| 亚洲国产精品自在在线观看| 免费看h片的网站| 亚洲码欧美码一区二区三区| 波多野结衣免费视频观看 | 亚洲av专区无码观看精品天堂| 美女网站免费福利视频| 国产精品亚洲专区无码唯爱网| 亚洲伊人成无码综合网| 一级毛片全部免费播放| 亚洲一级特黄特黄的大片| 免费一级毛片在播放视频| 中文字幕免费在线看| 亚洲国产一区在线观看| 国产gav成人免费播放视频| 亚欧国产一级在线免费| 亚洲无砖砖区免费| 免费成人在线观看| 久久久久久AV无码免费网站 | 精品亚洲成A人在线观看青青| 国产亚洲精品拍拍拍拍拍| 91久久精品国产免费一区| 亚洲第一se情网站| 亚洲AV无码成人网站久久精品大 | 亚洲AV无码一区二区乱子仑| 国产成人亚洲综合无码|