网站性能优化(四)利用setTimeout延迟代码执行

众所周知，JavaScript是单线程。当JavaScript和用户界面更新在同一个进程中运行，JavaScript的执行必然会阻止UI更新，反之亦然。

一般，可以通过控制JavaScript执行时间（不超过100毫秒）来尽快更新UI，但是，总是有可能需要处理比较复杂的JavaScript程序，这时，可以采用定时器安排代码延迟执行，其能够帮助你把长时间运行的脚步分解成一系列的小任务。

下面分两个部分讲解：

1. 事件轮询（event loop）

关于事件轮询的帖子很多（比如老阮的http://www.ruanyifeng.com/blog/2014/10/event-loop.html）。

参考下图：

1. 所有同步任务在主线程上执行，形成执行栈；
2. 一旦触发异步事件，比如，DOM event(点击按钮)，ajax事件，定时器等等，那么，该事件的处理结果（即callback事件）会放在另外一个队列中-任务队列。
3. 一旦执行栈中同步任务执行完毕，系统会读取“任务队列”，按照先入先出顺序，依次执行异步任务。

通过事件轮询机制，异步任务是不会阻塞界面更新，允许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:

1. 处理过程不需要同步
2. 数据不需要按顺序处理

伪代码如下：

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

---

更多高阶内容，可移步《小专栏-娜姐聊前端》。