Skip to content

Commit 6734d23

Browse files
committed
Speed of selectors
Selectors of the form tag#id.class are not fast selectors and can not be processed very quickly. They are working with O(n) so fix confusion in the documentation.
1 parent c15623e commit 6734d23

File tree

1 file changed

+1
-1
lines changed

1 file changed

+1
-1
lines changed

entries/on.xml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,7 @@ $( "button" ).on( "click", {
8888
<h2 id="event-performance">Event performance</h2>
8989
<p>In most cases, an event such as <code>click</code> occurs infrequently and performance is not a significant concern. However, high frequency events such as <code>mousemove</code> or <code>scroll</code> can fire dozens of times per second, and in those cases it becomes more important to use events judiciously. Performance can be increased by reducing the amount of work done in the handler itself, caching information needed by the handler rather than recalculating it, or by rate-limiting the number of actual page updates using <code>setTimeout</code>.</p>
9090
<p>Attaching many delegated event handlers near the top of the document tree can degrade performance. Each time the event occurs, jQuery must compare all selectors of all attached events of that type to every element in the path from the event target up to the top of the document. For best performance, attach delegated events at a document location as close as possible to the target elements. Avoid excessive use of <code>document</code> or <code>document.body</code> for delegated events on large documents.</p>
91-
<p>jQuery can process simple selectors of the form <code>tag#id.class</code> very quickly when they are used to filter delegated events. So, <code>"#myForm"</code>, <code>"a.external"</code>, and <code>"button"</code> are all fast selectors. Delegated events that use more complex selectors, particularly hierarchical ones, can be several times slower--although they are still fast enough for most applications. Hierarchical selectors can often be avoided simply by attaching the handler to a more appropriate point in the document. For example, instead of <code>$( "body" ).on( "click", "#commentForm .addNew", addComment )</code> use <code>$( "#commentForm" ).on( "click", ".addNew", addComment )</code>.</p>
91+
<p>Delegated events that use complex selectors, particularly hierarchical ones, can be several times slower than selectors of the form <code>tag#id.class</code>. Hierarchical selectors can often be avoided simply by attaching the handler to a more appropriate point in the document. For example, instead of <code>$( "body" ).on( "click", "#commentForm .addNew", addComment )</code> use <code>$( "#commentForm" ).on( "click", ".addNew", addComment )</code>.</p>
9292
<h2 id="additional-notes">Additional notes</h2>
9393
<p>There are shorthand methods for some events such as <a href="/click/"><code>.click()</code></a> that can be used to attach or trigger event handlers. For a complete list of shorthand methods, see the <a href="/category/events/">events category</a>.</p>
9494
<p><em>Deprecated in jQuery 1.8, removed in 1.9:</em> The name <code>"hover"</code> used as a shorthand for the string <code>"mouseenter mouseleave"</code>. It attaches a <em>single event handler</em> for those two events, and the handler must examine <code>event.type</code> to determine whether the event is <code>mouseenter</code> or <code>mouseleave</code>. Do not confuse the "hover" pseudo-event-name with the <a href="/hover/"><code>.hover()</code></a> method, which accepts <em>one or two</em> functions.</p>

0 commit comments

Comments
 (0)