<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.hight{
color:red;
}
.light{
color:blue;
}
</style>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<script>
function logTime(cb){
console.time('logTime');
if(typeof cb==='function'){
for(var i=0;i<10000;i++){
cb();
}
}
console.timeEnd('logTime');
}
$(function(){
logTime(function(){
$("ul li:even").addClass('light');//slow 572ms
})
logTime(function(){
$("ul li:nth-child(odd)").addClass('hight');//better 387ms 正常
})
logTime(function(){
$(document.querySelectorAll("ul li:nth-child(odd)"));//better 控制台时间在我这158.00ms
})
logTime(function(){
document.querySelectorAll("ul li:nth-child(odd)");//best 控制台时间在我这47.00ms 正常
})
logTime(function(){
$('div ul li.item2');//slow 126ms
})
logTime(function(){
$('li.item2');//better 120ms 正常
})
logTime(function(){
$('.list li.item2');//slow 123ms
})
logTime(function(){
$('#list li.item2');//better 124ms 异常 ：怎么比类还要慢1ms
})
logTime(function(){
$('ul.list .item2');//slow 控制台时间在我这121.00ms
})
logTime(function(){
$('.list li.item2');//better 控制台时间在我这137.00ms 异常 怎么这个具体的还比不具体的还慢呢。
})
})
</script>
</head>
<div>
<ul id="list" class="list">
<li class="item2">list1</li>
<li class="item1">list2</li>
<li>list3</li>
<li>list4</li>
<li>list5</li>
<li>list6</li>
<li>list7</li>
<li>list8</li>
</ul>
</div>
这里我在控制台看到的 console.Time 看到的时间slow比better 快怎么回事啊
相关分类