setTimeout和Web Workers解决耗时操作

众所周知javascript是单线程的，特点就是容易出现阻塞。如果一段程序处理时间很长，很容易导致整个页面hold住。什么交互都处理不了怎么办？

复杂逻辑后端处理
html5的Web Workers
setTimeout

1.setTimeout

  
  


 this is a header

arguments.callee

---

2.工作线程Web Workers

Web Workers

Web Worker的基本原理就是在当前javascript的主线程中，使用Worker类加载一个javascript文件来开辟一个新的线程，起到互不阻塞执行的效果，并且提供主线程和新线程之间数据交换的接口：postMessage，onmessage。

index.html

 this is a header

fibonacci.js

var fibonacci =function(n) {
    return n <2? n : arguments.callee(n -1) + arguments.callee(n -2);
};

onmessage =function(event) {
    var n = parseInt(event.data, 10);
    postMessage(fibonacci(n));
};

结果：

res.png

WebWorker 可以做什么:

(1)可以加载一个JS进行大量的复杂计算而不挂起主进程，并通过postMessage，onmessage进行通信
(2)可以在worker中通过importScripts(url)加载另外的脚本文件
(3)可以使用 setTimeout(), clearTimeout(), setInterval(), and clearInterval()
(4)可以使用XMLHttpRequest来发送请求

说明：Ajax 和 Web Worker 都是异步执行的，似乎没有必要在Web Worker里调用Ajax，如果存在这种情况，Ajax 需要按照一个队列里数据排列的顺序同步发送请求，如果不想页面被阻塞，这种情况下可以使用Web Worker 并且需要在Web Worker里使用Ajax。

局限性：

(1)Web Worker 不支持跨域
(2)worker内不能访问DOM
(3)各个浏览器对Worker的实现不大一致，例如FF里允许worker中创建新的worker,而Chrome中就不行
(4)无法访问 LocalStorage,和对 dom 元素的限制一样，因为读写 LocalStorage 是同步的，一定会引起 race condition

---

参考
浅析H5新增的Webworker对象

其他
HTML5 之 Web Worker
深入 HTML5 Web Worker 应用实践：多线程编程
WebWorker实战使用
聊聊 webworker