Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

Document render blocking with a <link rel=expect> element#9970

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 ourterms of service andprivacy statement. We’ll occasionally send you account related emails.

Already on GitHub?Sign in to your account

Merged
domenic merged 31 commits intowhatwg:mainfromnoamr:docblock
Feb 27, 2024
Merged
Changes from1 commit
Commits
Show all changes
31 commits
Select commitHold shift + click to select a range
4cd42e8
WIP: document render blocking
noamrDec 1, 2023
44f212a
nits
noamrDec 1, 2023
e03fe95
indent
noamrDec 1, 2023
745e1ff
nits
noamrDec 1, 2023
8469cc6
indent
noamrDec 1, 2023
6400b52
Remove </span>
noamrDec 15, 2023
e053141
updates
noamrDec 15, 2023
13f8fd6
updates
noamrDec 15, 2023
d70a7a0
Add implementation-defined timeout
noamrFeb 5, 2024
0a7f0ae
Revert "Add implementation-defined timeout"
noamrFeb 5, 2024
d701641
Apply CR comments
noamrFeb 6, 2024
ab0a4fb
end-tags
noamrFeb 6, 2024
8ab3a90
Add link category
noamrFeb 6, 2024
3d81086
nits
noamrFeb 7, 2024
4eb3251
Use existing indicator logic
noamrFeb 7, 2024
ec278ec
End tag
noamrFeb 7, 2024
f2f7071
Reword conditions
noamrFeb 7, 2024
3f1e9ac
nit
noamrFeb 8, 2024
a0ab1dd
Also account for changed ID
noamrFeb 8, 2024
435c97c
Be explicit about blocking=render
noamrFeb 9, 2024
c1652a8
nit
noamrFeb 9, 2024
1bacd54
Add missing dash
noamrFeb 9, 2024
dc919fa
Remove env-change condition
noamrFeb 9, 2024
b89e0ad
Many nits
noamrFeb 13, 2024
80bf0d3
Refactor to use existing 'indicated part'
noamrFeb 21, 2024
6a9d5b2
Support <a name> change
noamrFeb 21, 2024
f5bae82
nit
noamrFeb 21, 2024
53f8aa5
nit
noamrFeb 21, 2024
c88bce2
Account for null-namespace with ID change
noamrFeb 21, 2024
ac5a66f
Accept suggestions
noamrFeb 22, 2024
d7bc03a
Remove spurious tag
noamrFeb 22, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
PrevPrevious commit
NextNext commit
indent
  • Loading branch information
@noamr
noamr committedFeb 5, 2024
commite03fe95312f78002f84c212b5671b51e9095daa2
30 changes: 16 additions & 14 deletionssource
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -26328,8 +26328,8 @@ document.body.appendChild(wbr);</code></pre>

<h5>Link type "<dfn attr-value for="link/rel"><code data-x="rel-expect">expect</code></dfn>"</h5>

<p>The <code data-x="rel-expect">expect</code> keyword may be used with
<code>link</code>elements.</p>
<p>The <code data-x="rel-expect">expect</code> keyword may be used with <code>link</code
elements.</p>

<p>The <code data-x="rel-expect">expect</code> keyword indicates that an element with a certain
<span data-x="concept-id">ID</span> is expected in this document, and the link might
Expand All@@ -26342,16 +26342,18 @@ document.body.appendChild(wbr);</code></pre>
following are true:</p>

<ul class="brief">
<li><p><var>el</var> is <span>browsing-context connected</span>;</p></li>
<li><p><var>el</var>'s <code data-x="attr-link-media">media</code> attribute
<span>matches the environment</span>;</p></li>
<li><p>|<var>el</var>'s <code data-x="attr-link-href">href</code> attribute
starts with the "#" character (U+0023 NUMBER SIGN) followed by a non-empty
<span>URL-fragment string</span>;</p></li>
<li><p><var>el</var> is <span>browsing-context connected</span>;</p></li>

<li><p><var>el</var>'s <code data-x="attr-link-media">media</code> attribute
<span>matches the environment</span>;</p></li>

<li><p><var>el</var>'s <code data-x="attr-link-href">href</code> attribute
starts with the "#" character (U+0023 NUMBER SIGN) followed by a non-empty
<span>URL-fragment string</span>;</p></li>
</ul>

<p>then <span>block rendering</span> on <var>el</var>; Otherwise, <span>unblock rendering</span> on
<var>el</var>.</p>
<p>then <span>block rendering</span> on <var>el</var>; Otherwise, <span>unblock rendering</span>
on<var>el</var>.</p>

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

From implementation perspective, this may be hard to realize because we need to know which environment can change to satisfy or not satisfy a media value. We also need to be future proof about this.

Is there a precedence in the spec for re-checking media attribute if the environment changes? IMHO the ideal think would be to define specific points at which the media attribute is checked (e.g. for rel=expect, when the link element is parsed/encountered) and make the decision whether it applies at that time.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

That's how all existing media attributes work? E.g. viewport width media queries, dark mode...

noamr reacted with thumbs up emoji
Copy link
CollaboratorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

This is not different fromMediaQueryList change event (https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/change_event). Preload links are a precedence you can probably copy from.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

That's how all existing media attributes work?

I'm trying to find a place where that's spelled out in the spec, do you have a link?

The best I can find in rel=stylesheet fetch setup steps is

If el'smedia attribute's valuematches the environment and el ispotentially render-blocking, thenblock rendering on el.

The only other place I can see is inhttps://html.spec.whatwg.org/#processing-the-media-attribute (which btw, needs to updated in this PR):

However, if the link is anexternal resource link, then themedia attribute is prescriptive. The user agent must apply the external resource when themedia attribute's valuematches the environment and the other relevant conditions apply, and must not apply it otherwise.

This is a bit ambiguous. One can read that as "check if media matches the environment when you're about to apply the resource". I'm not sure the interpretation of "anytime environment changes, recheck all media attributes" is clear here. What is the correct reading of this?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

Preload links are a precedence you can probably copy from.

Likewise here, the only relevant text I can find is inhttps://html.spec.whatwg.org/#link-type-preload

When themedia attribute of thelink element of anexternal resource link that is alreadybrowsing-context connected, but was previously not obtained due to themedia attribute notmatching the environment, is changed or removed.

This says

When the media attribute [...] is changed or removed

not when the environment itself changes.

Copy link
CollaboratorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

Removed it as a requirement and added a note instead

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

I guess this is just a victim of the general under-specification of link processing, indeed..

I don't understand the new note though. The normative text says that whenmedia changes, ifel'smedia doesn't match the environment, then unblock rendering onel. Which is the opposite of what the note says.

Copy link
CollaboratorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

The note is about the environment changing without media changing.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

For stylesheets, the handling of environment changes for themedia attribute should be defined in CSSOM. I'm not sure it actually is, but HTML forwards it to CSSOM.
https://html.spec.whatwg.org/multipage/links.html#link-type-stylesheet%3Aconcept-css-style-sheet-media

CSSOM View defines when thechange event should fire forMediaQueryList (which is separate) here:https://drafts.csswg.org/cssom-view-1/#evaluate-media-queries-and-report-changes

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

I'm unsure where this discussion leaves us but I personally am content with what's currently written because this area feels like an existing problem.@zcorpan, if you have any concerns or concrete suggestions, please let us know.

<p>The appropriate times to <span>process <code data-x="rel-expect">expect</code> link</span>
are:</p>
Expand All@@ -26368,7 +26370,7 @@ document.body.appendChild(wbr);</code></pre>
data-x="rel-expect">expect</code>.</p></li>

<li><p>When the environment changes or the link's <code data-x="attr-link-media">media</code>
attribute or the environment change.</span>
attribute or the environment change.</span></p></li>
</ul>

<p>To <dfn>resolve <code data-x="rel-expect">expect</code> links</dfn> given a
Expand All@@ -26382,7 +26384,7 @@ document.body.appendChild(wbr);</code></pre>

<p>To <dfn>unblock on all expected elements</dfn> given a <code>Document</code>
<var>doc</var>, <span>resolve <code data-x="rel-expect">expect</code> links</span> given
<var>doc</var> and true.
<var>doc</var> and true.</p>

<p>To <dfn>potentially unblock on expected element</dfn> <var>el</var>: If <var>el</var>'s <span
data-x="concept-id">ID</span> is set, then <span>resolve <code
Expand All@@ -26396,7 +26398,7 @@ document.body.appendChild(wbr);</code></pre>

<li><p>Assert: <var>expectedURL</var> <span data-x="concept-url-equals">equals</span>
<var>link</var>'s <span>node document</span>'s <span data-x="concept-document-url">URL</span>
with <i data-x="url equals exclude fragments">exclude fragments</i> set to true.
with <i data-x="url equals exclude fragments">exclude fragments</i> set to true.</p></li>

<li><p>Return true if <var>expectedURL</var>'s <span
data-x="concept-url-fragment">fragment</span> is <var>el</var>'s <span
Expand All@@ -26405,7 +26407,7 @@ document.body.appendChild(wbr);</code></pre>

<p>When any element <var>el</var> is <span>browsing-context connected</span>, if <var>el</var> is
not on the <span>stack of open elements</span> of an <span>HTML parser</span>, then
<span>potentially unblock on expected element</span> given <var>el</var>.
<span>potentially unblock on expected element</span> given <var>el</var>.</p>



Expand Down

[8]ページ先頭

©2009-2025 Movatter.jp