【JavaScript】線程WebWorker

時間  2019-11-11
標籤 JavaScript 線程 webworker 欄目 JavaScript 简体版
原文   原文鏈接

介紹javascript

經過使用WebWorker，咱們能夠在瀏覽器後臺運行Javascript，而不佔用瀏覽器自身線程。WebWorker能夠提升應用的整體性能，而且提高用戶體驗。若是你想在本身的Web應用中使用WebWorker，不妨來了解一下有關WebWorker的7件事。html

1.WebWorker可讓你在後臺運行Javascriptjava

通常來講Javascript和頁面的UI會共用一個線程，因此當點擊一個按鈕開始運行Javascript後，在這段代碼運行完畢以前，頁面是沒法響應用戶操做的，換句話來講就是被「凍結」了。而這段代碼能夠交給WebWorker在後臺運行，那麼頁面在Javascript運行期間依然能夠響應用戶操做。後臺會啓動一個worker線程來執行這段代碼，用戶能夠建立多個worker線程。因此你能夠在前臺作一些小規模分佈式計算之類的工做，不過WebWorker有如下一些使用限制：jquery

  • WebWorker沒法訪問DOM節點；
  • WebWorker沒法訪問全局變量或是全局函數；
  • WebWorker沒法調用alert()或者confirm之類的函數；
  • WebWorker沒法訪問window、document之類的瀏覽器全局變量；

不過WebWorker中的Javascript依然可使用setTimeout(),setInterval()之類的函數，也可使用XMLHttpRequest對象來作Ajax通訊。web

2.有兩種WebWorker數據庫

Webworkers可分爲兩種類型：專用線程dedicatedwebworker，以及共享線程sharedwebworker。Dedicatedwebworker隨當前頁面的關閉而結束；這意味着Dedicatedwebworker只能被建立它的頁面訪問。與之相對應的Sharedwebworker能夠被多個頁面訪問。在Javascript代碼中，「Work」類型表明Dedicatedwebworker，而「SharedWorker」類型表明Sharedwebworker。瀏覽器

在絕大多數狀況下，使用Dedicatedwebworker就足夠了，由於通常來講在webworker中運行的代碼是專爲當前頁面服務的。而在一些特定狀況下，webworker可能運行的是更爲廣泛性的代碼，能夠爲多個頁面服務。在這種狀況下，咱們會建立一個共享線程的Sharedwebworker，它能夠被與之相關聯的多個頁面訪問，只有當全部關聯的的頁面都關閉的時候，該Sharedwebworker纔會結束。相對Dedicatedwebworker，sharedwebworker稍微複雜些。服務器

3.「Worker」對象表明DedicatedWebWorkerasp.net

如今來看如何使用Dedicatedwebworker。下面的例子中用到了jQuery以及Modernizr做爲Javascript庫，而後往HTML頁面中加入如下代碼：分佈式

[html]

  1. <!DOCTYPEhtml>
  2. <html>
  3. <head>
  4. <title></title>
  5. <scripttype="text/javascript"src="script/modernizr.js"></script>
  6. <scripttype="text/javascript"src="script/jquery-2.0.0.js"></script>
  7. <scripttype="text/javascript">
  8. $(document).ready(function(){
  9. if(!Modernizr.webworker){
  10. alert("Thisbrowserdoesn'tsupportWebWorker!");
  11. return;
  12. }
  13. $("#btnStart").click(function(){
  14. varworker=newWorker("script/lengthytask.js");
  15. worker.addEventListener("message",function(evt){
  16. alert(evt.data);
  17. },false);
  18. worker.postMessage(10000)
  19. });
  20. });
  21. </script>
  22. </head>
  23. <body>
  24. <form>
  25. <inputtype="button"id="btnStart"value="StartProcessing"/>
  26. </form>
  27. </body>
  28. </html>

這個HTML頁面中有個按鈕，點擊後會運行一個Javascript文件。上面的代碼中首先檢測當前瀏覽器是否支持WebWorker，不支持的話，就跳出提醒信息。

按鈕的點擊事件中建立了Worker對象，並給它指定了Javascript腳本文件——lengthytask.js(稍後會有代碼)，而且給Worker對象綁定了一個「message」事件。該事件會在後臺代碼（lengthytask.js）向頁面返回數據時觸發。「message」事件能夠經過event.data來獲取後臺代碼傳回的數據。最後，postMessage方法正式執行lengthytask.js，該方法還能夠向後臺代碼傳遞參數，後臺代碼一樣經過message事件獲取該參數。

下面是lengthytask.js主要包含的代碼：

[javascript]

  1. addEventListener("message",function(evt){
  2. vardate=newDate();
  3. varcurrentDate=null;
  4. do{
  5. currentDate=newDate();
  6. }while(currentDate-date<evt.data);
  7. postMessage(currentDate);
  8. },false);

以上代碼在後臺監聽message時間，並獲取頁面傳來的參數：10000；這裏其實是一個計時函數：在message事件被觸發10000毫秒以後，把結果（currentDate）傳給頁面。

因此當點擊「StartProcessing」按鈕，頁面會在10秒鐘後把當時的時刻alert出來。在這10秒鐘內頁面依然能夠響應鼠標鍵盤事件。

4.「SharedWorker」對象表明SharedWebWorker

前面的代碼使用的是dedicatedwebworker。這一節會用sharedwebworker代替dedicatedwebworker，來區別二者的不一樣。下面是同一個例子的sharedwebworker版本：

[javascript]

  1. addEventListener("message",function(evt){
  2. vardate=newDate();
  3. varcurrentDate=null;
  4. do{
  5. currentDate=newDate();
  6. }while(currentDate-date<evt.data);
  7. postMessage(currentDate);
  8. },false);

請注意加黑的代碼，這裏建立了一個SharedWorker對象，並把message事件綁定在sharedworker的port對象上；一樣由port對象發起postMessage，開始執行後臺代碼sharedlengthytask.js。

下面是sharedlengthytask.js的主要代碼：

[javascript]

  1. varport;
  2. addEventListener("connect",function(evt){
  3. port=evt.ports[0];
  4. port.addEventListener("message",function(evt){
  5. vardate=newDate();
  6. varcurrentDate=null;
  7. do{
  8. currentDate=newDate();
  9. }while(currentDate-date<evt.data);
  10. port.postMessage(currentDate);
  11. },false);
  12. port.start();
  13. },false);

使用SharedWorker對象的後臺代碼須要綁定connect和message事件，connect事件會在頁面上的port被start時觸發。以後的message事件的回調函數與以前的基本相同，最後port調用postMessage方法把結果傳回給頁面。

5.WebWorker使用XMLHttpRequest與服務端通訊

有些狀況下，webworker還須要與服務器進行交互。好比頁面可能須要處理來自數據庫中的信息，咱們就須要使用Ajax技術與服務器交互，下面代碼包含了webworker如何從服務端獲取數據：

[javascript]

  1. addEventListener("message",function(evt){
  2. varxhr=newXMLHttpRequest();
  3. xhr.open("GET","lengthytaskhandler.ashx");
  4. xhr.onload=function(){
  5. postMessage(xhr.responseText);
  6. };
  7. xhr.send();
  8. },false);

上面的代碼向服務端的asp.net服務lengthytaskhandler.ashx發出GET請求。並註冊了獲取數據後的onload事件。下面的代碼是服務端的lengthytaskhandler.ashx:

[csharp]

  1. namespaceWebWorkerDemo
  2. {
  3. publicclassLengthyTaskHandler:IHttpHandler
  4. {
  5. publicvoidProcessRequest(HttpContextcontext)
  6. {
  7. System.Threading.Thread.Sleep(10000);
  8. context.Response.ContentType="text/plain";
  9. content.Response.Write("Processingsuccessful!");
  10. }
  11. publicboolIsReusable
  12. {
  13. get
  14. {
  15. returnfalse;
  16. }
  17. }
  18. }
  19. }

如你所見，ProcessRequest模擬了一個長時間運行的任務，並返回了「Processingsuccessful！」的消息。

6.經過Error事件捕捉錯誤信息

當咱們把愈來愈複雜的邏輯加到WebWorker裏時，錯誤處理機制是必不可少的。而WebWorker偏偏提供了error事件，供開發者捕捉錯誤信息。下面的代碼展現瞭如何綁定error事件：

[javascript]

  1. $("#btnStart").click(function(){
  2. varworker=newWorker("scripts/lengthytask.js");
  3. worker.addEventListener("error",function(evt){
  4. alert("Line#"+evt.lineno+"-"+evt.message+"in"+evt.filename);
  5. },false);
  6. worker.postMessage(10000);
  7. });

如上可見，Worker對象能夠綁定error事件；並且evt對象中包含錯誤所在的代碼文件（evt.filename）、錯誤所在的代碼行數（evt.lineno）、以及錯誤信息（evt.message）。

7.經過terminate()方法終止WebWorker

有些狀況下，咱們可能須要強制終止執行中的WebWorker。Worker對象提供了terminate()來終止自身執行任務，被終止的Worker對象不能被重啓或重用，咱們只能新建另外一個Worker實例來執行新的任務。

總結

WebWorker能夠在後臺執行腳本，而不會阻塞頁面交互。Worker對象分爲兩種：專用式WebWorker和共享式WebWorker：專用式的WebWorker只能被當個頁面使用，而共享式的WebWorker能夠在被多個頁面使用。另外，本文還介紹了WebWorker的錯誤處理機制，以及使用Ajax與服務端交互。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程