Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 1 commit into from Oct 10, 2019

Conversation

mgol
Copy link
Member

@mgol mgol commented Aug 19, 2019

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
Copy link
Member Author

mgol commented Aug 20, 2019

+47 bytes as of 53b7f5d.

@mgol mgol force-pushed the cssScope branch 4 times, most recently from b79a069 to 59d5c24 Compare Aug 21, 2019
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
@mgol mgol merged commit 0f4bd29 into jquery:master Oct 10, 2019
2 checks passed
@mgol mgol deleted the cssScope branch Oct 10, 2019
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
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
@mgol mgol added this to the 2.3.5 milestone Feb 28, 2020
mgol added a commit to mgol/jquery that referenced this pull request Sep 8, 2022
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 added a commit to mgol/jquery that referenced this pull request Sep 12, 2022
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 added a commit to mgol/jquery that referenced this pull request Sep 19, 2022
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 added a commit to mgol/jquery that referenced this pull request Sep 21, 2022
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 added a commit to mgol/jquery that referenced this pull request Oct 3, 2022
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 added a commit to mgol/jquery that referenced this pull request Oct 4, 2022
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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Development

Successfully merging this pull request may close these issues.

Leverage the :scope pseudo-class instead of the ID hack where possible
2 participants