Browser parsing process
1) The browser will parse:
One is: HTML/SVG/XHTML, in fact, Webkit has three C++ classes corresponding to these three types of documents. Parsing these three files will generate a DOM Tree.
The second is: CSS, parsing CSS will generate CSS rule tree.
The third is: Javascript, script, mainly through DOM API and CSSOM API to manipulate DOM Tree and CSS Rule Tree.
2) After the analysis is completed, the browser engine will construct the Rendering Tree through DOM Tree and CSS Rule Tree. Note:
Rendering Tree is not the same as the DOM tree, and things like Header or display: none need to be placed in the render tree.
The CSS Rule Tree is mainly to complete the matching and attach the CSS Rule to each Element on the Rendering Tree. That is, the DOM node. This is the so-called Frame.
Then, calculate the position of each Frame (that is, each Element), which is also called the layout and reflow process.
3) Finally, draw by calling the API of the operating system Native GUI.
In response to the above description
DOM analysis
<html>
<html>
<head>
<title>Web page parsing</title>
</head>
<body>
<div>
<h1>Web page parsing</h1>
<p>This is an example Web page.</p>
</div>
</body>
</html>
Parsing to:
Here is another
CSS parsing with SVG tags :
CSS parsing is probably as follows (the following mainly talks about the gameplay of Gecko, which is Firefox), assuming we have the following HTML document:
<doc>
<title>A few quotes</title>
<para>
Franklin said that <quote>"A penny saved is a penny earned."</quote>
</para>
<para>
FDR said <quote>"We have nothing to fear but <span>fear itself.</span>"</quote>
</para>
</doc>
Parsing into DOM is like this,
and our CSS document is like this:
/* rule 1 */ doc { display: block; text-indent: 1em; }
/* rule 2 */ title { display: block; font-size: 3em; }
/* rule 3 */ para { display: block; }
/* rule 4 */ [class="emph"] { font-style: italic; }
So our CSS Rule Tree will look like this:
Note that the fourth rule in the figure appears twice, once independently, and once in the child node of rule 3. Therefore, we can know that the establishment of CSS Rule Tree needs to follow DOM Tree. CSS matching DOM Tree is mainly the Selector that parses CSS from right to left. Many people think that this will be faster, but it is not necessarily true. The key also depends on how our CSS Selector is written.
Note: CSS matching HTML elements is a very complicated and performance problem. Therefore, you will see many people telling you in more than N places that the DOM tree should be small, and CSS should try to use id and class as much as possible. Don't cascade over,...
Through these two trees, we can get a Style Context Tree, which is as follows (attach the CSS Rule node to the DOM Tree):
Therefore, Firefox basically generates CSS Rule Tree through CSS analysis, and then through Compare the DOM to generate the Style Context Tree, and then Firefox completes it by associating the Style Context Tree with its Render Tree (Frame Tree). Note: Render Tree will remove some invisible nodes. The so-called Frame in Firefox is a DOM node. Don't be confused by its name.
Note: Unlike Firefox, Webkit uses two trees to do this. Webkit also has a Style object, which directly stores the Style object on the corresponding DOM node.
Rendering
the rendering process essentially as follows (step four yellow):
calculated CSS style
Building Tree the Render
Layout - positioning coordinates and size, whether the line feed, a variety of position, overflow, z-index attribute ......
officially open Videos
CSS forest (CSS Forest): Analysis of the working principle of the
browser The work done by the browser can be roughly divided into the following steps:
1. Loading: According to the requested URL, the domain name is resolved, the request is made to the server, and the file (HTML, JS, CSS, image, etc.) is received. ).
2. Analysis: parse the loaded resources (HTML, JS, CSS, etc.), and suggest the corresponding internal data structure (such as HTML DOM tree, JS (object) attribute table, CSS style rules, etc.)
3. Rendering: Build a rendering tree, perform position calculation, style calculation, etc. for each element, and then render the page according to the rendering tree (can be understood as "painting" elements)
These processes are not completely isolated. There will be crossovers. For example, after HTML is loaded, it will be parsed, and then CSS, JS, etc. specified in the HTML will be pulled.
This article refers to
https://blog.csdn.net/qq_37241934/article/details/83036538