Go to WebKit

 

WebKit is an open-source project. Its source code can be downloaded here, http://webkit.org/building/checkout.html. WebKit is a complicated software system. Open the source code and you can see that there are many folders in it. However, the source code of WebKit is well organized. Although there are many programs, the structure is clear. Relatively speaking, the source code of the gecko rendering machine used by Firefox is messy and cannot be easily understood.

Chairman Mao taught us that "our principle is that the route determines everything, there are many people, and there are many guns, which cannot replace the correct route. If the route is correct, everything can be lost if the route is incorrect. The route is a outline ". For software engineering, the chairman's instruction is still instructive. We may wish to change the chairman's guidance. "The software engineering principle is that the structure determines everything, there are many codes, and there are many functions, which cannot replace the correct structure. If the structure is correct, everything will happen after continuous improvement. If the structure is incorrect, it can be lost. Structure is a outline ". In modern software engineering, most of the structures refer to the object-oriented structure. The WebKit Source Code strictly follows the object-oriented principle. The benefits of this method are not only conducive to subsequent development and maintenance, but also facilitate the study of source code.

WebKit
The source code consists of three parts: 1. WebCore, 2. WebKit, and 3. JavaScript. When entering an HTML file, WebCore is responsible for parsing each HTML file.
Tag, and their subordination, generate a tree-like data structure (DOM tree), and then combine the CSS definition specified in the HTML file to determine the DOM
The position of each node in the tree on the entire page, as well as the color font, that is, the layout and rendering. The layout and rendering effect are stored in another tree-like Data Structure in the form of attributes and attribute values. The other tree is called rendering.
Tree. Generally, the structure of the rendering tree is roughly the same as that of the DOM tree. Basically, each node in the DOM tree is
The tree has corresponding nodes.

There are two questions: 1. Why do we have both Dom trees and rendering trees? Isn't it easier to combine them into one memory? 2.
Why should the rendering tree be consistent with the DOM tree? What if they are different? We will discuss these two questions later.

Rendering
Tree only determines how to render the HTML page, a bit like the employees in the headquarters to develop a battle plan. However, the specific rendering methods, including drawing, drawing, and line fonts, are different in different operating systems and even in different hardware environments. This is like a trap and requires front-line soldiers. WebKit in WebKit source code
Package, the programs included in it are the front-line soldiers. WebKit packages include win, Mac, GTK, QT, wx, etc.
Subpackages is a rendering method tailored to different OSes and different cross-platform graphics libraries. It is related to different OSes, not only rendering, but also capturing user-triggered UI events such as moving the mouse and clicking the keyboard. All these OSes-related programs are stored in WebKit
Package.

The third main part of WebKit source code is JavaScript Engine. Javascript
Engine is used to parse and execute JavaScript code. Javascript engine is not described in this series.

DOM tree and
Must the rendering tree be consistent?

"
This is a big copy of the world's articles. There are few articles starting from the beginning to the end, and the words are original. The vast majority of them are based on the knowledge of the predecessors and others, and they are made up of a little bit of play and creation. The progress of human civilization has gradually accumulated over 1.1 drops. Since the article cannot be separated from the cited classics, when reading the article, you will inevitably need to consult the relevant literature. Before the emergence of the web, it was time-and effort-consuming to view documents. Tim, working at the European Atomic Energy Research Organization (CERN) in March 1989
Berners-Lee proposes to establish an interconnected information system based on the TCP/IP protocol. This proposal quickly evolved into world wide
Web (Web for short), which greatly facilitates literature review. The core of web is hyperlink. When writing a webpage, you can set implicit
Hyperlinks. When a reader clicks these words, the computer automatically opens another webpage based on the hidden hyperlink behind the words. Note the word "implicit", which means that the presentation of the article is not exactly the same as the content of the article. Considering this problem, Tim Berners-Lee suggested to develop a standard for each web page, which is "hypertext mark language" (HTML. The initial html
22 identifiers, marked with two functions: 1. content, including references, 2.
Display format. In the same HTML file, mixing the content and format is a design error. Over the past 20 years, the current HTML file is basically content-oriented, and the format is separated and defined by CSS. In addition, the interactions with readers are added, which are usually defined by JavaScript.

Why is separation better than merging? For different readers, you can use different CSS to change the display mode. For example. For new humans, you can use cartoon icons to replace certain texts. For old readers, you can change the font size to top-down and right-to-left layout. For drivers, you can use recitation instead of text display.

Content and format separation, not equivalent to Dom
Tree and rendering tree coexist. If the content is carried by HTML and the format is defined by CSS, we can use only one tree to store not only the content but also the format attributes. Dom
Tree and rendering tree separation, the advantage is that the same DOM tree can correspond to multiple Rendering
Trees, that is, the same content, can be layout and rendered in different ways. In today's browsers, a DOM tree corresponds to multiple rendering trees.
Trees is not common, because the same page usually has only one style of layout and rendering. However, in video games, the same scenario has multiple different perspectives, such as gunshots, onlookers, and portraits. In other words, WebKit not only meets the general needs of today's browsers, but also provides some potential features that have not yet been widely used. Set dom
Tree and rendering
The tree separation method wastes some memory space, but focuses on the future. The structure design like WebKit has laid the groundwork for future development.

Currently, rendering
The tree structure is basically the same as that of the DOM tree. each node in the DOM tree is
Tree has corresponding nodes, and the inheritance relationships between parent and child nodes are also consistent. However, the WebKit Code also paves the way for rendering tree structure alienation. Rendering
Tree structure, not necessarily related to Dom
Tree. For example, web pages in the future may provide personalized editing methods. When you open a page for the first time, you will see a standard page, that is, rendering.
Tree and Dom
Tree. Readers can extract some paragraphs from the webpage, delete uninterested paragraphs, change the color, Font, or even la S. When you visit this page again in the future, this reader will be able to see personalized pages. The so-called personalized implementation method is actually building another Rendering
Tree. If he wants to restore a standard webpage, he only needs to re-call the standard rendering tree and re-render the webpage. In this example, we can see the personalized Rendering
Tree, standard rendering consistent with DOM tree
Tree.

For another example, a general map is a map overlooking the map, and the whole map maintains the same angle of view. Can a map contain multiple perspectives? It sounds incredible, but some people have tried this novel and bold idea. See figure
1. If DOM tree and rendering tree are applied, they can be interpreted as DOM tree and rendering.
Tree is inconsistent. The top half of the map overlooking the view, corresponding to the Child tree of the rendering tree, and Dom
Tree-related Subtrees correspond to each other. But the lower half of the horizontal view angle map corresponds to the sub-tree of the rendering tree, which is Dom
A subset of tree-related Subtrees. Some buildings and roads are blocked by buildings in front of them.

Figure 1. Here-and-There map of mahanttan
Courtesy

Http://farm3.static.flickr.com/2464/3545962330_8bc666f68e_o.jpg

WebKit structure and deconstruct

 

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 these two functions. In this chapter, we use a simple HTML file to demonstrate Dom.
The specific structure of the tree and rendering tree, And the anatomy of how WebKit constructs these two trees.

Figure 1.
From HTML to webpage, and the underlying DOM tree and rendering
Tree.
Courtesy

Http://farm4.static.flickr.com/3351/3556972420_23a30366c2_o.jpg

1. Dom
Structure of tree and rendering tree

In Figure 1, the upper left is a simple HTML text file, and the upper right is WebKit rendering.
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 the process, from parsing this HTML text file to generating dom
The entire process of tree and rendering tree is designed to understand DOM tree and rendering
The specific components of the tree and the construction steps.

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
Corresponding to htmlhtmlelement, Corresponding 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. Entire DOM
Tree structure, which corresponds to the nesting relationship of tags in HTML text files. In a word, Dom
Tree is to translate HTML text files into an object tree structure.

It should be emphasized that the DOM tree is a common data structure, and any XML text file can be translated into dom
Tree, not limited to HTML text files. Total HTML in WebKit/WebCore/html
Classes is basically a subclass 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. Strictly speaking, the DOM in the lower left of Figure 1
Tree is actually an html dom tree.

Looking at the rendering tree, the notable feature is that,

A. The entire Rendering
Tree structure, which corresponds to the one-to-one html dom tree structure. That is to say, almost every node in the html dom tree is
The tree has corresponding nodes. The parent-child or sibling relationship between the node and the node is also one-to-one.

With the exception, in the HTML dom
Tree has htmlstyleelement leaf nodes, but there is no corresponding leaf node in rendering 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, and 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 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. For example, it can be 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, there are only slight differences between fonts and Alignment Methods, so Rendering
Tree can be integrated with renderblock. The problem is that htmlhtmlelement and htmlbodyelement are two containers, which always appear in the DOM
The middle of the 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.
Construction Sequence of the root of the DOM tree.
Courtesy

Http://farm4.static.flickr.com/3010/3554310018_e34d271344_o.jpg

2. Dom
Root Node of tree and rendering tree

In the previous section, we mentioned that htmldocument is a special class, which is the entire HTML Dom.
Tree root node, 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 The tag does not correspond to the root node of the DOM tree, but to the first subnode below the root, that is, the htmlhtmlelement node.

See figure 2
Unexpectedly, when you open a blank page in the browser, the DOM tree root node htmldocument and rendering are generated immediately.
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. The root node is out of line with the specific HTML content, which may imply two design ideas of WebKit,

A.
The root node htmldocument of the DOM tree, and rendering
Tree Root Node renderview, which 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 sub-tree below htmlhtmlelement and the corresponding Rendering
Tree.

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.
The root node of the same DOM tree can contain multiple HTML Subtrees, and the same rendering
The root node of the tree can be hung with multiple renderblock Subtrees.

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 terms of tree structure, there is only one subnode below the root node of htmldocument. This subnode is htmlhtmlelement, which leads to the subtree corresponding to an HTML text file. Rendering
Tree is also the same. Currently, only one renderblock subnode is under the root node of an renderview on the webpage.

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.
Construction Sequence of the DOM tree and the rendering tree.
Courtesy

Http://farm4.static.flickr.com/3627/3554182242_b0bec88534_ B .jpg

 
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 step 3, from step 3 to step 3, htmlparser
Tag generates an html dom 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 authentication of the construction of a DOM tree node and its corresponding
Rendering Tree node.
Courtesy

Http://farm4.static.flickr.com/3306/3554259140_3deb9736ea_o.jpg

It is worth noting that every time htmlparser generates a DOM
When a tree node is created, an rendering Tree node is also generated accordingly. Connect the two new nodes. In other words, rendering tree and Dom
The tree grows synchronously.

WebKit is much appreciated, but 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. 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. If you want dom
Tree and rendering tree grow synchronously, so such layout and rendering are hard to imagine.