WebKit Browser Rendering Impact factor analysis

The actual meaning of each rendering part on Chrome:

Parse Html:

Sends an HTTP request, gets the requested content, and then parses the HTML process.

Recalculate Style:

Recalculate the style, it calculates a style, and the layout does something completely different. Layout calculates the absolute position and size of an element, or "Compute layout".

The thing to do when the recalculate is triggered is to handle the style that JavaScript sets for the element. The recalculate style calculates the render tree (render tree) and then starts the page rendering from the root node, attaching the CSS to the DOM process.

Any attempt to change the style of an element will trigger recalculate. As with layout, it is triggered only after JavaScript execution is complete.

Layout:

Calculates the layout on the page, that is, the position and size of the element in the document. As mentioned above, layout calculates location information. Any style that is likely to change the position or size of an element will trigger this layout event, such as width, height

Rasterizer:

Rasterization, the general Android phone will be rasterized, the grating is mainly for the graphics of a grid process. Low-end phones in this part of the time is quite a lot.

Paint:

any changes to the display on the page will trigger the paint? 0?2. Include drag scroll bar, mouse selected text, and so on without changing the style, only change the display results of the action will trigger paint.

The job of paint is to show the user the part of the document that is visible to the user. Paint is drawing the results of layout and recalculate calculations directly on the browser form, which does not implement specific element calculations.

Image Decode:

Image decoding, the process of parsing a picture into a browser.

Image Resize:

Image size settings, image loading analysis, if you find that the size of the image is not the actual size (CSS changed the width of the height), you need to resize. The larger the resize, the longer it takes, so try to output the original size of the picture.

Composite Layers:

Finally, merge the layers and output the page to the screen. The browser draws some special-style dom structures to other layers during the rendering process, somewhat similar to the Photoshop layer concept. A picture is composed of multiple layers in Photoshop, and the page that the browser eventually displays is actually composed of multiple layers.

What causes the new layer to be created:

1. CSS properties for 3D or perspective transformations

2. <video> elements using hardware accelerated video decoding

3. <canvas> elements of 2D context with 3D (WebGL) context or hardware acceleration

4. Combination plug-in (i.e. Flash)

5, with CSS transparency animation or using animated WebKit transform elements

6. Elements of CSS filters with hardware acceleration

In CSS, different attributes will trigger different layout or paint, so you should take these aspects into account when changing CSS properties via JS. Such as:

Css:

How to optimize rendering time

1, in order to ensure the flow of the page, it is necessary to ensure that no more than 2 render tree updates within 60fps. 0?2 for example, only a few of the following actions in 16ms are normal and correct ? 0?2:

2, the page scrolling, you need to avoid unnecessary rendering and long-time rendering.

1) position:fixed

Fixed positioning will not stop rendering when scrolling, especially if there is a fiexd at the top of the page, there is a fixed at the bottom of the page similar to the top, then the entire page will be rendered when scrolling, which is very inefficient. can add Transform:translatez (0);

2) Overflow:scroll

3) Hover effects

Some: hover pseudo-class will be accidentally triggered when the page scrolls, such as the hover effect has a shadow, rounded corners and other time-consuming properties, the proposed page scrolling, first cancel the hover effect, scrolling stop after adding hover effect. This can be controlled by adding a class name in the outer layer.

Long-time rendering includes:

1) Complex CSS

2) Image decodes

Here in particular the images of image decodes and Images Resize these 2 processes on the mobile side are very time-consuming, such as:

WebKit Browser Rendering Impact factor analysis