How progressive rendering works?

Question

First I'm going to explain how I think progressive rendering works so you can correct me if I'm wrong or missing something.

When you request a page the browser tries to display elements as fast as possible, even when it has not received all the document, but for this it requires all the styles to be already downloaded, right?

My question is: how does the browser knows there are no styles left to be fetched?

The only way I can think of is to get the whole document and parse it, but then progressive rendering would be pointless, since all elements are already present!

Thanks.

Answer 1

When you have CSS loaded in the head, your browser will download that CSS before displaying elements in the page. That way you don't get a FOUC (in most cases).

If you have CSS loaded elsewhere, it's entirely possible that your page will be displayed before that CSS will be loaded.

how does the browser knows there are no styles left to be fetched?

The browser parses the document, and knows what's left to download. It will add CSS to the page and redraw the page as-needed if more CSS is loaded later.

Answer 2

There's a Content-Length in the header as part of HTTP spec. The browser can simply compare how much is there to download to what it already did.

Answer 3

Answering your question: The browser first receives the html/text file from the server. It then parses the string in the file and figures out all the CSS files needed to be fetched.

You can find a very detailed account of the processes going on when the browser renders a page in this article.

Progressive rendering is a concept that helps to render content to the browser optimally by rendering the critical content first and the non-critical parts sequentially as needed by the user. This article explains it very nicely.