Skip to content

/ jquery

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

Jump to bottom

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

Closed
mgol opened this issue Aug 9, 2019 · 6 comments
Closed

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

mgol opened this issue Aug 9, 2019 · 6 comments
Assignees
@mgol
Labels
Selector
Milestone
3.5.0

Comments

@mgol
Copy link
Member

@mgol mgol commented Aug 9, 2019

Description

The :scope pseudo-class has surprisingly good browser support: Chrome, Firefox & Safari have supported if for a long time; only IE & Edge lack support. We could leverage 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.

I've attached the 3.4.2 milestone as the patch seems simple enough that I'd like to backport it to Sizzle. It'd be a nice perf win in a patch release.

Link to test case

N/A
@mgol mgol added the Selector label Aug 9, 2019
@mgol mgol added this to the 3.4.2 milestone Aug 9, 2019
@mgol mgol self-assigned this Aug 9, 2019
mgol added a commit to mgol/jquery that referenced this issue Aug 9, 2019
@mgol
Selector: Leverage the :scope pseudo-class where possible
466a369 
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 jquerygh-4453
Ref jquerygh-4332
Ref jquery/sizzle#405
@mgol mgol mentioned this issue Aug 9, 2019
Merged
2 tasks done
@mgol
Copy link
Member Author

@mgol mgol commented Aug 9, 2019

PR: #4454
mgol added a commit to mgol/jquery that referenced this issue Aug 9, 2019
@mgol
Selector: Leverage the :scope pseudo-class where possible
22fff98 
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 jquerygh-4453
Ref jquerygh-4332
Ref jquery/sizzle#405
mgol added a commit to mgol/jquery that referenced this issue Aug 12, 2019
@mgol
Selector: Leverage the :scope pseudo-class where possible
0b62852 
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 jquerygh-4453
Ref jquerygh-4332
Ref jquery/sizzle#405
mgol added a commit to mgol/jquery that referenced this issue Aug 12, 2019
@mgol
Selector: Leverage the :scope pseudo-class where possible (no EdgeHTM…
d02998e 
…L support)

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 jquerygh-4453
Ref jquerygh-4332
Ref jquery/sizzle#405
@mgol mgol closed this in #4454 Aug 19, 2019
mgol added a commit that referenced this issue Aug 19, 2019
@mgol
Selector: Leverage the :scope pseudo-class where possible
Verified
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: 4AEE18F83AFDEB23 Learn about vigilant mode.
Loading status checks…
df6a7f7 
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 gh-4453
Closes gh-4454
Ref gh-4332
Ref jquery/sizzle#405
@mgol
Copy link
Member Author

@mgol mgol commented Aug 19, 2019

The PR landed on master but it also needs to land in Sizzle if we want it in jQuery 3.4.2. Therefore, I'm reopening this issue for now to investigate if that's feasible.
@mgol mgol reopened this Aug 19, 2019
mgol added a commit to mgol/sizzle that referenced this issue Aug 19, 2019
@mgol
Selector: Leverage the :scope pseudo-class where possible
021a452 
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 mentioned this issue Aug 19, 2019
Merged
@mgol
Copy link
Member Author

@mgol mgol commented Aug 19, 2019

Sizzle PR: jquery/sizzle#453
@mgol
Copy link
Member Author

@mgol mgol commented Aug 19, 2019

I added the "Needs review" label to indicate the Sizzle PR needs to be reviewed (as we don't track such a label there).
mgol added a commit to mgol/sizzle that referenced this issue Aug 20, 2019
@mgol
Selector: Leverage the :scope pseudo-class where possible
4662d2b 
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 added a commit to mgol/sizzle that referenced this issue Aug 20, 2019
@mgol
Selector: Leverage the :scope pseudo-class where possible
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
mgol added a commit to mgol/sizzle that referenced this issue Aug 21, 2019
@mgol
Selector: Leverage the :scope pseudo-class where possible
ce1b1b7 
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 added a commit to mgol/sizzle that referenced this issue Aug 21, 2019
@mgol
Selector: Leverage the :scope pseudo-class where possible
b5d89e2 
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 added a commit to mgol/sizzle that referenced this issue Aug 21, 2019
@mgol
Selector: Leverage the :scope pseudo-class where possible
b79a069 
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 added a commit to mgol/sizzle that referenced this issue Aug 21, 2019
@mgol
Selector: Leverage the :scope pseudo-class where possible
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 jquerygh-405
mgol added a commit to mgol/jquery that referenced this issue Aug 26, 2019
@mgol
Selector: Leverage the :scope pseudo-class where possible (no EdgeHTM…
d0a579c 
…L support)

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 jquerygh-4453
Ref jquerygh-4332
Ref jquery/sizzle#405
mgol added a commit to mgol/sizzle that referenced this issue Oct 1, 2019
@mgol
Selector: Leverage the :scope pseudo-class where possible
dd77de0 
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
Copy link
Member Author

@mgol mgol commented Oct 10, 2019

The Sizzle PR landed. Reopening since we still need to update Sizzle in jQuery 3.x.
@mgol mgol reopened this Oct 10, 2019
@mgol mgol reopened this Oct 14, 2019
mgol added a commit to mgol/jquery that referenced this issue Mar 14, 2020
@mgol
Selector: Update Sizzle from 2.3.4 to 2.3.5
35f404d 
Fixes jquerygh-4424
Fixes jquerygh-4435
Fixes jquerygh-4441
Fixes jquerygh-4453
@mgol mgol mentioned this issue Mar 14, 2020
Merged
2 tasks done
mgol added a commit that referenced this issue Mar 16, 2020
@mgol
Selector: Update Sizzle from 2.3.4 to 2.3.5
Verified
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: 4AEE18F83AFDEB23 Learn about vigilant mode.
Loading status checks…
04bf577 
Fixes gh-4424
Fixes gh-4435
Fixes gh-4441
Fixes gh-4453
Closes gh-4641
@mgol
Copy link
Member Author

@mgol mgol commented Mar 16, 2020

Sizzle update merged in #4641. The issue is now fixed both on master & on 3.x-stable.
@mgol mgol closed this Mar 16, 2020
@mgol mgol mentioned this issue Mar 23, 2020
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@mgol mgol

Labels
Selector
Projects
None yet
Milestone
3.5.0
Linked pull requests

Successfully merging a pull request may close this issue.

Selector: Leverage the :scope pseudo-class where possible
Selector: Leverage the :scope pseudo-class where possible
1 participant
@mgol