Selector: Leverage the :scope pseudo-class where possible #453
Conversation
mgol
force-pushed the
mgol:cssScope
branch
2 times, most recently
from
4662d2b
to
53b7f5d
|
+47 bytes as of 53b7f5d. |
mgol
force-pushed the
mgol:cssScope
branch
4 times, most recently
from
b79a069
to
59d5c24
The `:scope` pseudo-class[1] has surprisingly good browser support: Chrome, Firefox & Safari have supported if for a long time; only IE & Edge lack support. This commit leverages this pseudo-class to get rid of the ID hack in most cases. Adding a temporary ID may cause layout thrashing which was reported a few times in [the past. We can't completely eliminate the ID hack in modern browses as sibling selectors require us to change context to the parent and then `:scope` stops applying to what we'd like. But it'd still improve performance in the vast majority of cases. [1] https://developer.mozilla.org/en-US/docs/Web/CSS/:scope Fixes jquery/jquery#4453 Ref jquery/jquery#4454 Ref jquery/jquery#4332 Ref gh-405
mgol
added a commit
to mgol/sizzle
that referenced
this pull request
Oct 11, 2019
An optimization added in jquery#431 skips the temporary IDs for selectors not using child or descendant combinators. There are a few issues with this optimization, though: 1. For sibling combinators, this pushes a selector with a leading combinator to qSA directly which crashes and falls back to a slower Sizzle route. 2. qSA in IE/Edge doesn't find elements with an empty name attribute selector (`[name=""]`) but it does find them when there's an ID prefix for the selector (`#test [name=""]`). Therefore, skipping the ID prefix more hurts than helps. 3. After jquery/jquery#4454 & jquery#453, all modern browsers other than Edge don't get temporary IDs assigned as we leverage the :scope pseudo-class. Therefore, the optimization doesn't buy us as much. 4. The regex testing the child/descendant combinators checks for `+` and whitespace as whitespace is how a descendant selector is constructed. However, users often insert spaces to selectors for readability reasons, not knowing it would cause a performance penalty.
mgol
added a commit
to mgol/sizzle
that referenced
this pull request
Oct 12, 2019
An optimization added in jquery#431 skips the temporary IDs for selectors not using child or descendant combinators. There are a few issues with this optimization, though: 1. For sibling combinators, this pushes a selector with a leading combinator to qSA directly which crashes and falls back to a slower Sizzle route. 2. qSA in IE/Edge doesn't find elements with an empty name attribute selector (`[name=""]`) but it does find them when there's an ID prefix for the selector (`#test [name=""]`). Therefore, skipping the ID prefix more hurts than helps. 3. After jquery/jquery#4454 & jquery#453, all modern browsers other than Edge don't get temporary IDs assigned as we leverage the :scope pseudo-class. Therefore, the optimization doesn't buy us as much. 4. The regex testing the child/descendant combinators checks for `+` and whitespace as whitespace is how a descendant selector is constructed. However, users often insert spaces to selectors for readability reasons, not knowing it would cause a performance penalty.
mgol
added a commit
to mgol/sizzle
that referenced
this pull request
Oct 13, 2019
An optimization added in jquery#431 skips the temporary IDs for selectors not using child or descendant combinators. For sibling combinators, though, this pushes a selector with a leading combinator to qSA directly which crashes and falls back to a slower Sizzle route. This commit makes selectors with leading combinators not skip the selector rewriting. Note that after jquery/jquery#4454 & jquery#453, all modern browsers other than Edge leverage the :scope pseudo-class, avoiding temporary id attributes
mgol
added a commit
to mgol/sizzle
that referenced
this pull request
Oct 13, 2019
An optimization added in jquery#431 skips the temporary IDs for selectors not using child or descendant combinators. For sibling combinators, though, this pushes a selector with a leading combinator to qSA directly which crashes and falls back to a slower Sizzle route. This commit makes selectors with leading combinators not skip the selector rewriting. Note that after jquery/jquery#4454 & jquery#453, all modern browsers other than Edge leverage the :scope pseudo-class, avoiding temporary id attributes
mgol
added a commit
to mgol/jquery
that referenced
this pull request
Oct 13, 2019
An optimization added in jquery/sizzle#431 skips the temporary IDs for selectors not using child or descendant combinators. For sibling combinators, though, this pushes a selector with a leading combinator to qSA directly which crashes and falls back to a slower Sizzle route. This commit makes selectors with leading combinators not skip the selector rewriting. Note that after jquery#4454 & jquery/sizzle#453, all modern browsers other than Edge leverage the :scope pseudo-class, avoiding temporary id attributes
mgol
added a commit
to mgol/jquery
that referenced
this pull request
Oct 13, 2019
An optimization added in jquery/sizzle#431 skips the temporary IDs for selectors not using child or descendant combinators. For sibling combinators, though, this pushes a selector with a leading combinator to qSA directly which crashes and falls back to a slower Sizzle route. This commit makes selectors with leading combinators not skip the selector rewriting. Note that after jquery#4454 & jquery/sizzle#453, all modern browsers other than Edge leverage the :scope pseudo-class, avoiding temporary id attributes Ref jquery/sizzle#431
mgol
added a commit
to mgol/sizzle
that referenced
this pull request
Oct 13, 2019
An optimization added in jquery#431 skips the temporary IDs for selectors not using child or descendant combinators. For sibling combinators, though, this pushes a selector with a leading combinator to qSA directly which crashes and falls back to a slower Sizzle route. This commit makes selectors with leading combinators not skip the selector rewriting. Note that after jquery/jquery#4454 & jquery#453, all modern browsers other than Edge leverage the :scope pseudo-class, avoiding temporary id attributes Ref jquerygh-431
mgol
added a commit
to mgol/sizzle
that referenced
this pull request
Oct 13, 2019
An optimization added in jquery#431 skips the temporary IDs for selectors not using child or descendant combinators. For sibling combinators, though, this pushes a selector with a leading combinator to qSA directly which crashes and falls back to a slower Sizzle route. This commit makes selectors with leading combinators not skip the selector rewriting. Note that after jquery/jquery#4454 & jquery#453, all modern browsers other than Edge leverage the :scope pseudo-class, avoiding temporary id attributes. Ref jquerygh-431
mgol
added a commit
to mgol/jquery
that referenced
this pull request
Oct 13, 2019
An optimization added in jquery/sizzle#431 skips the temporary IDs for selectors not using child or descendant combinators. For sibling combinators, though, this pushes a selector with a leading combinator to qSA directly which crashes and falls back to a slower Sizzle route. This commit makes selectors with leading combinators not skip the selector rewriting. Note that after jquery#4454 & jquery/sizzle#453, all modern browsers other than Edge leverage the :scope pseudo-class, avoiding temporary id attributes. Ref jquery/sizzle#431
This was referenced Oct 13, 2019
mgol
added a commit
that referenced
this pull request
Oct 14, 2019
An optimization added in #431 skips the temporary IDs for selectors not using child or descendant combinators. For sibling combinators, though, this pushes a selector with a leading combinator to qSA directly which crashes and falls back to a slower Sizzle route. This commit makes selectors with leading combinators not skip the selector rewriting. Note that after jquery/jquery#4454 & #453, all modern browsers other than Edge leverage the :scope pseudo-class, avoiding temporary id attributes. Closes gh-460 Ref gh-431
mgol
added a commit
to jquery/jquery
that referenced
this pull request
Oct 14, 2019
An optimization added in jquery/sizzle#431 skips the temporary IDs for selectors not using child or descendant combinators. For sibling combinators, though, this pushes a selector with a leading combinator to qSA directly which crashes and falls back to a slower Sizzle route. This commit makes selectors with leading combinators not skip the selector rewriting. Note that after #4454 & jquery/sizzle#453, all modern browsers other than Edge leverage the :scope pseudo-class, avoiding temporary id attributes. Closes gh-4509 Ref jquery/sizzle#431
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
The
:scopepseudo-class[1] has surprisingly good browser support: Chrome,Firefox & Safari have supported if for a long time; only IE & Edge lack support.
This commit leverages this pseudo-class to get rid of the ID hack in most cases.
Adding a temporary ID may cause layout thrashing which was reported a few times
in [the past.
We can't completely eliminate the ID hack in modern browses as sibling selectors
require us to change context to the parent and then
:scopestops applying towhat we'd like. But it'd still improve performance in the vast majority of
cases.
[1] https://developer.mozilla.org/en-US/docs/Web/CSS/:scope
Fixes jquery/jquery#4453
Ref jquery/jquery#4454
Ref jquery/jquery#4332
Ref gh-405