0

Do browsers parse CSS on CSS file loading? Or parsing is done once the whole CSS file is downloaded by a browser? Is there a difference in different browser's approch on it? Where can I find this kind of low level information?

This question is not a duplicate of Load and execution sequence of a web page? question, as it relates only to CSS download / parsing part, whereas in the related question there is no answer with detailed discription of synchronious / asynchronious CSS file download / parsing.

Sergey Ryabov
  • 656
  • 1
  • 8
  • 19
  • 1
    https://developers.google.com/web/fundamentals/performance/critical-rendering-path/constructing-the-object-model – Ivar Apr 03 '18 at 11:36
  • Possible duplicate of [Load and execution sequence of a web page?](https://stackoverflow.com/questions/1795438/load-and-execution-sequence-of-a-web-page) – Sebastian Simon Apr 03 '18 at 11:58

2 Answers2

2

CSS is, along with HTML, a render blocking resource. Browsers need it to construct the render tree. So yes, it is converted into CSSOM right after it's downloaded.

There are some cases in which the CSS is not parsed right away, for example if they are added as a print stylesheet: <link href="print.css" rel="stylesheet" media="print">. In that case they will be parsed only if the page is printed.

You can actually try for yourself if you are using Chrome Developer Tools.

enter image description here

The red line represents the Load event, that's when all elements have been downloaded and parsed. The dark green section is when the CSS has been parsed and is just waiting for other resoures to load.

For more information:

Jorjon
  • 5,316
  • 1
  • 41
  • 58
-3

Browsers rely on a rendering engine such as Webkit/Trident/Quantum. For low-level information regarding CSS-rendering you can read the documentation of specific rendering engines. They are mostly open-source.

soupy-norman
  • 403
  • 2
  • 11