search

whatwg / html

HTML Standard
https://html.spec.whatwg.org/multipage/
Other
8.16k stars 2.69k forks source link

[Proposal] : Make stylesheets with non-matching media queries imported using "@import" non-render blocking. #8958

Open yashjoshi-dotcom opened 1 year ago

yashjoshi-dotcom commented 1 year ago

Currently all major browser engines [Chromium, WebKit, Gecko] block rendering and script execution on @import imported stylesheets with a non matching MQ. As a result, they also load such scripts eagerly which leads to unreasonably degraded performance.

A min. reproducible example is presented here for reference. [wait 10s for site to load] Explanation : The stylesheet is imported here from using @import with print media inside a parent stylesheet [which has matching media]. The imported stylesheet's MQ does not match with the device's media environment but still browser waits for it to fetch completely before continuing JS execution. Here the stylesheet is delayed by 10 sec which delays rendering and script execution ( Time Elapsed can be observed in console window ).

The interaction of scripting and styling part of the current HTML spec talks about the media element and how scripts should not be blocked when the media environment does not match. However, it does not have any mention regarding @import . We need to address this ambiguity, especially when conditional media rules clearly state that

"User agents may, therefore, avoid fetching a conditional import as long as the import conditions do not match.".

See more discussion @ Chromium Bug

The main challenge here for CSS spec change is that import rules can be mixed with various other style rules not covered by the media query, such as.

<style>
  @import url("delayed-stylesheet.css") print; // applied only when media environment is print
  body { background-color: lightblue; }  // applied in every case.
</style>

We don't seem to have the concept of a partially loaded stylesheet in CSSOM as of now, which seems to be the main blocker here.

One possible change to address this could mean that the CSSImportRule is present, but its styleSheet is initially null, which has been discussed here

I believe incorporating this change would improve the performance of web applications and make them seem more responsive to user interaction.

Thank you for your time and consideration.

yoavweiss commented 1 year ago

^^ @emilio @lilles @dbaron

zcorpan commented 1 year ago

cc @whatwg/css - as noted above this would need changes in CSSOM.