一、什么是 页面阻塞？怎么解决？
页面阻塞：
大多数浏览器是使用单线程处理 UI更新 和 JavaScript 运行等多个任务的，而单线程就意味着同一时间只能由一个任务被执行；JavaScript 加载、解析和运行完，浏览器才能去响应处理其它事情。（不论JavaScript是在内联还是外部引入都一样）
解决方法：
（1）为了让html文档在解析时，尽量地快，常规的做法是将<script>标签放到</body>标签的前面，这样就不会阻塞html中其他资源的下载了。
（2）无阻塞脚本技术，主要分为两大类：
1、 defer和 HTML5中的async；（只对外链有效）
defer模式 <script type="text/javascript" src="x.min.js" defer="defer"></script>
async模式 <script type="text/javascript" src="x.min.js" async="async"></script>
当解析器遇到设置defer或者async属性的<script>元素时，它开始下载脚本，并继续解析文档。脚本会在它下载完成后尽快执行，但是解析器没有停下来等待他下载。
defer：用于开启新的线程下载脚本文件，并使脚本在文档解析完成后执行。
async：HTML5新增属性，用于异步下载脚本文件，下载完毕立即解释执行代码。
2、 动态创建script为dom元素。
(3) ajax:使得页面在等待服务器响应的这段时间内不再发生阻塞，但是这仍然没有改变代码单线程执行的本质。
（3）web worker: 允许JavaScript创建多个线程。
------------------------------------------------------------------------------------------------------------------------------------
二、web worker
1、概念：
单线程：同一时间，只能做一件事。
webWorker（工作线程）：
它允许开发人员编写能够长时间运行而不被用户所中断的后台程序，去执行事务或者逻辑，并同时保证页面对用户的响应。
简而言之，就是允许JavaScript创建多个线程，但是子线程完全受主线程控制，且不得操作DOM。从而，可以用webWorker来处理一些比较耗时的计算。
web worker作用 :
在浏览器中javascript的执行是单线程的，页面上的javascript在执行时会阻塞浏览器的响应，这非常影响用户体验，所以ajax应运而生了。ajax的出现使得页面在等待服务器响应的这段时间内不再发生阻塞，但是这仍然没有改变代码单线程执行的本质，这也意味着我们依旧不能把耗费时间的复杂运算放在页面上执行。而web worker的出现弥补了这个缺点。
页面上单线程执行的javascript是主线程（我们通常写的javascript都在主线程中执行），new出来的web worker对象为子线程，只有主线程中的代码执行时会导致阻塞，子线程则不会，这表示部分耗费时间的复杂运算完全可以从后台挪到前台来完成。
2、Worker对象分为两种？
专用式( dedicated )Web Worker：只能被单个页面使用，专为当前页面服务。
共享式( shared )Web Worker：可以在被多个页面使用。
3、web worker常用API：
1、postMessage(data)
子线程与主线程之间互相通信使用方法，传递的data为任意值。
2、terminate()
主线程中终止worker，此后无法再利用其进行消息传递。注意：一旦terminate后，无法重新启用，只能另外创建。
3、message
当有消息发送时，触发该事件。且，消息发送是双向的，消息内容可通过data来获取。
message使用，可见terminate中的demo
4、error
出错处理。且错误消息可以通过e.message来获取。
注意：worker线程从上到下同步运行它的代码，然后进入异步阶段来对事件及计时器响应，如果worker注册了message事件处理程序，只要其有可能触发，worker就一直在内存中，不会退出，所以通信完毕后得手动在主线程中terminate或者子线程中close掉，但如果worker没有监听消息，那么当所有任务执行完毕（包括计数器）后，他就会退出。
webWorker之常用ＡＰＩ
4、web worker 执行流程：
（1）按钮的点击事件中创建了Worker对象，并给它指定了Javascript脚本文件——demo_worers.js；
（2）并且给Worker对象绑定了一个“message”事件。该事件会在后台代码（demo_workers.js）向页面返回数据时触发。“message”事件可以通过event.data来获取后台代码传回的数据。
（3）将数据追加到页面
例：
<!DOCTYPE html><html><body> <p>Count numbers: <output id="result"></output></p> <button onclick="startWorker()">Start Worker</button> <button onclick="stopWorker()">Stop Worker</button> <input type="text" value=""/><script>varw;
//开始functionstartWorker(){if(typeof(Worker) !=="undefined") {你if(typeof(w) ==="undefined") { w = new Worker("demo_workers.js");} w.onmessage =function(event){ document.getElementById("result").innerHTML =event.data; }; }else{ document.getElementById("result").innerHTML ="Sorry, your browser does not support Web Workers..."; }}
//停止functionstopWorker(){
//强制终止执行中的Web Worker。Worker对象提供了terminate()来终止自身执行任务，被终止的Worker对象不能被重启或重用，我们只能新建另一个Worker实例来执行新的任务。w.terminate();}</script></body></html>
demo_workers.js代码：
function timedCount () {
for (var i = 0; i < 10000000000; i++) {
if (i % 100000 === 0) {
postMessage(i);
}
}
}
timedCount();
注意： web worker 脚本位于外部JS文件中，所以无法访问下列HTML相关的JS 对象。
window 对象
document 对象
parent 对象
sessionStorage、localStorage等
只要是HTML的对象都不能访问 比如不能在web worker中使用H5的sessionStorage等。如果使用则报错 sessionStorage is not define 没有定义
网友评论