首页 > jQuery与JavaScript选择器性能问题

jQuery与JavaScript选择器性能问题

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

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


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


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

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


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


从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包装,与上面相比省去了一些多余的查找匹配过程,故速度更快一点。但是用原生方法还是最快的

【热门文章】
【热门文章】