javascript - jquery dom操作性能
ringa_lee
ringa_lee 2017-04-10 17:05:55
[JavaScript讨论组]

背景

在代码review的时候,遇到了个问题,请大神指导下
个人代码中有多处dom操作。
类似:
获取模块:$("#all")
多次获取a:$("#a")
多次获取b:$("#b")

老大给出两个建议:

  • 多次使用的dom,保存
    var aObj = $("#a");

  • 对于a,b,c都在all中操作。要首先保存all,减少全局检索
    var viewObj = $("#all");
    var aObj = $("#a",viewObj)

问题来了

两个建议理论上都木有问题,但是,第二种实现方式

var aObj = $("#a",viewObj)

这个会在viewObj 内部检索吗?jquery 有相关资料吗?

ringa_lee
ringa_lee

ringa_lee

全部回复(6)
怪我咯

$() 这个方法完全体是这样的:

jQuery([selector,[context]])

第二个参数可选, 它是selector的查找范围, 如果未指定, 可以理解为查找范围就是document

下面两个会查找到同样的dom集合:

$('.parent .child')
$('.child','.parent')

这两个参数都可以接受字符串,dom元素,jquery对象作为参数。
相关资料可以直接看jqueryAPI,核心方法第一个就是。

高洛峰

http://www.css88.com/jqapi-1.9/jQuery/

黄舟

jQuery( selector [, context ] ) 用法的官方的说明:

Selector Context
By default, selectors perform their searches within the DOM starting at the document root. However, an alternate context can be given for the search by using the optional second parameter to the $() function. For example, to do a search within an event handler, the search can be restricted like so:

$( "p.foo" ).click(function() {
 $( "span", this ).addClass( "bar" );
});

When the search for the span selector is restricted to the context of this, only spans >within the clicked element will get the additional class.
Internally, selector context is implemented with the .find() method, so $( "span", this ) is equivalent to $( this ).find( "span" ).

意思是会在指定的Context,也就是指定的DOM元素内查找;jquery内部使用find方法来实现

怪我咯

先说 结论 如果是仅仅是id选择器, 也就是楼主问的

var aObj = $("#a")
var aObj = $("#a",viewObj)

第一种效率高,因为第一种直接 document.getElementById
https://github.com/jquery/jquery/blob/master/src/core/init.js#L77

第二种 走的是jQuery.find jQuery.find = Sizzle ,
https://github.com/jquery/jquery/blob/master/src/core/init.js#L90
https://github.com/jquery/jquery/blob/master/src/core/init.js#L95
https://github.com/jquery/jquery/blob/5943f1d7ffef41cc1a99bffe189f6d111fbccfd0/src/selector-sizzle.js#L6

jQuery源码
https://github.com/jquery/jquery/blob/master/src/core/init.js#L16

// Shortcut simple #id case for speed
rquickExpr = /^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]+))$/
rquickExpr.exec('#a') // ["#a", undefined, "a"]
rquickExpr.exec('.a') // null
rquickExpr.exec('#a .a') // null
rquickExpr.exec('<p id="a"></p>') // ["<p id="a"></p>", "<p id="a"></p>", undefined]

rquickExpr macth 单一id选择器,或者html tag

Sizzle
https://github.com/jquery/jquery/blob/5943f1d7ffef41cc1a99bffe189f6d111fbccfd0/external/sizzle/dist/sizzle.js#L132

// Easily-parseable/retrievable ID or TAG or CLASS selectors
rquickExpr = /^(?:#([\w-]+)|(\w+)|\.([\w-]+))$/,
rquickExpr.exec('#a') // ["#a", "a", undefined, undefined]
rquickExpr.exec('.a') // null
rquickExpr.exec('#a .a') // null
rquickExpr.exec('<p id="a"></p>') // null
高洛峰
var $aaa = $('#aaa');

var $bbb = $aaa.find('.bbb');    // 多次使用
$aaa.find('.ccc');                // 一次使用

因为$()是个方法,是方法就会有执行时间

巴扎黑

每次$()起来保存给变量使用

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

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