比较 jquery 选择器的性能
考虑提高 jquery 选择器的性能。那么有什么技巧或文章可以作为最佳的 jquery 选择器吗?例如选择 div 的 id。我可以在网上的任何地方提供 html 并比较可以用来选择所需元素的不同选择器。
Looking at improving the performance of my jquery selectors. so any tips or articles as the best per formant jquery selectors? For example selecting the a div's id. Anywhere online I can provide html and compare the different selectors I can use to select the required element.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(4)
您可以在此处比较选择器性能: http://jsperf.com/
只需设置 HTML,包含 jQuery 并放置每个选择器您想将其作为测试用例进行比较。
这里的许多规则仍然适用,但是 jQuery 1.4.3+ 中的游戏发生了一些变化,之后 Sizzle(jQuery 的选择器引擎)将使用
querySelectorAll()
在支持它的浏览器中。You can compare selector performance here: http://jsperf.com/
Just setup your HTML, include jQuery and place each selector you want to compare as a test case.
Many of the rules here still apply, however the game changed a bit in jQuery 1.4.3+, after that Sizzle (jQuery's selector engine) will use
querySelectorAll()
in browsers that support it.本文详细介绍了 jQuery 选择器及其性能。主要是关于如何正确使用 jQuery。由于许多 jQuery 的使用都围绕选择器,因此本文花费了一些时间来讨论它们。
基本上需要记住以下几点:
getElementById
、getElementsByTagName
)This article goes into some detail about jQuery selectors and their performance. It's mainly about using jQuery the right way. Since a lot of jQuery use revolves around selectors, the article spends some time on them.
Basically a few things to remember:
getElementById
,getElementsByTagName
)这些文章没有解决的一件事是您的出发点是什么。如果您从整个 DOM 树开始,那么这些文章实际上很有用。
但是,如果您有一个元素要开始,那么它取决于您的搜索内容。我的大多数带有 MVC 模板的动态 javascript 倾向于抓取执行操作的元素,然后搜索父对象。这消除了在随机生成容器时对容器进行唯一命名的需要——从动态开发的角度来看,这使得事情变得更加容易。
虽然搜索近父节点可能不如搜索 ID 快,但与生成和跟踪多个唯一 ID 的时间量和/或性能相比,性能应该可以忽略不计。
与发展中的一切一样,“视情况而定”将在这里占据主导地位。
One thing these articles don't address is what your starting point is. If you are starting with the entire DOM tree, then these articles are actually useful.
However, if you have an element to start with, it then depends on what your search is. Most of my dynamic javascript with MVC templates tends to grab the element on which the action is taken, then do a search for parent objects. This eliminates the need to uniquely name a container when they are randomly generated-- makes things a lot easier from a dynamic devlopment standpoint.
While searching for a near-parent node may not be as fast as searching for an ID, the performance should be negligible compared to the amount of time and/or performance of generating and tracking a number of unique IDs.
As with everything in development, "it depends" will reign here.
我注意到很多此类问题仅限于不同 jQuery 选择器之间的性能比较。
我最近看到一篇文章,将 jQuery 选择器与原生 Javascript 选择器进行了比较。
这听起来可能很麻烦,但性能提升是相当可观的。实际上比我想象的还要多。
文章:
http://www.sitepoint.com/jquery-vs- raw-javascript-1-dom-forms/
I notice a lot of these type of questions are restricted to performance comparison between different jQuery selectors.
I recently came across an article that compares jQuery selectors against their native Javascript counterparts.
It might sound like a lot of hassle, but the performance gain is quite substantial. More than I imagined actually.
Article:
http://www.sitepoint.com/jquery-vs-raw-javascript-1-dom-forms/