Selector: Leverage the :scope pseudo-class where possible #453

mgol · 2019-08-19T18:28:59Z

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 · 2019-08-20T21:52:45Z

+47 bytes as of 53b7f5d.

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 jquerygh-405

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.

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

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

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

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

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

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

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

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

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 jquerygh-4509 Ref jquery/sizzle#431

mgol requested review from timmywil and gibson042 August 19, 2019 18:29

mgol mentioned this pull request Aug 19, 2019

Leverage the :scope pseudo-class instead of the ID hack where possible jquery/jquery#4453

Closed

mgol force-pushed the cssScope branch 2 times, most recently from 4662d2b to 53b7f5d Compare August 20, 2019 21:52

mgol force-pushed the cssScope branch 4 times, most recently from b79a069 to 59d5c24 Compare August 21, 2019 23:04

timmywil approved these changes Aug 26, 2019

View reviewed changes

mgol force-pushed the cssScope branch from 59d5c24 to dd77de0 Compare October 1, 2019 01:06

mgol merged commit 0f4bd29 into jquery:master Oct 10, 2019

mgol deleted the cssScope branch October 10, 2019 23:06

This was referenced Oct 13, 2019

Selector: Make selectors with leading combinators use qSA again jquery/jquery#4509

Merged

Selector: Make selectors with leading combinators use qSA again #460

Merged

mgol added this to the 2.3.5 milestone Feb 28, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Selector: Leverage the :scope pseudo-class where possible #453

Selector: Leverage the :scope pseudo-class where possible #453

Selector: Leverage the :scope pseudo-class where possible #453

Selector: Leverage the :scope pseudo-class where possible #453

Conversation