16f6c0aecf
Inline adoc files when they are included exactly once. Also fix language tags because this inlining gives us better information on what language the code is written in.
77 lines
2.4 KiB
Plaintext
77 lines
2.4 KiB
Plaintext
== Why is this an issue?
|
||
|
||
The use of ``++find++`` allows ``++document.getElementById()++`` to be used for the top-level selection, and saves the jQuery Sizzle engine for where it's really needed. That makes the query faster, and your application more responsive.
|
||
|
||
|
||
From the jQuery documentation:
|
||
|
||
|
||
____
|
||
Beginning your selector with an ID is always best.
|
||
|
||
The ``++.find()++`` approach is faster because the first selection is handled without going through the Sizzle selector engine – ID-only selections are handled using ``++document.getElementById()++``, which is extremely fast because it is native to the browser.
|
||
|
||
____
|
||
|
||
|
||
=== Noncompliant code example
|
||
|
||
[source,javascript]
|
||
----
|
||
var $productIds = $("#products div.id"); // Noncompliant - a nested query for Sizzle selector engine
|
||
----
|
||
|
||
|
||
=== Compliant solution
|
||
|
||
[source,javascript]
|
||
----
|
||
var $productIds = $("#products").find("div.id"); // Compliant - #products is already selected by document.getElementById() so only div.id needs to go through Sizzle selector engine
|
||
----
|
||
|
||
|
||
ifdef::env-github,rspecator-view[]
|
||
|
||
'''
|
||
== Implementation Specification
|
||
(visible only on this page)
|
||
|
||
=== Message
|
||
|
||
Move "XXX" into "find" method.
|
||
|
||
|
||
'''
|
||
== Comments And Links
|
||
(visible only on this page)
|
||
|
||
=== on 17 Mar 2015, 10:47:36 Linda Martin wrote:
|
||
\[~ann.campbell.2] assign for completion and review.
|
||
|
||
=== on 17 Mar 2015, 16:22:52 Ann Campbell wrote:
|
||
\[~linda.martin] it would be nice to have a bit fuller description here discussing what happens if you don't use ``++find++``
|
||
|
||
=== on 25 Mar 2015, 10:24:05 Linda Martin wrote:
|
||
\[~ann.campbell.2] as using ``++find++`` allows not to use Sizzle selector engine for the first selection but ``++document.getElementById()++``, when not using ``++find++`` the whole search will be done with Sizzle engine, which is slower.
|
||
|
||
|
||
*First case*: will do a first fast sort with the ID through native operation (document.getElementById()) then narrows down by launching the Sizzle engine
|
||
|
||
*Second case*: we directly launch the Sizzle engine with the whole request, which is slightly heavier and slower.
|
||
|
||
|
||
It is just a question of performance so when ``++find++`` will be used it will be faster, when not it will be slower.
|
||
|
||
=== on 25 Mar 2015, 14:22:22 Ann Campbell wrote:
|
||
\[~linda.martin] pong...
|
||
|
||
:-)
|
||
|
||
=== on 20 May 2015, 12:30:33 Linda Martin wrote:
|
||
OK!
|
||
|
||
=== on 1 Nov 2019, 17:28:08 Elena Vilchik wrote:
|
||
See \https://github.com/SonarSource/SonarJS/issues/1698
|
||
|
||
endif::env-github,rspecator-view[]
|