性能优化

引言

性能优化本质来说就是怎样让用户体验更好。之前同事分享过一个关于体验的时间标准,我感觉蛮有趣的,就是说我们尽量让交互响应在0.1秒内,这时体验比较好;如果1秒左右就需要loading;如果10秒左右就需要一个进度条。性能优化不是银弹,在程序做不到0.1内响应的时候,外在辅助措施就很必要。接下总结一些性能优化点,虽不常规,但蛮有意义的。

200 or 304

在sg上回答相关问题时,我较深入的研究了一下,并结合自己的在工作中出现的相关现象做一下总结。我们线上js和css的max-age只有15分钟,所以很容易进行freshness校验,此时就会出现304,但是这就浪费性能了,虽然比较微小。最好的办法是设置一个很长的时间,然后使用版本控制的方法。

webworker

如果主线程需要进行一些耗时操作，时间长了之后浏览器会有假死状态（弹框提示，是否关闭），但是异步拆分操作或者使用webworker的方式，可以使主线程继续能接收到用户的相应。下面是我写的一个demo示例。

var worker=new Worker('./work.js');
var data1=0;
worker.onmessage=function (event) {
    var data = event.data;
    data2 = new Date().getTime();
    document.getElementById("result").innerHTML ="workers 耗时："+ (data2 - data1)+"ms"+"<hr/>" +data;
}
function cal() {
    data1 = new Date().getTime();
    worker.postMessage(limit);
}
------------------work.js
onmessage = function(event){
    var num = event.data;
    console.log(num)
    var i=0,sum=0;
    while (i<num){
        i++;
        sum=i+2*i+sum;
    }

    postMessage(sum);
};

内联css

减少关键路径往返次数,可以使用内联的方式提升性能,如果你使用webpack的话,去掉ExtractTextPlugin配置,但需损失一些代码的可维护性。上次参加qcon时,记得一位主讲人讲述百度移动端优化时就是这么的。所以这种行为还是有一定借鉴意义的。