Outline
Has been engaged for the B / S Architecture (B / S is also a C / S structure, but C / S write their own show and B / S have a relatively uniform display engine to achieve it) WEB developer field, the browser Browser too familiar. Whether you are a Microsoft JAVA stream or streams flow Or PHP, WEB development of new genre. No matter what kind of business structure your server uses, ORACLE database or MSSQL, from the user's perspective, this is what they can directly come into contact with, the user front-end user experience to the visual impression, match up, we also will always keep dealing with it, a lot of this comes from the root of the problem are, look at the internal implementation of the principle, perhaps for our development work will be more effective, from a pure developer to an expert in the field of technology, perhaps that these details.
This article discusses only HTML / CSS classes and the browser displays the relevant knowledge.
It does not include the javascript browser engine.
No HTTP client to the server.
It does not include the portion of server-side processing flow.
Type of browser
There are we now often use the five kinds of browser, Internet Explorer, Firefox, Safari, Chrome with Opera, the market contains three kinds of mainstream web browser layout engine, WebKi (chrome, safari, opera ), Gecko (Mozilla, Firefox, etc. using layout engine) and Trident (also referred MSHTML, layout engine used IE). (See http://www.cnblogs.com/liuzijing688/archive/2008/05/18/1201755.html ), you can run what you're using a browser to run sub cases http://html5test.com/ . Which Firefox, Chrome, Safari browser, part three source code is open source, some of the analysis based on the formal analysis of the source code of conduct. Incidentally, Chrome and other open source browser market share of more and more (see http://www.w3schools.com/browsers/browsers_stats.asp ) (IE6 usage http://www.ie6countdown.com / ), the introduction of HTML5 front-end development tool, HTML support gradually unified standard, low version of IE6 (7,8) such as phasing out, maybe in the future demand for CSS HACK compatibility and other scenarios will be less and less, focus on achieved rather than focusing on compatibility, improve our efficiency, reflecting the core values embodied thought, this is the true developer of the dry matter. From the user's point of view to think, just a little bit to change the mode of operation in exchange for true ease of use and enhance safety, is a good thing, I hope the future of product development only for IE9 or later.
The main responsibilities of the browser
Browser, we use every day, but if one day interviewing a development WEB field, you had to name his duties, not all of a sudden everyone can clearly express. I think the primary function of the browser is the confirmation of the displayed user wants WEB resources in various forms, usually we see the main resource format is HTML, of course, PDF, pictures, videos, locate resources by URI to achieve (Uniform resource Identifier).
W3C (World Wide Web Consortium) organizations to develop a set of HTML / CSS specification, a clear description of how the browser interprets the HTML file, and how to display it, W3C is also developing the field of tissue WEB standard protocols. Currently we have a common HTML mainly HTML4.01 with XHTML1.0, introduced by in 1999 ( http://www.w3.org/TR/html401/). The HTML5 specification is still in the development stage, although nearing completion and the major mainstream browsers are supported, but still not perfect. CSS is currently mainly CSS2.0 (( http://www.w3.org/TR/CSS2/), over time, hardware development and progress of the software industry, HTML5 / CSS3 gold combination will pop up Similarly, CSS version 3 is in progress. browser market before the flowers are blooming, 100 gongs, often only support most of the normative content while also developing their own development, which for WEB developers and end users say poses a serious compatibility issues. Fortunately, most browsers now gradually correcting this error behavior.
There are many similarities between the major browsers, which have a common interface elements:
- Address Bar
- Forward and backward buttons
- Bookmark Set
- Refresh, Stop button
- Home button
From the browser interface point of view, there is no relevant norms actually can do so consistent, really weird. This is the major browser vendors over the years due to imitate each other. HTML5 agreement did constraints of the browser interface elements which have just listed some common, such as the address bar, status bar, tool bar. Of course, each browser has some individual characteristics, such as firefox download manager. Introduce more play Browser User interface (browser interface elements) See chapter later, here no longer litany.
He says the browser is generally what we've seen, and then talk about the next major components of what browser, the relationship between each other is like.
Infrastructure browser
- Interface elements (or interface controls) - including a portion other than the display area on the web address bar, forward and back, bookmark menus window.
- Browser engine - rendering engine query and operation of the interface.
- Rendering engine - responsible for displaying the contents of the request. For example, requests to HTML, it is responsible for parsing HTML and CSS and the results are displayed in the window.
- Network - a network requests, such as HTTP requests. It includes independent implementations of platform-independent interfaces and platforms.
- UI rear - drawing the base element, such as a combo box with the window. It provides a platform-independent interface, the internal use of the appropriate operating system implementation.
- JavaScript interpreter. Execute JavaScript code for parsing.
- data storage. This is a persistence layer. The browser needs to store all data on the hard disk, such as cookies. The new HTML specification (HTML5) defines a complete (albeit lightweight) browser database: 'web database'.
It should be noted that the use of multiple instances with other different rendering engine chrome browser, a page for each Tab, Tab that is, each is a separate process.
The rendering process
The user requests an HTML text (text / html) via the network layer arrival browser rendering engine, the rendering operation start. Rendering each document typically no more than 8K of data blocks, wherein the rendering based on the flowchart as follows:
A detailed flow chart
Rendering engine first parses the HTML document is converted to a DOM tree, this is the first step. Then either inline, embedded or incorporated outreach formula CSS style will be resolved, at the same time generating additional trees for rendering a DOM tree - the render tree (render tree), with color rendering tree comprising, display attribute rectangular size, etc., and these sequences are basically the same rectangular display order. Then each node that performs layout processing the render tree to determine the display position on the screen. Finally, the tree is traversed and a UI rendering the last chapter is mentioned in the backend layers each node plotted.
The above steps is a gradual process, in order to improve the user experience, trying rendering engine displays the results as quickly as possible to the end user. It does not wait until all HTML will be parsed until they have finished create and layout the render tree. It will at the same time get the document content from the network layer has received the first partial content displayed.
DOM tree
DOM JAVASCRIPT for front-end developers, perhaps too familiar, DOM called the Document Object Model, which we call the document object model. We can see it as an HTML element external interfaces, these interfaces have javascript developers will be able to implement complex page function. DOM tree is the root Document object. There is also a DOM specification, visible http://www.w3.org/DOM/DOMTR . The difference is that the XML parser, HTML is relatively relaxed, if not the standard way of writing will be parsed, does not throw an exception like parsing errors.
Browser using HTML parser, parses the HTML text to a receiving member dom dom Object added to the corresponding position on the tree. We will use when parsing the DTD ( the Document Type Definition) specification describes, DTD contains all allowed elements (element) and the properties of these elements (attribute), as well as possible between the elements of the hierarchy. We see the market many types of DTD, it is for compatibility with previous writing HTML document, the current recommended standard DTD specification defines visible http://www.w3.org/TR/html4/strict.dtd , parsing HTML positive this specification is based, on top of lists information element type, element attributes and events support.
All external resources referenced by the default HTML is loaded asynchronously, that resolve and download resources at the same time, but the script resource (.js) is likely to run in the resolution process, such as document.write and the like, so the default script resources when the load is carried out simultaneously, unless you add a property defer or asyn like. Since the CSS DOM object does not change the structure of its resources is loaded asynchronously. This will produce a problem, such as <link href = a.css> and <script src = a.js>, a.js a.css may be used inside the class definition, but due to the loading is asynchronous a.css , a.js is synchronous execution, might error, in which case, the browser will be special handling when loading a script if the current time is still loaded style resource, the script load operation will be blocked to know style file loaded.
When the above resolution process is completed, the browser continues to be marked as the pace of deferred mode of resolution, then that is the real end of the whole analytical process. Document status is set to complete, while the load event triggers.
Render Tree
Browser while constructing the DOM tree structure is also another tree -Render Tree, and let us call DOM tree corresponding to Render tree and let us know DOM tree provides some access interface (DOM API) column is javascript, but this tree is not external. Its main role is to be displayed in accordance with certain HTML layout and style, uses knowledge of CSS. From the point of view MVC, the render tree can be seen as V, dom as a tree M, C is the specific scheduler than HTMLDocumentParser like.
Each node of the tree Render we call renderer, which is constructed by a base class of these types.
class
RenderObject{
virtual
void
layout();
virtual
void
paint(PaintInfo);
virtual
void
rect repaintRect();
Node* node;
//the DOM node
RenderStyle* style;
// the computed style
RenderLayer* containgLayer;
//the containing z-index layer
}
|
DOM tree and Render Tree
It can be said, no no DOM tree Render tree, but not a simple one to one relationship between them. We already know the render tree is used for display, of course, the invisible elements will not appear in this tree, for example, <head>, that you can think of, what does? In addition, diplay equal to none will not be displayed on the tree inside, but visibility equals hidden elements are displayed in the tree inside, you can think about yourself why. Having said that render tree, we have not seen it at its true capacity, which in the end is what it look like it? We look at the map.
DOM object type is very rich ah, what the head, title, div, while the Render Tree, relatively speaking, is relatively simple, after all, its job is to show after rendering a thing. From the graph we can see that some DOM elements that do not correspond to the renderer, and some DOM element has a corresponding several renderer, the situation corresponds to multiple renderer is ubiquitous, is to describe not clear how to solve a renderer displayed problems, such as select element, we need three renderer, One for Area at the Run the display, at the One for drop Down List Box and at the One for the Button.
There is also a relationship seen yet to know the figure above, i.e., the position of the renderer dom element may also be different. Added to say is that those who float: --- or position: absolute elements, because they are out of the normal document flow order, Render tree construction time will be constructed for their actual location.
CSS Styles
There are three ways the style source
- CSS rules, either in external style sheets or in style elements.
p {color:blue} - Inline style attributes like
<p style="color:blue" />
- HTML visual attributes (which are mapped to relevant style rules)
<p bgcolor="blue" />
After a final element calculation of possible matches to a lot of style rules, there is a certain order of priority among them, from low to high are:
- The browser's default style - see http://www.iecss.com/
- Personalize the user's browser preferences
- General HTML developer-defined style
- HTML developer-defined! Important styles
- Personalize the user's browser! Important styles
Style priority calculation formula
- count 1 if the declaration is from is a 'style' attribute rather than a rule with a selector, 0 otherwise (= a)
- count the number of ID attributes in the selector (= b)
- count the number of other attributes and pseudo-classes in the selector (= c)
- count the number of element names and pseudo-elements in the selector (= d)
Specific seen http://www.w3.org/TR/CSS2/cascade.html#specificity
Layout and display
After determining the renderer style rules above, then that is an important factor in the layout of the display. When the renderer constructed and added to the render tree, it does not position with size information, to determine such information for its process, we call layout.
From page development point of view, then get an HTML page, clear page functions to be achieved, first started working on the matter to do is layout, style, other problems such as background images, fonts, text friends like better said, the layout is people often feel little sense to deal with him but often can not control it, as a logical interface or interaction design although more difficult, but at least people touched the mind, it is necessary to elaborate on what this layout. We usually visit the website met nice layout is also necessary to take the time to analysis it go, non-front-end developers to master more than a little knowledge of interface design or interaction design like a good thing, not to mention a lot of cases are now a software product from design to produced the entire production process must be involved, very contractility.
Browser Page Layout The basic process is the visible area of the browser canvas upper left corner is (0,0) coordinate basis, from left to right, top to bottom, from the DOM root node painting, first determine the size of the display elements with position, this process is calculated by the browser, the amount of user-defined CSS in the browser is not necessarily the amount actually used, flexible layout is based on experience and relevant design experience comes from. If the display element has sub-elements have to display information go to sub-elements to determine if there are changes to the page layout after a whole can not re-layout does not re-layout, of course, because the script or the user operation is also possible at any time be re-layout, then back this section of road to the starting point.
The height and width
Height of display elements (height), determining the width (width) is. Height of the element to traverse calculated by the sub-elements, and the width is determined by itself.
Eventually all display elements is constructed as a box similar to what constitutes the entire layout results, box model the effect is as follows:
Box Model detailed description can be found http://www.w3.org/TR/CSS2/box.html
BOX TYPE
On each display element is also an important attribute display and the z-index, different types use different display rendering mode, even if it does not have to manually specify a default value in itself will exist, the specific default value, please refer to http: / /www.w3.org/TR/CSS2/sample.html .
block type of a cassette having its own area, inside raised a lot of inline box. Each block box member according to the overlaying order, each inline box layout order from left to right, will be enough if the width of the wrap.
Positioning program, coordinate values (left, top)
Normal-- location based on the basic layout process, from left to right, top to bottom incremental implementation.
Float-- out of the normal document flow, ranking the leftmost or rightmost residence.
Absolute-- its location information specified by the user.
With the size (width, height), position (left, top), box type (display: none, inline, block..etc) a display element basically finalized.
After the layout is complete, the browser will render the results come out, we finally saw the front page.
reference:
- http://www.cnblogs.com/mirror/archive/2013/04/05/3000517.html
- The front reading: the inner workings of the browser
Reproduced in: https: //www.cnblogs.com/JoannaQ/archive/2013/04/07/3003309.html