jQuery与JavaScript选择器性能问题

Question

$("#test");

var test = document.getElementById("test");
$(test);

这两种方法的性能区别在哪里？

Answer 1

从jquery源码的角度分析：
1.$('#test')
进入jquery.fn.的执行上下文后

                    // Handle $(""), $(null), or $(undefined) 
                    if (!selector) { //首先会判断是否传入选择器
                        return this;
                    }

                    // Handle $(DOMElement) 
                    if (selector.nodeType) {//如果selector有nodeType属性,则认为selector是DOM元素
                        this.context = this[0] = selector;
                        this.length = 1;
                        return this;
                    }

                    // The body element only exists once, optimize finding it
                    if (selector === "body" && !context && document.body) { //如果选择器是body
                        this.context = document;
                        this[0] = document.body;
                        this.selector = selector;
                        this.length = 1;
                        return this;
                    }
                  if (typeof selector === "string") { //开始匹配
                      //more code
                      // HANDLE: $(html) -> $(array)
                      if (match[1]) {
                           //more code
                      }else{
                          elem = document.getElementById(match[2]); //直到运行到这里才找到匹配项，
                      }
                      
                  }  

2.var test = document.getElementById("test");
$(test);
这里直接用原生方法获取dom赋值给test再用jquery包装，与上面相比省去了一些多余的查找匹配过程，故速度更快一点。但是用原生方法还是最快的

Answer 2

基本可以说是原生的快，同平台同浏览器下的话。
dom的管理肯定是浏览器自己提供的，jq只可能内部调用findelementbyid。封装了一层，总会有性能损失

Answer 3

性能区别在，jQuery先调用自己的方法，自己的方法再调用document.getElementById("test");
但是调用之前会有一堆判断，看是传入了class，标签名，还是什么东西，这堆判断必然会影响速度。

参考资料：
http://www.cnblogs.com/aaronjs/p/3281911.html

Answer 4

jQuery的选择器是被包装过的，解决了不同浏览器之间的兼容性问题，所以就性能来说，肯定不如原生的快。