4

I am learning front-end web developing best practice and encountered these two concepts - "render-blocking CSS" and "FOUC (Flash of Unstyled Content)".

However, these two concepts seem contradictory to me. Here's my understanding:

  • Browsers parse an HTML from top to bottom, and try to render content ASAP. Putting CSS at the bottom of the page will cause an FOUC issue.
  • CSS is a render-blocking resource. Browsers won't render anything until the CSSOM is constructed (all CSS files are loaded)

Here're my questions:

  1. If a browser parse and render a page from top to bottom, how does it know if there are more CSS files or not during the process?
  2. If a browser knows how many CSS files it should fetch before start rendering, why does the FOUC problem still exist?

Thanks all for your time in reviewing my questions, and please correct me if I misunderstand anything.

halfer
  • 19,824
  • 17
  • 99
  • 186
Darren Huang
  • 73
  • 5
  • Similar but maybe not totally duplicate question: https://stackoverflow.com/questions/1795438/load-and-execution-sequence-of-a-web-page/1795502#1795502. From the answer there: *"the CSS files can be download simultaneously because CSS rules are always being applied - meaning to say elements are always repainted with the freshest CSS rules defined - thus making it unblocking."* – cjl750 Jun 23 '17 at 17:19
  • This [**Google Developers Article**](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/) on _The Critical Rendering Path_ may be helpful. – hungerstar Jun 23 '17 at 17:42

0 Answers0