@ghostcdy
2016-01-29T10:17:56.000000Z
字数 2593
阅读 955
未分类
我们常用打点计时的方式来统计每个过程的耗时。然而,并不是我们想象的那么简单。
基哥说:打点计时应该放在setTimeout中,因为还有事情没做完。
好像是这么个理,but,测试结果出乎预料。
PC采用chrome浏览器,移动端采用iPhone 6 plus + Fiddler + willow代理 + Rosin(log查看)
<!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里。
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对比差距如此巨大,发生了什么?
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
直接测试setTimeout:
var time = Number(new Date());
setTimeout(function(){
console.log(Number(new Date()) - time + 'ms');
},0);
其中一次测试结果
PC
:255ms
iPhone
:14ms
var time = Number(new Date());
setTimeout(function(){
alert(Number(new Date()) - time + 'ms');
},0);
其中一次测试结果
PC
:13ms
iPhone
:14ms
结论:确实控制台在页面初始化后做了些事情。
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
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 | 2 | 3:setTimeout | 4 | 5:onload中的setTimeout |
---|---|---|---|---|---|
IE | 13 | 0 | 23 | 0 | 23 |
Chrome | 1 | 0 | 2 | 0 | 2 |
iPhone | 2 | 0 | 14 | 0 | 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。