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);