Search code examples
cssbrowserrendering

How do browsers read and interpret CSS?

Two part question:

  1. Do browsers have a built-in CSS interpreter like they do for JavaScript?
  2. When exactly does a browser read the CSS and when does it apply the CSS?

Specifically, I would like clarification on how or why JavaScript and CSS are different in that with JavaScript you need to specifically wait until window.onload so the interpreter can correctly getElementById. However, in CSS you can select and apply styles to classes and ids all wily nily.

(If it even matters, assume I am referring to a basic HTML page with an external stylesheet in the head)

Solution

  • If you've worked with a slow connection anytime recently, you'll find that CSS will be applied to elements as they (slowly) appear, actually reflowing page content as the DOM structure loads. Since CSS is not a programming language, it doesn't rely on objects being available at a given time to be parsed properly (JavaScript), and the browser is able to simply re-assess the structure of the page as it retrieves more HTML by applying styles to new elements.

    Perhaps this is why, even today, the bottleneck of Mobile Safari isn't the 3G connection at all times, but it is the page rendering.