The basic rendering
Enter the URL to the page loads from what happened completed
DNS resolution
TCP connection
to send HTTP requests
the server processes the request and returns an HTTP packet
browser parses rendering pages
### should have a browser function
network; resource management; web browsing; multi-page management; plug and management; accounts and synchronization; security; Developer Tools
The main function of the browser summed up in one sentence:
the user input url into a visualized image
### core browser (rendering engine)
has one of the most important module in the browser, its main role is to turn the page to visualize the image results. This module is the browser kernel, usually it is also known as rendering engine.
----- IEs> Trident
Safari ------> the WebKit
the Chrome; Opera -----> Blink
Firefox ------> the Gecko
### rendering engine
a rendering engine including: HTML parser, CSS parser module layout layout, javascript engine, graphics module
## rendering process
1. The URL of the page to build the entire process DOM tree
1) When the user enters a URL, the Webkit call resource loader loads the corresponding URL page
2) loader module relies on the network to establish a connection, send the request and receive a reply
3 ) receiving the Webkit various data pages or resources, some resources may be synchronous or asynchronous acquisition
4) web page is converted to HTML parser a number of words (the Token)
. 5) Construction of the resolver node according words ( node), forming a DOM tree
6) If a node needs to rely on other resources,
such as js css pictures and video, call the resource loader to load them, but these are asynchronous,
not hinder continue creating dom tree; concurrent execution order load
If the resource is css, then
call CSS parser interprets the CSS interpreted as internal representation structure (CSSDOM)
If the resource is javascript, then
call the Javascript engine that interprets and executes,
7) blocking
css blocked
css introduced block the page in the form of link in the head in rendering
Why?
Avoid splash phenomenon
js blocking
direct introduction of js block the rendering of the page
Why?
Javascript code may modify the DOM tree structure
8) pre-parsed
WebKit and Firefox have carried out this optimization. When performing js script, other threads will resolve the rest of the document,
Find and load other resources needed by the network load. In this manner, resources can be loaded on the parallel connection,
thereby increasing the overall speed. Please note that pre-parser does not modify the DOM tree, but leaves that to the main parser;
pre-parser will resolve external resources (such as external scripts, style sheets and images) references.
2. from the DOM to the visual image
. 1) is interpreted CSS parser CSS file into an internal structure represented by (CSSDOM)
2) CSS parser After completion, the style information in the additional explanations DOM tree, which tree is RenderObject
3) RenderObject created at the same time, the Webkit creates RenderLayer the structure of the web, while building a drawing context
4) drawing context to generate the final image in accordance with (a process relies graphics library)
3. The above description is a complete rendering process, but many modern web pages are dynamic, which means that after rendering is complete, because the animation or user interaction page,
the browser has in fact been kept repeating to perform the rendering process . (Redraw rearrangement), above figures indicates the basic sequence, this is not strictly the same,
this process may be repeated or may intersect. Browser is a side edge rendering resolution process
Layer ### css
browser when rendering a page, the page will be divided into a number of layers, layer some small, have one or more nodes on each layer.
When rendering the DOM, the browser actually work are:
dividing the DOM 1. Obtain multiple layers
2. compute nodes each layer style results (Recalculate style-- style weight basis)
3. and generating pattern position (Layout-- rearrangement, reflux) for each node
4. the node drawn to fill each layer bitmap (Paint-that redraw)
5. uploaded to the GPU as a texture layer
6. compliance a plurality of layers to generate a final page screen image (Composite Layers-- layer recombinant)
Conditions layer created ###
Chrome satisfying any of the following conditions will create a layer:
1. CSS property has a 3D transform
2. accelerated video decoding <video> node
3. <canvas> node
4. CSS3 animation node
5 has accelerated CSS elements attribute (Will-Change)
6. the lower element has a composite layer and contains a z-index sibling elements (in other words, the above elements are rendered in the composite layer)
### redraw (Repaint)
redraw browser behavior change is the appearance of an element triggered, such as changing the outline, background color and other attributes. The browser will be redrawn according to the new attribute of the element,
the element presents a new look. Will not bring back redraw the layout, it is not necessarily accompanied by rearrangement.
Note that, if an element needs to redraw the layer, then the entire layer needs to be redrawn.
For example one layer may contain many nodes, which has a gif FIG., Each frame of FIG. Gif, other nodes will return the entire layer, and generates a final bit map layers.
So it needs to force a special way gif a map of their own layer (translateZ (0) or translate3d (0,0,0)
CSS3 animation is the same (Fortunately, most cases they will browser CSS3 animations for the create a layer node)
### rearrangements (Reflow reflux)
rendering objects when created and added to the render tree does not include location and size information. The process of calculating these values is called layout or rearrangement
"redraw" does not necessarily need to "rearrangement", such as changing the color of a page element, it will only trigger a "redraw" and would not trigger a "rearrangement" because layout has not changed.
However, the "rearrangement" will inevitably lead to "redraw", such as changing the location of a page element, it will simultaneously trigger a "rearrangement" and "redraw", because the layout has changed.
###触发重绘的属性
* color * background * outline-color
* border-style * background-image * outline
* border-radius * background-position * outline-style
* visibility * background-repeat * outline-width
* text-decoration * background-size * box-shadow
Rearrangement trigger ### (reflux) attribute
box model related property triggers and re-positioning of layout attributes will trigger re-floating layout: changing the internal structure of the text node will trigger the re-layout:
* width * Top text-align = left *
* height * bottom * overflow-Y
* padding * left * font-weight
* margin * right * overflow
* the display * position * font-Family
* border-width * a float * Line-height
* border * Clear * vertival-align = left
* min-height * white-space
### common trigger operation rearrangement
costs Reflow is much higher than the cost of Repaint. DOM Tree where each node will have a reflow method,
reflow a node is likely to lead to cervical nodes, even reflow parent and sibling nodes point. On some high-performance PCs and probably not what,
but if reflow occurs on the phone, then this process is very painful and power-hungry.
Therefore, the following actions are very likely to be relatively high cost.
When you add, delete, modify the DOM node will cause Reflow, Repaint.
When you move the position of the DOM
when you modify the CSS style of the time.
When you Resize the window (mobile terminal does not have this problem)
when you change the default font page.
When acquiring certain properties (width, height ...)
Note: display: none will trigger reflow, and visibility: hidden will only trigger repaint, because the position has not changed.
### optimized
if we need to make to improve the performance of rendering animation or other nodes need to do is to reduce the browser at run time needs to be done (in step 1234 is reduced)
1. Calculate the style needs to be loaded on to the node results (Recalculate style-- style weight)
2. each node generates graphics and the position (Layout-- reflux relayout)
3. each node is filled into a layer (Paint Setup Paint-- and redraw)
4. the composition layer on the page (Composite Layers-- layer recombinant)
Transform CSS3 make use of the position of the mobile element 1. Transform operation on the top left in place like
transform (Transform) and change the transparency (opacity) only affect the composition of the layer
2 instead of using the opacity visibility
transparency even not trigger weight painted?
When changing transparency, before simply reduce GPU when the painting was already good texture alpha values to achieve the desired effect, we do not need a whole redrawn.
But this premise is this opacity is modified itself must be a layer, the lower layer if there are other nodes, GPU also their transparency
3. Do not use table layouts
4. several times to change the style property operations into one operation
Do not modify the DOM one by one style, pre-defined class, and then modify the DOM className
5. the off-line and then modify the DOM
Because display property to none of the elements are not rendering tree, hidden elements of the operation will not lead to other elements rearrangements.
If you want to operate a complex element, you can hide it, after the completion of the operation display. Such rearrangement is triggered only two times when hiding and showing.
6. Use Document debris
7. Do not put the property value of certain DOM nodes in a loop as a loop variable
when you request by asking for style information to the browser, it will make the browser flush queue, such as:
1. the offsetTop, the offsetLeft, offsetWidth, the offsetHeight
2. scrollTop / Left / the Width / the Height
3. clientTop / Left / the Width / the Height
4. width, height
when you request some of the properties above, the browser in order to give the most accurate value you need to flush the queue,
as the queue may be affected in the operation of these values. Even if you get the layout information layout and style information element with the recent occurrence or change regardless of
the browser will be forced to refresh render queue.
8. Animation implementation, enabled GPU hardware acceleration
9. new layer of animation elements, to improve the z-index of animation elements
Layers
Redraw rearrangement
