选择器和性能
当我在 Mootools（或任何框架，真的）中执行以下操作时，对性能有什么好处吗？：
var elem = $('#elemId');
elem.addClass('someClass');
elem.set('some attribute', 'some value');
等等，等等。基本上，我在 DOM 上大量更新某些元素，我想知道是否在内存中创建一个变量并在需要时使用它比：
$('#elemId').addClass('someClass');
$('#elemId').set('some attribute', 'some value');
对 $('#elemId') 的更改遍布各处，在各种不同的函数中。
Is there any benefit to performance when I do the following in Mootools (or any framework, really)?:
var elem = $('#elemId');
elem.addClass('someClass');
elem.set('some attribute', 'some value');
etc, etc. Basically, I'm updating certain elements a lot on the DOM and I was wondering if creating a variable in memory and using that when needed was better than:
$('#elemId').addClass('someClass');
$('#elemId').set('some attribute', 'some value');
The changes to $('#elemId') are all over the place, in various different functions.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（5）
您正在考虑使用局部变量来缓存可能较慢的查找的值。
调用本身有多慢？如果速度很快，缓存不会产生太大影响。如果速度很慢，则在第一次调用时进行缓存。选择器的成本差异很大——只需考虑一下代码必须如何优化元素即可。如果它是 ID，则浏览器提供快速访问，而类和节点可能需要完整的 DOM 扫描。查看jQuery (Sizzle) 选择器分析来了解这些。
您可以链接调用吗？尽可能考虑“链接”方法调用。这提供了效率而无需引入另一个变量。
对于您的示例，我会写：
代码如何读取？ 通常，如果要多次调用同一方法，则将其干燥并使用局部变量会更清楚。然后，读者可以更好地理解其意图——您不必强迫他们扫描所有 jQuery 调用来验证它们是否相同。顺便说一句，一个相当标准的约定是以 $ 开头的 jQuery 变量命名——这在 Javascript 中是合法的——就像
希望这会有所帮助。
You are considering using a local variable to cache a value of a potentially slow lookup.
How slow is the call itself? If it's fast, caching won't make much a difference. If it's slow, then cache at the first call. Selectors vary significantly in their cost-- just think about how the code must fine the element. If it's an ID, then the browser provides fast access, whereas classes and nodes my require full DOM scans. Check out profiling of jQuery (Sizzle) selectors to get a sense of these.
Can you chain the calls? Consider "chaining" method calls where possible. This provides the efficiency without introducing another variable.
For your example, I'd write:
How does the code read? Usually if the same method is going to be called multiple times, it is clearer to DRY it up, and use a local variable. The reader then understands the intent better-- you don't force them to scan all the jQuery calls to verify that they are the same. BTW, a fairly standard convention is to name jQuery variables starting with a $-- which is legal in Javascript-- as in
Hope this helps.
根据具体情况，缓存可以比每次使用 jQuery 对象快 99%。在您提出的情况下，这不会有太大区别。如果您打算多次使用选择器，那么您绝对应该将对象缓存为变量，这样就不会在每次运行它时都创建它。
类似的问题在 是否使用 $this 而不是$(this) 提供性能增强？。
检查性能日志 http://jsperf.com/jquery-this-vs-this
Depending on the situation, caching can be as much as 99% faster then using a jQuery object every time. In the case you presented it will not make much difference. if you plan to use the selector many times, you should definitely cache the object as a variable so it doesn't get created everytime you run it.
A similar questions was answered at Does using $this instead of $(this) provide a performance enhancement?.
Check performance log http://jsperf.com/jquery-this-vs-this
第一种方法比第二种方法更快，因为您在
#elemId上“缓存”了搜索。这意味着对
addClass和set的调用不需要在 DOM 中为您的元素进行额外的查找。然而！您可以链接函数调用：
根据您的应用程序，
缓存或链接可能效果更好，但绝对不会在同一块中进行相同的顺序查找。You first approach is faster then your second approach, because you "cache" the search on
#elemId.Meaning the calls to
addClassandsetdon't require extra lookups in the DOM for your element.However! You can link function calls:
Depending on your application
cachingorlinkingmight work better, but definitely not identical sequential lookups in the same block.这取决于你如何查询 dom。通过 ID 进行查找的速度非常快。其次是 css 类。因此，只要您仅使用单个 ID（而不是包含 id 的复杂选择器）来执行此操作，就不会有太大好处。但是，如果您使用任何其他选择器，则可以使用缓存。
http://code.google.com/speed/page-speed /docs/rendering.html#UseEfficientCSSSelectors
https://developer.mozilla.org/en/Writing_Efficient_CSS
It depends how you query the dom. Lookups by ID are extremely fast. Second most is css classes. So as long as you're doing it by only a single ID (not a complex selector containing an id), there shouldn't be much of a benefit. However, if you're using any other selector, caching is the way to go.
http://code.google.com/speed/page-speed/docs/rendering.html#UseEfficientCSSSelectors
https://developer.mozilla.org/en/Writing_Efficient_CSS
Spencer，
这就是所谓的缓存，它是最佳实践之一。
当你说它
每次都会去查询 DOM 时，所以如果你说
elem 充当缓存元素并大大提高性能。
这在 IE 中非常有用，因为它有内存泄漏问题，并且所有
准备好的文档都非常好
http://net.tutsplus.com/tutorials/javascript-ajax/14-helpful-jquery-tricks-notes-and-best-practices/
Spencer ,
This is called caching and it is one of the best practices.
when you say
It will go and query the DOM everytime , so if you say
elem acts as a cache element and improves performance a lot.
This is manly useful in IE as it has memory leaks promblem and all
ready this document which is really good
http://net.tutsplus.com/tutorials/javascript-ajax/14-helpful-jquery-tricks-notes-and-best-practices/