Stylesheets activated after the body is started do not block paint

External stylesheets in the body of the document or that get activated after the body has started to be parsed will no longer block paint but they will pause the parser. The end result is that any DOM content before the body stylesheet will continue to paint but content after the stylesheet will not appear until after the stylesheet has loaded.

Comments

This is the existing Edge and Safari behavior (though the Safari implementation is different). Firefox is similar but does not pause the parser so that content after the external sheet is painted using the existing styles until the external sheet loads. Parser pausing can be achieved in Firefox by placing an empty script tag after the relevant sheets.

Demo

Status in Chromium

Blink


Enabled by default (tracking bug) in:

  • Chrome for desktop release 69
  • Chrome for Android release 69
  • Chrome for iOS release 69
  • Android WebView release 69
  • Opera release 56
  • Opera for Android release 56

Consensus & Standardization

After a feature ships in Chrome, the values listed here are not guaranteed to be up to date.

  • Shipped
  • Shipped
  • Shipped
  • Strongly positive

Owner

Last updated on 2018-11-05