I am houbiao beta 0.1

getElementById(ClassName) querySelector jquery 选择器的性能对比及使用推荐

分类:Optimize

利用JS做用户的交互少不了使用选择器,selector,目前IE8(含)以上版本、Firefox、Chrome、Safari、Opera都支持querySelector和querySelectorAll方法,它们是W3C Selectors API规范中定义的,作用是根据CSS选择器规范便捷定位文档中指定元素。使用方法和jQuery很类似。

如上所述我们便拥有了2个原生的选择器和1个当下很流行的jQuery选择器,那么3者的性能差异怎么样呢,谁更胜一筹呢?哪个更适合大量使用呢?我们看图说话(以下从左向右依次为Chrome、Safari、Firefox)。getElementById(ClassName) querySelector jquery 选择器的性能对比及使用推荐

我分别做了选择ID和选择CLASS的测试(测试次数为100000),页面结构中是一个ID为wrap的DIV和一个CLASS为content的DIV。

DEMO - getElementById(ClassName),querySelector,jquery 选择器的性能对比及使用推荐

结果显而易见,原生的JS最快,无论是ID还是CLASS。其次是querySelector,可是在Chrome下却有个列外,Chrome下jQuery的ID选择要比querySelector的ID选择快一倍,而CLASS的选择都一致。这个问题暂时还没搞明白为什么,难道是Chrome的内核对jQuery做了支持?希望高人给予解答。

测试结果是出来了,但是我们都知道,用原生JS来做选择器的时候往往需要的代码就很繁琐了,不如jQuery来的方便,所以这就要根据各位的实际情况来选择使用了,你是注重代码的编写方便还是注重代码的底层效率(话说回来,我们的实际项目中貌似也不会对一个选择器进行100000次的查询)。所以,各位自己斟酌使用吧。

注:本文中浏览器的版本为Chrome:20.0.1132.47-Safari:5.1.7-Firefox:13.0.1

3856 reads 0 comment

上一篇:javascript 数据访问优化之局部变量与全局变量

暂时还没有回复信息

Leave a comment

*