网站性能优化(四)利用setTimeout延迟代码执行
众所周知，JavaScript是单线程。当JavaScript和用户界面更新在同一个进程中运行，JavaScript的执行必然会阻止UI更新，反之亦然。
一般，可以通过控制JavaScript执行时间（不超过100毫秒）来尽快更新UI，但是，总是有可能需要处理比较复杂的JavaScript程序，这时，可以采用定时器安排代码延迟执行，其能够帮助你把长时间运行的脚步分解成一系列的小任务。
下面分两个部分讲解：
1. 事件轮询（event loop）
关于事件轮询的帖子很多（比如老阮的http://www.ruanyifeng.com/blog/2014/10/event-loop.html）。
参考下图：
- 所有同步任务在主线程上执行，形成执行栈；
- 一旦触发异步事件，比如，DOM event(点击按钮)，ajax事件，定时器等等，那么，该事件的处理结果（即callback事件）会放在另外一个队列中-任务队列。
- 一旦执行栈中同步任务执行完毕，系统会读取“任务队列”，按照先入先出顺序，依次执行异步任务。
通过事件轮询机制，异步任务是不会阻塞界面更新，允许UI能够尽快的响应后续变化。 多个异步事件是无序执行的的，除了setTimeout/setInterval可以指定延迟时间，其他异步事件都无法确定何时被加入到“任务队列”中。
下面我们专门研究下setTimeout。
2. setTimeout
看一个简单的例子：
var f1 = function(){
console.log('this is setTimeout1!');
};
var f2 = function(){
console.log('this is setTimeout2!');
};
var f3 = function(){
console.log('this is setTimeout3!')
};
var f4 = function(){
console.log('this is setTimeout4!')
};
function func1(){
console.log('this is func1!');
setTimeout(f1, 0);
setTimeout(f2, 200);
console.log('this is func1-end!');
func2();
function func2(){
console.log('this is func2!');
setTimeout(f3, 0);
setTimeout(f4, 100);
console.log('this is func2-end!');
}
}
func1();
// 打印结果
this is func1!
this is func1-end!
this is func2!
this is func2-end!
this is setTimeout1!
this is setTimeout3!
this is setTimeout4!
this is setTimeout2!利用Chrome developer timeline分析JavaScript执行顺序：
timeline1.png
可见，在UI绘制完毕之前，会执行func1函数中的console.log(XXX)，到了UI绘制完毕后，才开始执行第一个setTimeout回调函数-f1。 根据延迟时间的不同，以及执行setTimeout的时间点，会确定异步事件的“任务队列”中的排队顺序。
注意，setTimeout第二个参数表示任务何时被添加到“任务队列”，而不是一定会在这段时间后执行。
timeline2.png
从上图可见，f1在第69.7ms时才被执行，f1执行完之后继续执行f3。
f4和f2的执行时间如下图：
timeline3.png
timeline4.png
3. 小结
根据event loop原理，利用setTimeout可以延迟代码执行，并且不阻塞UI更新。
如果一个JavaScript执行时间非常长，那么我们可以考虑用定时器分解任务，不过，必须满足下面两个条件才适合用setTimeout:
- 处理过程不需要同步
- 数据不需要按顺序处理
伪代码如下：
function saveDocument(id) {
var tasks = [openDocument, writeText, closeDocument, updateUI];
setTimeout(function(){
var task = tasks.shift();
task(id);
if (tasks.length > 0) {
setTimeout(arguments.callee, 25);
}
}, 25);
}腾讯云开发者
