扫码关注官方订阅号
$("#test");
var test = document.getElementById("test"); $(test);
这两种方法的性能区别在哪里?
走同样的路,发现不同的人生
从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包装,与上面相比省去了一些多余的查找匹配过程,故速度更快一点。但是用原生方法还是最快的
基本可以说是原生的快,同平台同浏览器下的话。dom的管理肯定是浏览器自己提供的,jq只可能内部调用findelementbyid。封装了一层,总会有性能损失
jQuery的选择器是被包装过的,解决了不同浏览器之间的兼容性问题,所以就性能来说,肯定不如原生的快。
微信扫码关注PHP中文网服务号
QQ扫码加入技术交流群
Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
PHP学习
技术支持
返回顶部
从jquery源码的角度分析:
1.$('#test')
进入jquery.fn.的执行上下文后
2.var test = document.getElementById("test");
$(test);
这里直接用原生方法获取dom赋值给test再用jquery包装,与上面相比省去了一些多余的查找匹配过程,故速度更快一点。但是用原生方法还是最快的
基本可以说是原生的快,同平台同浏览器下的话。
dom的管理肯定是浏览器自己提供的,jq只可能内部调用findelementbyid。封装了一层,总会有性能损失
jQuery的选择器是被包装过的,解决了不同浏览器之间的兼容性问题,所以就性能来说,肯定不如原生的快。