什麼是 Web Worker?

來源:酷知科普網 1.64W

好多人不知道什麼是Web Worker,今天我就和大家說一說

什麼是 Web Worker?

操作方法

(01)web worker 是執行在後臺的 JavaScript,不會影響頁面的效能。

什麼是 Web Worker? 第2張

(02)什麼是 Web Worker?當在 HTML 頁面中執行指令碼時,頁面的狀態是不可響應的,直到指令碼已完成。

什麼是 Web Worker? 第3張

(03)web worker 是執行在後臺的 JavaScript,獨立於其他指令碼,不會影響頁面的效能。您可以繼續做任何願意做的事情:點選、選取內容等等,而此時 web worker 在後臺執行。

什麼是 Web Worker? 第4張

(04)檢測 Web Worker 支援在建立 web worker 之前,請檢測使用者的瀏覽器是否支援它:if(typeof(Worker)!=="undefined")  {  // Yes! Web worker support!  // Some code.....  }else  {  // Sorry! No Web Worker support..  }

什麼是 Web Worker? 第5張

(05)建立 web worker 檔案現在,讓我們在一個外部 JavaScript 中建立我們的 web worker。在這裡,我們建立了計數指令碼。該指令碼儲存於 "demo_" 檔案中:var i=0;function timedCount(){i=i+1;postMessage(i);setTimeout("timedCount()",500);}timedCount();

什麼是 Web Worker? 第6張

(06)以上程式碼中重要的部分是 postMessage() 方法 - 它用於向 HTML 頁面傳回一段訊息。註釋:web worker 通常不用於如此簡單的指令碼,而是用於更耗費 CPU 資源的任務。

什麼是 Web Worker? 第7張

(07)建立 Web Worker 物件我們已經有了 web worker 檔案,現在我們需要從 HTML 頁面呼叫它。下面的程式碼檢測是否存在 worker,如果不存在,- 它會建立一個新的 web worker 物件,然後執行 "demo_" 中的程式碼:if(typeof(w)=="undefined")  {  w=new Worker("demo_");  }

什麼是 Web Worker? 第8張
熱門標籤