jQuery与JavaScript选择器性能问题
怪我咯
怪我咯 2017-04-11 11:38:59
[JavaScript讨论组]
$("#test");
var test = document.getElementById("test");
$(test);

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

怪我咯
怪我咯

走同样的路,发现不同的人生

全部回复(3)
巴扎黑

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

ringa_lee

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

巴扎黑

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

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号