性能优化之快速响应的用户界面

用于执行JavaScript和更新用户界面的进程通常被称为“浏览器UI线程”。JavaScript和用户界面更新在同一个进程中运行，因此一次只能处理一件事情。

·任何JavaScript任务都不应当执行超过100毫秒，过长的运行时间导致UI更新出现明显延迟，从而会影响用户体验。

·浏览器有两类限制JavaScript任务的运行时间的机制，调用栈大小限制（即记录自脚本开始以来执行的语句的数量）和长时间运行脚本限制（记录脚本执行的总时长，超时的时候会有弹框提示用户[chrome没有单独的程云霞脚本限制，替代做法是依赖其通用奔溃检测系统来处理此类问题]）。

一些优化JavaScript任务时间的常见做法：

①使定时器让出时间片段

1.使用定时器处理数组。当处理过程不须同步，数据不须按顺序处理时。即可考虑用定时器分解任务。

如：

function processArray(items,process,callback){
    var todo = items.concat();
 
    setTimeout(function(){
       process(todo.shift());
 
       if(todo.length > 0){
         setTimeout(arguments.callee,25);
       } else {
         callback(items); 
       }
    },25);
}
 
var items = [1,2,3];
function output(value){
  console.log(value);
}
 
processArray(items,outputValue,function(){
  console.log('finished output!')
});

②分割任务

如果一个函数的运行时间过长，那么可以把它拆分为一系列能在较短时间内完成的子函数。

如：

function multistep(steps,args,callback){
    var tasks = steps.concat();
 
    setTimeout(function(){
       var task = tasks.shift();
       task.apply(null,args||[]);
 
       if(tasks.length > 0){
         setTimeout(arguments.callee,25);
       } else {
         callback(); 
       }
    },25);
}
 
function saveDocument(id){
  var tasks = [open,write,close];
  multistep(tasks,[id],function(){
  console.log('finished!');
 })
}

③记录代码的运行时间

有时每次只执行一个任务的效率不高，且在两次之间产生25ms的延迟就更不好了。所以可以添加时间检测机制来改进processArray()方法。

如：

function timeProcessArray(items,process,callback){
    var todo = items.concat();
 
    setTimeout(function(){
       var start = +new Date();
       do{
         process(todo.shift());
       }while(todo.length > 0 &&(+new Date() - start < 50)) ;
 
       if(todo.length > 0){
         setTimeout(arguments.callee,25);
       } else {
         callback(items); 
       }
    },25);
}