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