Detailed Web front-end performance optimization of load CSS and JS

The browser loads the page and the rendering process

Loading

• Ditan get browser IP domain name based on the DNS server
• Sending an HTTP request to the IP machine
• Server receives, processes and returns the HTTP request
• The browser returns the contents get

The rendering process

• The generated HTML DOM tree structure
• According to CSS generated CSSOM
• According RenaderTree start rendering and display
• Encountered <strcipt> will be executed and blocked rendering

Lazy loading

• Picture Picture resource request after entering the viewing area
• For many electricity providers and other images, page long business scenarios apply
• Reduce resource load invalid
• Too many concurrent load js resources will block the loading of the normal use of the site Epica

Preloading

• Pictures and other static resource requests in advance of use
• The use of resources when loaded from the cache, enhance the user experience
• Page shows the dependence of maintenance

Page reflux

• When a part (or all) because of the size of the element size, layout, hide and other changes in the render tree and needs to be rebuilt. This is called reflow (reflow)
• When the page layout and geometric properties change needs to reflux

Redraw

• When renader tree some elements need to be updated attributes, but these attributes only affect the element of appearance, style, and will not affect the layout, such as background-color.

Reflux will cause redraw and redraw necessarily cause reflux

Triggering a page layout of the property

• Box model related attributes will trigger heavy layout
• Positioning and floating property will trigger heavy layout
• Change the text inside the node structure will trigger heavy layout

Only trigger redraw property

New DOM process

　1. After acquiring a plurality of layers is divided into a DOM
　2. The nodes of each layer calculated pattern results (Recalculate style-- style weight)
　3. For each node generates graphics and the position (Layout-- reflux relayout )
　4. the filled layer of each node to draw bitmap (Paint Setup Paint-- and redraw)　
　5. uploaded layer as a texture to the GPU
　6. the plurality of layers to conform to the page to generate the final screen image (Composite Layers-- layers reorganization)

Chrome layer to create the conditions

1. 3D or perspective transformation (perspective transform) CSS properties
2. Using an accelerated video decoding <video> node
3. 2D context has 3D (WebGL) context or the acceleration <canvas> node
4. Hybrid plug-ins (like Flash)
5. CSS opacity do on their own animation or use webkit transform an animated element
6. It has accelerated CSS filter element
7. There is a descendant element node contains composite layer (one element has a child element, the child elements in its own layer in)
8. A lower element comprising a composite layer and a z-index sibling elements (in other words, the above elements are rendered in the composite layer)

Actual optimization points

1. Alternatively translate top with change
2. Alternative visibility with opacity
3. Do not modify the DOM one by one style, pre-defined class, and then modify the DOM className
4. After modifying the DOM offline, such as: first DOM to display: none (once Reflow), and then you modify 100 times, then put it up display
5. Do not attribute value DOM nodes in a loop as a loop in the variable
6. Do not use table layouts, may be small, a small change will result in re-layout of the entire table
7. Select the animation speed to achieve
8. For the new layer animation
9. Enable GPU hardware acceleration

May you become lifelong learners