web worker 實踐

1.web worker

　　在瀏覽器中JavaScript主線程與UI渲染線程是互斥的。即UI渲染線程會阻塞JavaScript線程的運行。

　　web worker容許建立工做線程，並能夠與JavaScript主線程同時運行，可讓一些佔用大量計算資源的計算在worker線程上運行。

　　worker線程的出現是爲了，大量的計算佔用javascript 主線程，致使 DOM操做阻塞。worker  線程一旦新建成功，就會一直運行，有利於隨時響應主線程的通訊，但這也會形成worker 線程比較消耗資源，因此在使用完成時，應該當即結束 worker 線程。

　　出於安全和性能的考慮，worker 線程的運行有一下限制：

 　　（1）同源限制

　　　　分配給worker線程，運行的腳本文件，必須與主線程腳本文件同源。

　　（2）DOM 操做限制

　　　　worker 的執行上下文是一個最小化的運行環境，沒有 DOM，window ，parent 等全局對象，只有最小化的 navigator,和只讀的 location對象。

　　（3）通訊聯繫

　　　　因爲worker 與主線程的執行上下文不一樣，因此worker 線程與主線程之間的通訊，只能經過 postMessage 來完成。

　　（4）腳本限制

　　　　worker線程不能執行 alter()，confirm(),方法，可是可使用 XMLHttpRequert 對象發出 Ajax 請求。

　　（5）文件限制

　　　　worker 線程沒法讀取本地文件，它所加載的腳本必須來自網絡，即不能打開本地文件系統（file://)。<1>因爲 worker 須要一個 js文件來建立線程，而es6 中的模塊沒法直接引入一個js文件，因此在如今的 單頁面應用中須要建立 worker 線程須要，引入 worker-loader 插件。worker-loader 加載js文件 來建立 worker。<2>因爲worke線程中使用的文件必須來自網絡，因此在 worker 線程中引入腳本或者庫，須要 經過 importSript()來加載對應的腳本或者庫。可是 webpack 打包後的應用模塊，成爲了一個個 chunk ,是沒法經過對應的路徑加載到對應的模塊的，這時在應用來我worker-loader 的狀況下，能夠經過 require()或者 import 來加載對應的庫，而不是經過 importScript().

　　javaScript 容許主線程把二進制直接轉移給子線程，可是一旦轉移，主線程就沒法使用這些二進制數據，這是爲了防止不一樣線程同時修改數據會形成數據不一致性問題。

　　

 1 //主線程與worker線程之間的通訊
 2 //worker 能夠利用XMLHttpRequest加載文件，
 3 
 4 var worker = new worker('js/worker.js');  5 worker.postMessage(args);  6 worker.onmessage = function(event){  7      document.getElementById('result').textContent = event.data;};
　　worker.terminate() // 結束 worker線程  8 
 9 //workerjs
10 onmessage = function(e){ 11     var calcuResult = e.data; 12      for(var i=0;i<1000;i++) 13             calcuResult+=i; 14 } 15 postMessage(calcuResult);