Menu
Two part question:
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)
472
How to open a CSS file. You can open and edit CSS files with various web development applications and source code editors. Examples of programs that support CSS files include Adobe Dreamweaver (Windows and macOS), Adobe ColdFusion Builder (Windows and macOS), and Microsoft Visual Studio Code (multiplatform).
When you save a file with the . html extension, you signal to the browser engine to interpret the file as an HTML document. The way the browser interprets this file is by first parsing it. In the parsing process, and particularly during tokenization, every start and end HTML tag in the file is accounted for.
The browser goes through each rule set in the CSS, creating a tree of nodes with parent, child, and sibling relationships based on the CSS selectors. As with HTML, the browser needs to convert the received CSS rules into something it can work with. Hence, it repeats the HTML-to-object process, but for the CSS.
css is a style specification defined by w3c consorcium. This style code is interpreted by browsers.So this is not a compiler nor interpreter it is standard.
CSS rendering is an interesting topic and all the competitors are thriving hard to speed up the view layer (HTML and CSS) rendering to deliver the best results to the end users at a blink of an eye.
Firstly, yes different browsers have their own CSS parser/Rendering engines
All these rendering engine contain both CSS interpreter and HTML DOM parser.
All these engines follow below listed models , these are the set of W3C standard
Note: All these models are interlinked and interdependent. They are not separate models defining standards to render the CSS. These models shed light on how CSS is processed based on precedence like inline styling, Specificity etc.
Stage 1:
All the browsers download the HTML and CSS script from the server and start off by parsing HTML tags to DOM nodes in a tree called content tree.
While the HTML doc being parsed browser rendering engines construct another tree called the Render tree. This tree is of visual elements in the order in which they will be displayed.
Firefox call it as frames where as Webkit guys call them as Renderer or Renderer object.
See the below image: (Source: HTML5 Rocks)
Stage 2:
After the above process both these tree goes through Layout process meaning the browser tells the viewport where each node has to be placed on the screen.
This is defined as positioning scheme by W3C(Follow this link for detailed info) which instructs the browser on how and where elements are to be placed. Below are the 3 types.
Stage 3:
Now the final stage called Painting. This is a gradual process where the rendering engine traverse through each render tree nodes and paint them visually using UI backend layer. At this point all the visual Fx are applied like Font size, Background color, Table painting etc.
Note: This stage can be clearly observed if you try to open any webpage on slow connection. Most modern browsers for better user experience try to display elements as soon as possible. This gives the user an impression that the page is loading and have to wait to complete.
Source HTML5 Rocks
92
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.
30
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
