info
Google Groups no longer supports new Usenet posts or subscriptions. Historical content remains viewable.
Dismiss
Intent to prototype and ship: Make <script defer> wait for stylesheet loads.
97 views
Skip to first unread message
Emilio Cobos Álvarez
Mar 20, 2020, 11:15:27 AM3/20/20
to dev-platform
This is more of a bugfix but I think an intent is warranted.
Summary: Defer <script defer> execution until all script-blocking
stylesheets are loaded.
This needs to happen per spec (see below) but no browser currently does
this (other than old EdgeHTML, for $reasons).
However, this is more of a problem for us, because other browsers do
different things for <link>s and such, which means that we're the only
browser for which a test-case like this causes a FOUC:
https://crisal.io/tmp/external-sheet-script-defer.html
This is a common reported cause for flashes of unstyled content (see the
massive bug 1404468), for which the only workaround right now is adding
a non-empty, non-defer <script> after the stylesheets, which is very
sad. This ought to address that.
Bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1622235
Standard: Spec is
https://html.spec.whatwg.org/multipage/parsing.html#stop-parsing.
Discussion is ongoing in https://github.com/whatwg/html/issues/3890
Platform coverage: all
Preference: N/A
DevTools bug: N/A
Other browsers: This is historically quite a can of worms, interop-wise.
Here's what I believe behavior is across engines:
* Old EdgeHTML pause the parser for all external stylesheets, per the
previously linked HTML spec thread and [1].
* Blink pauses it for external sheets in the <body> (see [1]). There's
[2] to implement this change and [3] to make them do the same in <head>
as well. I believe they don't FOUC on my test-case above because they
may suppress painting, but I'm not sure. They do execute the script
before the stylesheet loads.
* WebKit still has the "ignore pending stylesheets" hack that Blink
removed[4] to avoid FOUC, and have [5] to implement this change.
web-platform-tests: There are multiple tests added in here which we now
pass:
https://github.com/web-platform-tests/wpt/pull/21415
Secure contexts / sandboxed iframes: This applies to all pages.
Hope this makes sense, I hate flashes of unstyled content :-)
-- Emilio
[1]:
https://groups.google.com/a/chromium.org/d/msg/blink-dev/ZAPP8aTnyn0/JURBX5uFCAAJ
[2]: https://bugs.chromium.org/p/chromium/issues/detail?id=1045479
[3]: https://bugs.chromium.org/p/chromium/issues/detail?id=891767
[4]: https://bugs.chromium.org/p/chromium/issues/detail?id=521692
[5]: https://bugs.webkit.org/show_bug.cgi?id=209261
Summary: Defer <script defer> execution until all script-blocking
stylesheets are loaded.
This needs to happen per spec (see below) but no browser currently does
this (other than old EdgeHTML, for $reasons).
However, this is more of a problem for us, because other browsers do
different things for <link>s and such, which means that we're the only
browser for which a test-case like this causes a FOUC:
https://crisal.io/tmp/external-sheet-script-defer.html
This is a common reported cause for flashes of unstyled content (see the
massive bug 1404468), for which the only workaround right now is adding
a non-empty, non-defer <script> after the stylesheets, which is very
sad. This ought to address that.
Bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1622235
Standard: Spec is
https://html.spec.whatwg.org/multipage/parsing.html#stop-parsing.
Discussion is ongoing in https://github.com/whatwg/html/issues/3890
Platform coverage: all
Preference: N/A
DevTools bug: N/A
Other browsers: This is historically quite a can of worms, interop-wise.
Here's what I believe behavior is across engines:
* Old EdgeHTML pause the parser for all external stylesheets, per the
previously linked HTML spec thread and [1].
* Blink pauses it for external sheets in the <body> (see [1]). There's
[2] to implement this change and [3] to make them do the same in <head>
as well. I believe they don't FOUC on my test-case above because they
may suppress painting, but I'm not sure. They do execute the script
before the stylesheet loads.
* WebKit still has the "ignore pending stylesheets" hack that Blink
removed[4] to avoid FOUC, and have [5] to implement this change.
web-platform-tests: There are multiple tests added in here which we now
pass:
https://github.com/web-platform-tests/wpt/pull/21415
Secure contexts / sandboxed iframes: This applies to all pages.
Hope this makes sense, I hate flashes of unstyled content :-)
-- Emilio
[1]:
https://groups.google.com/a/chromium.org/d/msg/blink-dev/ZAPP8aTnyn0/JURBX5uFCAAJ
[2]: https://bugs.chromium.org/p/chromium/issues/detail?id=1045479
[3]: https://bugs.chromium.org/p/chromium/issues/detail?id=891767
[4]: https://bugs.chromium.org/p/chromium/issues/detail?id=521692
[5]: https://bugs.webkit.org/show_bug.cgi?id=209261
0 new messages