querySelector和getElementById性能分析与使用选择

记得我们在jquery里面得到一个元素要比直接使用javascript中的document.getElementById()等方法好用多了。随着现在浏览器的发展，目前几乎主流浏览器均支持了他们。包括 IE8(含) 以上版本、 Firefox、 Chrome、Safari、Opera。都支持querySelector 和 querySelectorAll 方法是W3C Selectors API规范中定义的。他们的作用是根据 CSS 选择器规范，使用和jquery查询方式一样，便捷定位文档中指定元素。

querySelector 和 querySelectorAll 在规范中定义了如下接口：

module dom { [Supplemental, NoInterfaceObject] interface NodeSelector { Element querySelector(in DOMString selectors); NodeList querySelectorAll(in DOMString selectors); }; Document implements NodeSelector; DocumentFragment implements NodeSelector; Element implements NodeSelector; };

从接口定义可以看到Document、DocumentFragment、Element都实现了NodeSelector接口。即这三种类型的元素都拥有者两个方法。querySelector和querySelectorAll的参数须是符合 css selector 的字符串。不同的是querySelector返回的是一个对象，querySelectorAll返回的一个集合(NodeList)。

也就是所有的节点和document对象都存在此方法调用。用过jquery的同学使用querySelector会觉得异常容易

举例：

1. document.querySelector("body");//放回body节点
   
2. document.querySelector("#k");//返回id为k的节点
   
3. document.querySelector("#k span");//返回id为k的节点下的第一个span节点
   
4. document.querySelector("#k").querySelector("span");//返回id为k的节点下的第一个span节点
   
5. 
   
6. document.querySelectorAll("li");//返回所用tagName为li的节点集合（NodeList）
   
7. document.querySelectorAll("div .li");//返回class为li的div

复制代码

上面的例子使用是不是感觉和jquery一样。

虽然此方法是如此的好。我也很想知道他的性能是否也足够好，让我们来测试看看

1. console.time('querySelector');
   
2. for (var i = 0; i < 100000; i++) {
   
3.   document.querySelector("#wp_editbtns");
   
4. }
   
5. console.timeEnd('querySelector');
   
6. //querySelector: 519ms
   
7. 
   
8. console.time('getElementById');
   
9. for (var i = 0; i < 100000; i++) {
   
10.   document.getElementById("wp_editbtns");
    
11. }
    
12. console.timeEnd('getElementById');
    
13. //getElementById: 491ms

复制代码

你会发现使用getElementById的性能要好些。

然后我们再来试试得到节点集合的数据

1. console.time('querySelectorAll');
   
2. for (var i = 0; i < 10000; i++) {
   
3.   document.querySelectorAll(".menu-top");
   
4. }
   
5. console.timeEnd('querySelectorAll');
   
6. //querySelectorAll: 1781ms
   
7. 
   
8. console.time('getElementsByClassName');
   
9. for (var i = 0; i < 10000; i++) {
   
10.   document.getElementsByClassName("menu-top");
    
11. }
    
12. console.timeEnd('getElementsByClassName');
    
13. //getElementsByClassName: 54ms

复制代码

得到集合时间对比相差巨大。可是现在主流框架，比如jquery，手机上的框架jqmobi等内部实现查找元都是使用的querySelector，等方法，性能低的方法被使用唯一理由就是它用着方便。

总结 ：

• 得到的元素不是需要很麻烦的多次getElementBy..的话，尽量使用getElementBy..,因为他快些。
• 得到的元素需要很麻烦的多次getElementBy..组合才能得到的话使用querySelector，方便。
• 看实际情况，你决定方便优先还是性能优先，
  

转载来源：http://waitstone.sinaapp.com/?p=278