歡迎來到DIVCSS5查找CSS資料與學習DIV CSS布局技術!
  我們都知道,瀏覽器執行js代碼是單線程的,當頁面腳步執行時,頁面是沒辦法響應別的的,直到腳步的結束,而這里介紹的WebWorkers就可以改變這一切。
 
  WebWorkers是運行在后臺的js代碼,獨立于其他腳本,不會影響頁面的性能。我們可以繼續做任何愿意做的事情:點擊、選取內容等等,而此時WebWorkers在后臺運行。
 
  所有主流瀏覽器均支持webworker,除了InternetExplorer。
 
  第一步:生成worker。
 
  調用Worker()構造函數,指定一個要在worker線程內運行的腳本的URI,例子是當前頁面指定worker線程執行的腳步為script-worker.js。
 
  varmyWorker=newWorker("script-worker.js");
 
  在script-worker.js里面我們可以執行額外的代碼,這些代碼的執行不會影響頁面去干別的你想干的事情,這聽起來很棒。
 
  第二步:傳遞數據。
 
  頁面可以和worker交互傳遞數據,這樣worker在不影響頁面干有意義的事情的情況下可以默默去計算,好了告訴一下頁面,使用這些數據。
 
  //[主頁面代碼]
 
  myWorker.postMessage("data-from-mainpage");
 
  //[worker代碼]
 
  onmessage=function(oEvent){
 
  console.log("主頁面發送過來的數據是:"+oEvent.data));
 
  };
 
  上面是【主頁面發送數據給worker腳本】的情況,是的,你看見了非常親切的postMessage,好吧,我喜歡這個東西。
 
  //[主頁面代碼]
 
  myWorker.onmessage=function(oEvent){
 
  console.log("worker腳本發送過來的數據是:"+oEvent.data));
 
  };
 
  //[worker代碼]
 
  postMessage("data-from-mainpage");
 
  上面是【worker腳本發送數據給主頁面】的情況,依舊很簡單,不過這些只是API,關鍵在于巧妙的使用才是有益的。
 
  此外,可能worker執行會出錯,主頁面通過:
 
  myWorker.onerror=function(oEvent){};
 
  可以監聽worker發生錯誤。
 
  第三步:重要幾點。
 
  worker線程能夠在不干擾UI的情況下執行任務,所執行的JavaScript代碼完全在另一個作用域,與當前網頁中的代碼不共享作用域。
 
  Worker的全局作用域中提供了importScripts()方法,接收一個或多個指向JavaScript文件的URL,加載過程都是異步進行。
 
  importScripts()只會在您提供絕對URI的情況下生效,執行過程也是異步的。
 
  當我們創建WebWorkers對象后,它會繼續監聽消息(即使在外部腳本完成之后)直到其被終止為止,使用myWorker.terminate()方法可以終止WebWorkers,并釋放瀏覽器/計算機資源。
 
  第四步:重要限制。
 
  1.無法訪問DOM節點,無法訪問全局變量或是全局函數,法調用alert()或者confirm之類的函數和無法訪問window、document之類的瀏覽器全局變量;
 
  2.不過WebWorker中的Javascript依然可以使用setTimeout(),setInterval()之類的函數,也可以使用XMLHttpRequest對象來做Ajax通信。





本文轉載自中文網

 

如需轉載,請注明文章出處和來源網址:http://www.4389979.live/html/h55051.shtml

河南十一选五大小 快乐十分任选四稳赚 欢乐彩怎么注销 时时彩软件免费版 重庆幸运农场交流群 今天甘肃快三预测号码 时时彩软件宝宝后二 山东11选五免费计划 广东福彩网上能投注吗 福彩3d玩法说明 江苏体彩11选五走势