-
Notifications
You must be signed in to change notification settings - Fork 72
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
Add blocking="render" #613
Conversation
@@ -0,0 +1,11 @@ | |||
name: 'blocking="render"' | |||
details: "The `blocking="render"` attribute for `<link>`, `<script>`, and `<style>` elements blocks rendering until the external script or stylesheet has been loaded." |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@domenic given that you reviewed whatwg/html#7474 you must understand this feature deeply. I made an attempt at describing what this features does. I know it must be wrong because it's potentially render-blocking and not "definitely render-blocking", but I don't know when it doesn't actually block, or whether developers need to know about this from a short description.
Advice appreciated :)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think your summary seems reasonable. The caveats are mostly detailed in https://html.spec.whatwg.org/#render-blocking-mechanism . Things like:
- This only works for elements in the
<head>
- There's an implementation-defined timeout
- Only works for text/html documents
... that sort of thing.
@noamr is probably our current expert on this?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
- Works only in the head
- Doesn't work on non-async classic scripts
- For links, only wokrs on
<link rel=stylesheet>
and<link rel=expect
>. For the latter it would block until the element indicated byhref
is seen and is fully parsed (end tag seen or added programmatically).
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks @domenic and @noamr for the feedback. Of those caveats, I think the implementation-defined timeout is the most relevant to understand, and what some (evil QA people) might wonder about when reading about the feature. Is the timeout the same in all browsers, and what is it?
I'll add some comments to the YAML for things you've listed but I'm not sure should go in the description, so it's easier to find for future web-features maintainers.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks @domenic and @noamr for the feedback. Of those caveats, I think the implementation-defined timeout is the most relevant to understand, and what some (evil QA people) might wonder about when reading about the feature. Is the timeout the same in all browsers, and what is it?
Chrome currently doesn't implement such timeout. Since render blocking always relies on resource loading (js, css, html), the usual network timeouts apply.
I'll add some comments to the YAML for things you've listed but I'm not sure should go in the description, so it's easier to find for future web-features maintainers.
@@ -0,0 +1,11 @@ | |||
name: 'blocking="render"' | |||
details: 'The `blocking="render"` attribute for `<link>`, `<script>`, and `<style>` elements blocks rendering until the external script or stylesheet has been loaded.' |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
For <link rel=expect>
this means blocking until a certain element is seen in the HTML and is fully parsed.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Oh... that's a very cool feature I didn't know was hiding here. That definitely should be in the description!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Keep in mind that <link rel=expect>
only ships in Chrome M124, so it wasn't hiding there for long.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It was hard to figure out what this feature is, so I created mdn/mdn#534
Co-authored-by: Daniel D. Beck <daniel@ddbeck.com>
No description provided.