ReprintedHttp://blog.sina.com.cn/s/blog_46d0a3930100d5pt.html
[20] structure and deconstruct of WebKit
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. What WebKit does in this process is centered around the DOM tree and renderingtree. In the previous chapter, we talked about the respective functions of these two trees. In this chapter, we use a simple HTML file to show the specific composition of domtree and rendering tree, at the same time, we will take a look at how WebKit constructs these two sequences.
Figure 1. from HTML to webpage, and the underlying DOM tree andrendering tree.
Courtesyhttp: // farm4.static.flickr.com/3351/3556972420_23a3020.c2_o.jpg
In Figure 1, a simple HTML text file is displayed on the upper left and a page drawn by WebKit renderingengine on the upper right. The page contains a title, "AI", a line of text, "ape" sintelligence ", 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 also followed the process from parsing this HTML text file to generating domtree and rendering tree to understand the specific components of DOM tree and renderingtree, and the construction steps.
Let's talk about domtree in the lower left corner of figure 1. Basically, each tag in an HTML text file corresponds to a class in WebKit, WebCore, and HTML. For example, <HTML> tag corresponds to htmlhtmlelement,
It should be emphasized that the DOM tree is a common data structure. Any XML text file can be translated into domtree, not just HTML text files. Generally, htmlclasses in WebKit/WebCore/html are subclasses of a class in WebKit/WebCore/DOM. That is to say,/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. Strictly speaking, the DOM tree in the lower left of Figure1 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 every node in the HTML domtree has a corresponding node in the rendering tree. The parent-child or sibling relationship between the node and the node is also one-to-one.
The exception is that the html dom tree has an htmlstyleelement leaf node, while the renderingtree does not have the corresponding leaf node. The reason is that each node of the renderingtree 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. The content contained by the htmlstyleelement leaf node in the htmldom tree has been incorporated into the attributes of the renderimage leaf node in the renderingtree. In addition, the node corresponding to htmlstyleelement does not exist in the renderingtree.
B. Each class in WebKit/WebCore/rendering does not have a one-to-one relationship with HTML tags.
Renderingtree is a general mechanism for planning page layout and rendering. This general mechanism can serve HTML pages, but not only serves HTML pages, we can use the rendering tree to plan the layout and rendering of pages in other formats. A WebKit rendering machine with DOM tree and renderingtree as the core 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. For example, it can be used to create email reading and manager, database management tools, and even game interfaces.
It is a little surprising that for htmlhtmlelement, htmlbodyelement, htmlheadingelement, and htmlparagraphelement, The renderingtree can echo the renderblock. If the difference between htmlheadingelement and htmlparagraphelement is not big, it is only a slight difference between the font and alignment. Therefore, renderingtree can use renderblock for unified response. The problem is that htmlhtmlelement and htmlbodyelement are two types of containers, which always appear in the middle of the DOM tree and never appear as leaf nodes. They correspond to such container nodes, why is renderingtree different from renderingtree in class? 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 domtree.
Courtesyhttp: // farm4.static.flickr.com/3010/3554310018_e34d271344_o.jpg
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 htmltag. The document that often appears in Javascript refers to this root. For example,
"Document. getelementbyidx (x). style. Background =" yellow ";"
HTML text files, usually starting with <HTML> and ending with
When you open a blank page in the browser, the user immediately generates the domtree root node htmldocument and the renderingtree 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. The root node is out of line with the specific HTML content, which may imply two design ideas of WebKit,
A. htmldocument, the root node of the DOM tree, And renderview, the root node of the renderingtree, can be reused.
When a user opens two different URLs on the same browser page, that is, two different HTML texts, the two root nodes htmldocument and renderview are not changed, the change is the sub-tree below htmlhtmlelement and the sub-tree of the corresponding renderingtree.
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 have nothing to do with what to display on the page. 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 renderingtree.
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 in terms of the domtree structure, there is only one subnode under the htmldocument root node, the child node is htmlhtmlelement, which leads to the Child tree corresponding to an HTML text file. The same is true for renderingtree. Currently, in the webpage we see, there is only one renderview subnode under the root node.
However, the WebKit design allows the hanging of Multiple HTML subtree under the same root. Although we have not seen a page with Multiple HTML files and multiple layout and rendering styles, WebKit will leave room 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 therendering tree.
Courtesyhttp: // farm4.static.flickr.com/3627/3554182242_b0bec88534_ B .jpg
The most important component contained in the htmldocument root node is htmltokenizer, and htmltokenizer contains htmlparser. Htmltokenizer reads every character in the HTML text file from the beginning to the end, and extracts each HTML tags and their content. Htmlparser is not only responsible for building htmldom trees, but also for building rendering trees.
In step 3, from step 3 to step 3, htmlparser generates an HTML domtree node based on an HTML Tag. From step 1 to step 2, generate the corresponding rendering tree node and link it with the HTML domtree node. The figure contains too many details and cannot be easily read. Figure 4 demonstrates steps 1 to 2.
Figure 4. An authentication of the construction of a DOM tree nodeand its corresponding rendering Tree node.
Courtesyhttp: // farm4.static.flickr.com/3306/3554259140_3deb9736ea_o.jpg
It is worth noting that when htmlparser generates a DOM tree node, A renderingtree node is also generated accordingly. Connect the two new nodes. In other words, the rendering tree and DOM tree grow synchronously.
WebKit is much appreciated, but htmlparser's practice of synchronizing DOM tree and renderingtree is questionable. If the data grows synchronously, the rendering tree must be exactly domtree in a tiled manner. Let's assume that we have a DOM tree and then generate a renderingtree to split the two, so we have the opportunity to make the WebKit play a more fantastic layout and rendering. Even though tiled and direct narration is consistent with the reading habits of most people most of the time, the design can also have a market. An example is the multi-viewpoint map at the end of the previous chapter. Such layout and rendering are hard to imagine if domtree and rendering tree grow in sync.
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
