Traditional Culture Encyclopedia - Traditional customs - How to Understand HTML and CSS Rendering

How to Understand HTML and CSS Rendering

To understand the principle of HTML and CSS rendering from the following aspects:

html all kinds of rendering from the browser, divided into browser parsing and browser rendering of the two major steps

A browser parsing

1, the browser through the request URL for domain name resolution, to the server to initiate a request to receive the file ( HTML, CSS, JS, Images, etc.).

2. After the HTML file is loaded, it starts to build the DOM Tree

3. After the CSS style file is loaded, it starts to parse and build the CSS Rule Tree

4. After the Javascript file is loaded, it operates the DOM Tree and CSS Rule Tree through the DOM API and CSSOM API. Tree?

2. Browser Rendering

1. The browser engine builds the Rendering Tree from the DOM Tree and the CSS Rule Tree

2. The Rendering Tree doesn't correspond to the DOM Tree, for example, nodes such as the contents of the <head> tag or elements with display: none; are not included. none; are not included in the Rendering Tree.

3. The CSS Rule Tree matches the DOM Tree for positional coordinates and size, line breaks, position, overflow, z-index, and so on, in a process called Flow or Layout.

4. Finally, by calling the Native GUI's API to draw the web page is called Paint.

Schematic rendering principle:

Previous article:From Avenue to Jane, what kind of China philosophy is hidden in Ming furniture?
Next article:Describe a delicious food in my hometown with riddles