How does CSS actually work (under the hood of browser)?
Câu trả lời How does CSS actually work (under the hood of browser)?
CSS, or Cascading Style Sheets, is a stylesheet language used to describe the presentation of a document written in HTML or XML. Understanding how CSS works under the hood involves several key steps that browsers take to render the styled content on your screen. Here’s a detailed breakdown of the process:
1. Parsing HTML to Create the DOM
The browser begins by parsing the HTML document to construct the Document Object Model (DOM), which represents the structure of the document as a tree of nodes. Each node corresponds to an element in the HTML document[2][9][12][13][14][15][16].
2. Parsing CSS
Simultaneously, the browser parses the CSS from various sources such as external stylesheets, embedded <style> tags, and inline style attributes. The CSS rules are converted into tokens, which are then formed into nodes. These nodes are linked together to create the CSS Object Model (CSSOM), a tree structure that mirrors the CSS rules applied to the HTML content[2][9][12][13][14][15][16].
3. Creating the Render Tree
Once the DOM and CSSOM are constructed, the browser merges them into a render tree. The render tree only includes visible DOM elements and the corresponding CSSOM rules that apply to them. Elements set to display: none are not included in the render tree because they do not affect the layout and are not rendered[2][9][12][13][14][15][16].
4. Layout Process
With the render tree constructed, the browser then computes the layout of each visible element. This process involves calculating the exact position and size of each element on the page based on their relative relationships and CSS rules, such as margins, paddings, and other layout properties[2][9][12][13][14][15][16].
5. Painting
After layout, the next step is painting, where the browser fills out pixels for each element in the render tree with the appropriate colors, text, images, etc. This stage converts the layout information into actual visual pixels on the screen[2][9][12][13][14][15][16].
6. Compositing (Optional)
In some cases, elements are painted onto separate layers and then composited together. This can help in optimizing performance, especially for elements that overlap or for those that involve complex visual effects like transparency[2][9][12][13][14][15][16].
