Browser rendering methods, mainly divided into two kinds, the first is software rendering, the second is hardware rendering. If the rendering work is only done by the CPU, it is called software rendering, and if the rendering work is done by the GPU, it is called hardware rendering. Software rendering and hardware rendering have different caching mechanisms, as long as we use them properly, we can play the best effect.

open

Browsers also have a rendering method called hardware rendering, which uses the hardware capabilities of the GPU to help render pages, so how to set up?

  • Enable hardware acceleration inchrome“In the address barchrome://settings/Press Enter to scroll to the point and clickShow advanced SettingsScroll down to the page again and findUse hardware-accelerated mode
  • Enable GUP hardware acceleration inchrome“In the address barchrome://flags/#disable-accelerated-video-decodefindHardware-accelerated video decoding, click on theTo enable the

Complete the preceding two steps and restart the browser

What can do

We all know that GPU acceleration and hardware acceleration are used in page performance optimization. The browser will execute the following methods in each frame (1000/16ms), reduce or avoid layout, and paint will make the page smoother.

  1. JavaScript: JavaScript implements animation effects, DOM element manipulation, etc.
  2. Style (computed Style) : Determines what CSS rules should be applied to each DOM element.
  3. Layout: Calculates the size and position of each DOM element on the final screen. Since the layout of elements on a Web page is relative, changes in the position of any element will cause changes in other elements. This process is called reflow.
  4. Paint: Paint the text, colors, images, borders, and shadows of DOM elements on multiple layers.
  5. Composite: Combine layers in a reasonable order and display them on the screen.

A page is rendered with multiple layers and a complete composite layer that looks something like this:

The hardware rendering WebKit will, based on the specified criteria, group those RenderLayer objects together into a new Layer, which we collectively call the Compositing Layer, and cache it on the GPU. These composite layers are raised into separate layers that, once isolated, do not affect the layout of the rest of the DOM. In case of offset, transparency, etc., all the GPU needs to do is to transform the updated composite layer and send it into the Compositor for re-composition. With this advantage, we can elevate some DOM in the page whose layout often changes to separate layers.

In the image above, the yellow border indicates that a new composited layer has been rendered. The list on the left lists which render layers exist on the page, and the Details on the right shows the Details of these render layers, including the size of the render layer, the reason for its formation, etc.

How do I trigger the composition layer

  1. The document root node
  2. HTML5 Video or Canvas elements.
  3. Element has a sibling element with a low Z-index that contains a composite layer
  4. 3D or perspective transform CSS properties such as the commonly used (set translateZ(), backface-visibility to hidden)

Matters needing attention

That’s number three, in the original English version

Element has a sibling with a lower z-index which has a compositing layer (in other words it’s Rendered on top of a) composited layer)

If you have an element whose sibling is rendered in a composite layer, whose z-index is small, and the two elements overlap (explicit overlap can be achieved by using a margin negative, implicit overlap can be achieved by not specifying the z-index of itself and its floating sibling), This element (whether or not the hardware-accelerated style is applied) will also be placed in the composite layer.

Therefore, when using the page of rotation, animation loading, we should pay attention to follow the principle of minimal impact. If debugging sees a lot of yellow borders, we should pay attention.

When using 3D hardware acceleration to improve animation performance, it is best to add a Z-index attribute to the element, artificial interference with the composite layer sorting, can effectively reduce chrome to create unnecessary composite layer, improve rendering performance, especially mobile optimization effect.

About CSS 3 will change

CSS3 will-change is a web standard property, which is supported by Chrome/FireFox/Opera. It is used to inform the browser in advance of what will be done to the element, and let the browser prepare the appropriate optimization Settings in advance.

/* Keyword value */
will-change: auto;
will-change: scroll-position;
will-change: contents;
will-change: transform;        /* 
      
        example */
      
will-change: opacity;          /* 
      
        example */
      
will-change: left.top;        /* Two 
      
        examples */
      

/* Global value */
will-change: inherit;
will-change: initial;
will-change: unset;
Copy the code

Will-change can be accelerated, but cannot be abused…