@ghostcdy 2016-01-29T10:17:56.000000Z 字数 2593 阅读 1097

性能打点引发的命案

未分类

问题：

我们常用打点计时的方式来统计每个过程的耗时。然而，并不是我们想象的那么简单。
基哥说：打点计时应该放在setTimeout中，因为还有事情没做完。
好像是这么个理，but，测试结果出乎预料。

实验：

PC采用chrome浏览器，移动端采用iPhone 6 plus + Fiddler + willow代理 + Rosin（log查看）

A：渲染10000个节点测试代码：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>A</title>
</head>
<body>
<div id="inner"></div>
<script>
    console.time('A');
    render(10000);
    console.timeEnd('A');
    //渲染节点
    function render(max){
        var a = '';
        for (var i = 0; i < max; i++) {
            a += '<li>' + i + '</li>';
        }
        document.getElementById('inner').innerHTML = '<ul>' + a + '</ul>';
    }
</script>
</body>
</html>

其中一次测试结果
PC：16.949ms
iPhone：59ms
ps:好像挺快的。
基哥说，这个打点不对，应该放在setTimeout里。

B：打点放在setTimeout里

var time = Number(new Date());
render(10000);
setTimeout(function(){
    console.log(Number(new Date()) - time + 'ms');
},0);
//渲染节点
function render(max){
    var a = '';
    for (var i = 0; i < max; i++) {
        a += '<li>' + i + '</li>';
    }
    document.getElementById('inner').innerHTML = '<ul>' + a + '</ul>';
}

其中一次测试结果
PC：504ms
iPhone：5593ms
和A对比差距如此巨大，发生了什么？

C：寻找渲染到setTimeout中间做了什么，让渲染异步试试

setTimeout(function(){
    var time = Number(new Date());
    render(10000);
    setTimeout(function(){
        console.log(Number(new Date()) - time + 'ms');
    },0);
},0);
//渲染节点
function render(max){
    var a = '';
    for (var i = 0; i < max; i++) {
        a += '<li>' + i + '</li>';
    }
    document.getElementById('inner').innerHTML = '<ul>' + a + '</ul>';
}

其中一次测试结果
PC：203ms
iPhone：5943ms

D：setTimeout做了什么？

直接测试setTimeout：

var time = Number(new Date());
setTimeout(function(){
    console.log(Number(new Date()) - time + 'ms');
},0);

其中一次测试结果
PC：255ms
iPhone：14ms

E: 关闭控制台,关闭插件换IE试试

var time = Number(new Date());
setTimeout(function(){
    alert(Number(new Date()) - time + 'ms');
},0);

其中一次测试结果
PC：13ms
iPhone：14ms
结论：确实控制台在页面初始化后做了些事情。

F: 再次重新测试渲染10000个节点

var time = Number(new Date());
render(10000);
setTimeout(function(){
    alert(Number(new Date()) - time + 'ms');
},0);
//渲染节点
function render(max){
    var a = '';
    for (var i = 0; i < max; i++) {
        a += '<li>' + i + '</li>';
    }
    document.getElementById('inner').innerHTML = '<ul>' + a + '</ul>';
}

其中一次测试结果
PC：134ms
iPhone：8156ms

G：测试页面加载的过程

var time = [Number(new Date())];
//A位置
//render(10000);
window.onload = function(){
    time[1] = Number(new Date());
    //B位置
    setTimeout(function(){
        //C位置
        time[5] = Number(new Date());
        print();
    },0);
};
time[2] = Number(new Date());
//D位置
setTimeout(function(){
    //E位置
    time[3] = Number(new Date());
},0);
time[4] = Number(new Date());
function print(){
    var t = '', len = time.length;
    for(var i = 1; i < len; i++){
        t += '【' + i + '】:' + (time[i] - time[0]) + ';';
    }
    alert(t);
}
//渲染节点
function render(max){
    var a = '';
    for (var i = 0; i < max; i++) {
        a += '<li>' + i + '</li>';
    }
    document.getElementById('inner').innerHTML = '<ul>' + a + '</ul>';
}

其中一次结果：

终端	1：onload	3:setTimeout	5:onload中的setTimeout
IE	13	23	23
Chrome	1	2	2
iPhone	2	14	14

IE中不同位置渲染10000个节点：

IE中位置	1：onload	2	3:setTimeout	4	5:onload中的setTimeout
A	121	62	131	63	131
B	12	0	129	0	129
C	12	0	22	0	84
D	121	0	132	60	132
E	11	0	70	0	70

渲染过程是密集型运算，会阻塞setTimeout。