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

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

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

下面分两个部分讲解:

1. 事件轮询(event loop)

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

参考下图:


网站性能优化(四)利用setTimeout延迟代码执行_第1张图片
  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执行顺序:

网站性能优化(四)利用setTimeout延迟代码执行_第2张图片
timeline1.png

可见,在UI绘制完毕之前,会执行func1函数中的console.log(XXX),到了UI绘制完毕后,才开始执行第一个setTimeout回调函数-f1。
根据延迟时间的不同,以及执行setTimeout的时间点,会确定异步事件的“任务队列”中的排队顺序。

注意,setTimeout第二个参数表示任务何时被添加到“任务队列”,而不是一定会在这段时间后执行

网站性能优化(四)利用setTimeout延迟代码执行_第3张图片
timeline2.png

从上图可见,f1在第69.7ms时才被执行,f1执行完之后继续执行f3。

f4和f2的执行时间如下图:

网站性能优化(四)利用setTimeout延迟代码执行_第4张图片
timeline3.png
网站性能优化(四)利用setTimeout延迟代码执行_第5张图片
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);
}

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

你可能感兴趣的:(网站性能优化(四)利用setTimeout延迟代码执行)