5 ms·
When this webpage loads, it briefly flashes in plaintext before loading CSS - at least in Chrome. This is unusual since it has the CSS stylesheet in the head wh
by herpderperator 7y ago
When this webpage loads, it briefly flashes in plaintext before loading CSS - at least in Chrome. This is unusual since it has the CSS stylesheet in the head which I thought would block until it's fully loaded. Does anyone know what's going on with that?
- C14L 7y agoOnly <script> blocks by default, <link rel="stylesheet"> doesn't.
- holdenc 7y agoThis is what happens when you dynamically insert your CSS tag in the head after the DOM loads.
- herpderperator 7y agoIf you view the raw data coming from the web server, the link tag containing the stylesheet is already present in the head. Although what you're saying sounds like it can absolutely cause this type of behaviour, I'm not sure if that's what's happening in this case.
- holdenc 7y agoYou are correct. I suppose it could be an unreviewed NPM dependency causing this ;)
- zuzun 7y agoI guess render-blocking isn't really a thing, the HTML spec only describes script-blocking and is light on the rendering aspects. Now most web pages have styles and scripts and since styles block scripts, you usually perceive styles as render-blocking. But this web page doesn't have any scripts, so the browser reaches DOMContentLoaded right after parsing the HTML and does the first paint while the request for the style is still in flight. At least that's my theory. You could test this by inserting an empty <script> tag into the <body>, which should delay DOMContentLoaded until the style arrives and prevent the flash of unstyled content.
- brobinson 7y agoThis is the classic FOUC that has been around for like 20+ years: https://en.wikipedia.org/wiki/Flash_of_unstyled_content https://en.wikipedia.org/wiki/Flash_of_unstyled_content