Analyze the principle of css3 dynamic optimization from the browser rendering level

introduction

In h5 development, we often need to implement some dynamic effects to make the page visual effect better. When it comes to dynamic effects, we will inevitably think of the topic of dynamic performance optimization:

• Reduce page DOM operations, can use CSS to achieve dynamic effects without a line of js code
• Use absolute positioning to detach the DOM from the document flow, reducing page rearrangement (relayout)
• Use CSS3 3D properties to enable hardware acceleration

So, what is the relationship between CSS3 and animation optimization? This article will explain the principle of CSS3 animation optimization from the browser rendering level.

Browser page display process

For the home page, we need to understand the browser’s page display process:

• Javascript: Mainly responsible for business interaction logic.
• Style: According to the CSS selector, match the corresponding CSS style to each DOM element.
• Layout: Calculate the size and position of DOM elements displayed on the screen.
• Paint: Realize the visual effects (color, border, shadow, etc.) of a DOM element. Generally speaking, it is completed by multiple rendering layers.
• Composite: When each layer is drawn, the browser will merge all the layers into one layer in a reasonable order and display it on the screen.
  In this article we will focus on the Composite process.

Browser rendering principle

Before discussing Composite , we also need to understand the principle of browser rendering

From this figure, we can find:

• There is a one-to-one correspondence between DOM elements and Layout Object
• Layout Object with the same coordinate space belongs to the same Paint Layer (rendering layer), and a new Paint Layer can be created position、opacity、filter
• Some special Paint Layer will be considered as Composite Layer (composite layer/composite layer), Composite Layer has a separate Graphics Layer (graphics layer), and those Paint Layers that are not Composite Layer will be the same as the parent layer that has Graphics Layer Share one

Graphics Layer

The visual effect of the screen seen in our daily life can be understood as: multiple bitmaps are GPU , and the smallest unit of the bitmap is the pixel. As shown below:


So how is the bitmap obtained? Graphics Layer plays a key role. Each Graphics Layer has a Graphics Context , the bitmap is stored in the shared memory, Graphics Context will be responsible for uploading the texture GPU , and then by the GPU Perform composite rendering. As shown below:


What role does CSS play at the browser rendering level?

Most people’s first impression of CSS3 is that hardware acceleration can be turned on through 3D (such as transform) properties. When refactoring a certain project, considering animation performance issues, many students tend to:

1. Change 2Dtransform to 3Dtransform
2. Change the movement of left (top, bottom, right) to 3Dtransform
But the underlying principle hardware acceleration is actually that Paint Layer to Composite Layer

The following methods all have the same effect:
2. 3D properties enable hardware acceleration (3d-transform)
3. will-change: (opacity、transform、top、left、bottom、right)
4. Use fixed or sticky positioning
5. Animation (actived) or transition (actived) is applied to opacity, transform, and filter. Note that the animation and transition here need to be in the active state

Let's write two demo code 06156b1fb52465, and take you to analyze the actual situation in detail

demo1. 3D properties enable hardware acceleration (3d-transform)

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

<div class="composited">
  composited - 3dtransform
</div>


You can see that because of the CSS 3D transform used, a composite layer was created

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>

Here we have defined two keyframes(move、opacity) and two class(both、move) . At first, #composited of className = 'both' . After 5 seconds delay, className = 'move' , let’s take a look at the actual changes in the browser.

At first: #composited created a composite layer, and the fps did not fluctuate during the movement, the performance was very stable


After 5 seconds: The composite layer disappears, the fps will jitter during exercise, and the performance will start to become no longer stable


How to view composite layer and fps

Select More tools Dev Tools in the browser, and check Rendering in FPS meter


Animation performance optimization

Earlier, we mentioned the rendering pipeline that the page is rendered through. In fact, from the perspective of performance, the does not have layout and drawing links. In order to achieve the above effects, you need to use only those attributes Composite

Currently, only two attributes meet this condition: transforms and opacity (only supported by some browsers).
Related information can be viewed: css Triggers

Summarize

In simple terms, upgrading to a composite layer has the following benefits:

• The bitmap of the composite layer will be synthesized by the GPU, which is faster than the CPU
• When repaint is needed, only repaint itself is needed, and other layers will not be affected
• For transform and opacity effects, some browsers will not trigger Layout and Paint. For related information, please : 16156b1fb5273c css Triggers

shortcoming:

• Creating a new compositing layer is not free, it consumes additional memory and management resources.
• After the texture is uploaded, it will be processed by the GPU, so we also need to consider the bandwidth issue between the CPU and the GPU, and how much memory is available for the GPU to process these textures.

Most people like to use the 3D attribute translateZ(0) for so-called hardware acceleration to improve performance. But we also need to analyze the actual performance of the page and continuously improve the test, so that the correct way to optimize the performance is.

Reference

Wireless performance optimization: Composite-Amoy front-end team

---

Welcome to follow the Bump Lab blog: aotu.io

Or follow the AOTULabs official account (AOTULabs) and push articles from time to time.