The introduction

In H5 development, we often need to implement some motion effects to make the page look better, and when talking about motion effects, the topic of motion performance optimization inevitably comes to mind:

  • Reduce page DOM manipulation, you can use CSS elements to achieve the dynamic effect of less than a line of JS code
  • Take the DOM out of the document flow with absolute location decoupling, reducing page relayout
  • Enable hardware acceleration with CSS3 3D properties

So, what is the relationship between CSS3 and dynamic optimization? This paper will tell the principle of CSS3 dynamic optimization from the browser rendering level

Browser page display process

Home page, we need to understand the browser page presentation process:

  • Javascript: Mainly responsible for business interaction logic.
  • Style: Matches each DOM element with a CSS Style based on the CSS selector.
  • Layout: Calculates the size and position of DOM elements on the screen.
  • Paint: Implements the visual effects (colors, borders, shadows, etc.) of a DOM element, typically done by multiple rendering layers.
  • Composite: When each layer is drawn, the browser will merge all layers into one layer in a reasonable order and display it on the screen.

In this article we will focus on the Composite process.

How browsers render

In the discussionCompositeBefore that, we need to take a look at browser rendering

From the picture, we can find that:

  • DOM elementswithLayout ObjectThere is a one-to-one correspondence
  • In general, they have the same coordinate spaceLayout ObjectBelong to the samePaint LayerThrough thePosition, opacity, filterAnd other CSS properties to create a new Paint Layer
  • Something specialPaint LayerWould be considered to beComposite Layer, the Composite Layer has a separateGraphics LayerThe Paint Layer that is not a Composite Layer is shared with the parent Layer that owns the Graphics Layer

Graphics Layer

The visual effect we see on the screen in our daily life can be understood as: through multiple bitmapsGPUCompositing renders to the screen, and the smallest unit of bitmap is pixel. The diagram below:

So where do bitmaps come from,Graphics LayerPlays a key role in everyGraphics LayerThere is aGraphics ContextBitmaps are stored in shared memory.Graphics ContextWill be responsible for bitmap astextureUploaded to theGPU, and then synthetic rendering by GPU. The diagram below:

What role does CSS play at the browser rendering level

Most people’s first impression of CSS3 is that hardware acceleration can be enabled through 3D(such as Transform) attributes. Many students tend to change 2D attributes to 3D attributes in the reconstruction of a project considering animation performance issues, but hardware acceleration is enabledThe underlying principleIt’s all aboutUpgrade the Paint Layer to Composite Layer The following methods all work in the same way:

  • 3D properties Enable hardware acceleration (3D-Transform)
  • Will-change: (opacity, transform, top, left, bottom, right)
  • Use Fixed or sticky to locate the fault
  • Animation (actived) or transition(actived) is applied to opacity, Transform and filter. Note that animation and transition must be in active state

Let’s write two pieces of demo code to walk you through the actual situation

Demo1.3d Enable hardware acceleration (3D-transform)

.composited{
  width: 200px;
  height: 200px;
  background: red;
  transform: translateZ(0)
}
</style>

<div class="composited">
  composited - 3dtransform
</div>
Copy the code

As you can see, the CSS 3D Transform was used to create a composite layer

Demo2. Apply animation(actived) or transition(actived) to opacity, transform and filter

<style>
@keyframes move{
  0%{
    top: 0;
  }
  50%{
    top: 600px;
  }
  100%{
    top: 0; }}@keyframes opacity{
  0%{
    opacity: 0;
  }
  50%{
    opacity: 1;
  }
  100%{
    opacity: 0; }}#composited{
  width: 200px;
  height: 200px;
  background: red;
  position: absolute;
  left: 0;
  top: 0;
  
}
.both{
  animation: move 2s infinite, opacity 2s infinite;
}
.move{
  animation: move 2s infinite;
}
</style>

<div  id="composited" class="both">
  composited - animation
</div>
<script>
setTimeout(function(){
  const dom = document.getElementById('composited')
  dom.className = 'move'
},5000)
</script>
Copy the code

#composited className = ‘both’; after 5 seconds delay, className = ‘move’; Let’s look at the actual changes to the browser.

At first:#composited creates a composite layer and FPS is very stable when moving

After 5 seconds:The composite layer disappears and the FPS shakes when moving

How to view composite layers and FPS

Animation performance optimization

Earlier, we talked about the rendering pipeline that the page goes through, but in terms of performance,An ideal rendering pipeline would have no layout and no drawingIn order to achieve the above effect, you need to use only those triggersCompositeProperties.Currently, only two properties satisfy this condition:transforms 和 opacity.

Related information can be viewed:css Triggers

conclusion

Ascension to the composite layer has the following benefits in brief:

  • The bitmap of the composite layer will be synthesized by the GPU faster than the CPU
  • When repaint is required, only repaint itself is required and no other layers are affected
  • For transform and opacity effects, some browsers do not trigger Layout and Paint, see: CSS Triggers

Disadvantages:

  • Creating a new composition layer is not free; it consumes additional memory and management resources.
  • Textures are uploaded and processed by the GPU, so we also need to consider the bandwidth between the CPU and GPU, and how much memory is available for the GPU to process these textures

Most people love using the 3D attribute translateZ(0) for so-called hardware acceleration to improve performance. However, we also need to analyze the actual performance of the page and constantly improve the test, which is the right way to optimize performance.

The resources

Wireless performance optimization: Composite