jquery find选择器在不同浏览器下的差异

初步测试,5000个节点的隐藏。

代码如下:

<!doctype html>
<html lang="en">
<head>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div>
        <ul></ul>
    </div>
    <script>
    var html = "";
for(var i=0;i<5000;i++){
  var $m = '<li><a></a></li>';
  html += $m;
}
$("body").find("ul").append(html);
var time = new Date().getTime();
$("body").find("a").hide();
var endtime = new Date().getTime();
console.log("find cost" + (endtime-time));


time = new Date().getTime();
$("body a").hide();
endtime = new Date().getTime();
console.log("find cost" + (endtime-time));</script>
</body>
</html>

 

IE7下find = 501ms,css =731ms

IE11下find = 216ms , css = 32ms

chrome下find = 683ms , css = 93ms

firefox下 find = 285ms , css = 260ms

safari find = 294ms , css= 105ms

可能是因为IE7以下不存在css选择器原生方法,jquery针对此采用的sizzle引擎虽有所优化,但仍不及find方法。

综合来说,现代浏览器(IE6,7除外)在CSS选择节点的执行效率上由于原生方法的优势均不同程度的有所提高。

因此,在使用jquery时,若兼容在IE8以上的,则可以无脑采用css选择器,若考虑到IE6,7,则需要有针对性的使用find() (IE6,7)和 css选择器(IE8及以上)。

参考:http://hi.baidu.com/xujie2453/item/6258f4d8eb315230e3108f3f

posted @ 2014-01-18 12:44  barbabravo  阅读(331)  评论(0编辑  收藏  举报