From http://www.ccthere.com/article/2205048
It is a complicated process from specifying an HTML text file to drawing a webpage with Complex layout, diverse fonts, and multimedia content including images, audio, and videos. In this process
Everything WebKit does is centered on DOM tree and rendering.
Tree. In the previous chapter, we talked about the respective functions of the two trees. In this chapter, we use a simple HTML file to show the functions of DOM tree and rendering.
Tree, and how WebKit constructs these two trees.
Figure 1. from HTML to webpage, and the underlying DOM tree and rendering tree.
Courtesy link Source
1. Structure of DOM tree and rendering tree
Figure
1. A simple HTML text file on the left and WebKit rendering on the right
The page drawn by the engine. The page content includes a title, "AI", a line of text, "ape's
Intelligence "and a photo. The entire page is divided into two layers, the title and the body are drawn at the first layer, and the photo is at the last layer. L Jun and I followed suit.
WebKit, from parsing this HTML text file to generating DOM tree and rendering tree, aims to understand dom
The specific structure and construction process of tree and rendering tree.
First, let's talk about the DOM in the lower left corner of figure 1.
Tree. Basically, each tag in an HTML text file corresponds to a class in WebKit, WebCore, and HTML. For example, <HTML>
Tag corresponds to htmlhtmlelement, Tags correspond to htmlstyleelement and so on. What's special is Dom.
Tree root node, htmldocument, which does not correspond to any tag in the HTML text file. We will introduce the role of htmldocument later. Whole
The DOM tree structure also corresponds to the nesting relationship of various tags in HTML text files. In a word, Dom
Tree is to translate HTML text files into an object tree structure.
Dom
Tree is a common data structure. Any XML text file can be translated into a DOM tree, not just HTML text files. WebKit/WebCore/html
Generally, the total HTML classes are subclasses of a class in WebKit/WebCore/DOM, that is,/html is
/A special case of Dom. This design laid the groundwork for expanding WebKit to layout and rendering of pages other than HTML format in the future. So strictly speaking, figure
The DOM tree at the bottom left of 1 is actually an html dom tree.
Looking at the rendering tree, the notable feature is that,
A. The entire rendering TREE tree structure corresponds to the one-to-one html dom tree structure. That is to say, almost all nodes in the html dom tree have corresponding nodes in the rendering tree. The parent-child or sibling relationship between the node and the node is also one-to-one.
Example
In addition, the html dom tree has htmlstyleelement leaf nodes, while in rendering
No corresponding leaf node in the tree. The reason is that rendering
Each node of the tree involves the layout and rendering of a block area on the page. Htmlstyleelement does not directly involve the layout and rendering of a certain area. html dom
The contents of the htmlstyleelement leaf node in the tree have been integrated into rendering.
The property of the renderimage leaf node in the tree is included. In addition, because Rendering
Tree does not have any leaf node corresponding to htmlstyleelement. Therefore, nodes corresponding to htmlheadelement do not need to exist.
B. Each class in WebKit/WebCore/rendering does not have a one-to-one relationship with HTML tags.
Rendering
Tree is a general mechanism for planning page layout and rendering. This general mechanism can serve HTML pages, but not only serves HTML pages, but we can use
Rendering tree is used to plan the layout and rendering of pages in other formats. Use DOM tree and rendering
Tree-based WebKit rendering machine is a powerful and scalable universal rendering machine. It can be used not only to draw HTML pages, but also to render pages in other formats, such
It is used to create email reading and manager, database management tools, and even game interfaces.
A little surprising
Htmlhtmlelement, htmlbodyelement, htmlheadingelement, and htmlparagraphelement,
In rendering
In the tree, the renderblock ECHO is used. If the difference between htmlheadingelement and htmlparagraphelement is not big
The font and alignment are slightly different, so Rendering
Tree can be integrated with renderblock. The problem is that htmlhtmlelement and htmlbodyelement are two types of containers, which always appear in
The middle of the DOM tree, but never as a leaf node, corresponds to such a container node, why Rendering
Tree does not have another class. Is it different from renderblock? But again, this is not a big problem. It is a matter of beauty at most.
Figure 2. The construction sequence of the root of the DOM tree.
Courtesy link Source
2. root nodes of DOM tree and rendering tree
In the previous section, we mentioned that htmldocument is a special class, which is the root node of the entire html dom tree, but does not correspond to any HTML Tag. The document that often appears in Javascript refers to this root. For example,
"Document. getelementbyid (x). style. Background =" yellow ";"
HTML text files, usually starting with <HTML> and ending with
Chu
Seeing Figure 2 was a little surprised. When a user opens a blank page in the browser, the Dom is generated immediately.
Tree Root Node htmldocument, and rendering
Tree Root Node renderview. At this time, the user has not given a URL, that is, for the browser, the specific HTML text file does not exist at this time. Root Node and
The specific HTML content is out of touch, which may imply two WebKit design ideas,
A. htmldocument, the root node of the DOM tree, And renderview, the root node of the rendering tree, can be reused.
When
When a user opens two different URLs on the same browser page, that is, two different HTML text files, htmldocument and renderview
The vertex does not change. The subtree under htmlhtmlelement and the corresponding rendering tree are changed.
Why is this design?
The reason is that htmldocument and renderview are subject to browser page settings, such as the page size and position in the entire screen. These settings and what to display on the page
The content is irrelevant. At the same time, htmldocument is bound to htmltokenizer and htmlparser. These two components are also irrelevant to a specific HTML content.
B. Multiple HTML Subtrees can be hung on the Root Node of the same DOM tree, and multiple renderblock Subtrees can be hung on the Root Node of the same rendering tree.
In
In the browser we currently see, each page usually only displays one HTML file. Although an HTML file can be divided into multiple frames, each frame carries an independent
HTML file, but from the DOM
In the tree structure, there is only one subnode under the root node of htmldocument. This subnode is htmlhtmlelement, which leads to the corresponding HTML text file.
. The same is true for the rendering tree. Currently, only one renderview sub-node is available under the root node of the renderview.
However
WebKit is designed to support hanging of Multiple HTML subtree under the same root. Although we do not see a page that contains multiple HTML files and multiple la S and rendering styles
But WebKit leaves space for future expansion. The personalization, multi-skin, and multi-view browser page rendering as envisaged in the previous article is not very difficult to implement with WebKit.
Figure 3. The construction sequence of the DOM tree and the rendering tree.
Courtesy link Source
3. Construction of DOM tree and rendering tree
Htmldocument
The most important component contained in the root node is htmltokenizer, and htmltokenizer contains htmlparser. Htmltokenizer
Read every character in the HTML text file from the beginning to the end, and extract each HTML tags and their content. Htmlparser is not only responsible for HTML dom
The construction of the tree is also responsible for the construction of the rendering tree.
In figure
Step 3: from step 3 to step 3, htmlparser generates an HTML Dom based on an HTML Tag
Tree node. From step 1 to step 2, generate the corresponding rendering tree node and associate it with the HTML dom
Tree nodes are linked together. The figure contains too many details and cannot be easily read. Figure 4 demonstrates steps 1 to 2.
Figure 4. An overview of the construction of a DOM tree node and its corresponding rendering Tree node.
Courtesy link Source
It is worth noting that when htmlparser generates a DOM tree node, a rendering Tree node is also generated accordingly. Connect the two new nodes. In other words, the rendering tree and DOM tree grow synchronously.
WebKit
Although htmlparser makes DOM tree and rendering
The method of simultaneous tree growth is worth discussing. If the data grows synchronously, the rendering tree must be tiled directly and strictly loyal to the DOM tree. Suppose Mr Cheng is Dom
Tree, and then generate Rendering
Tree, split the two, and have the opportunity to make WebKit play a more wonderful layout and rendering. Although the tiled flashback meets the reading habits of most people most of the time, however, the design is also
There will be a market. An example is the multi-viewpoint map at the end of the previous chapter. This layout and rendering are hard to imagine if we want to synchronize the DOM tree with the rendering tree.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
