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 operations, you can use CSS to achieve dynamic effect not 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 space
Layout ObjectBelong to the samePaint LayerThrough thePosition, opacity, filterAnd other CSS properties to create a new Paint Layer - Something special
Paint 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) properties. When reconstructing a project, many students tend to consider animation performance issues:
- Change 2Dtransform to 3Dtransform
Change left (top, bottom, right) to 3Dtransform
But with hardware acceleration onThe underlying principleIt’s all aboutUpgrade the Paint Layer to Composite Layer 
- 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
activeTo just go
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
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 the FPS does not fluctuate while moving, so the performance is stable
After 5 seconds:The composite layer disappears, FPS jitter occurs when moving, and the performance becomes unstable
How to view composite layers and FPS
In the browserDev ToolsSelect theMore toolsAnd check theRenderingIn theFPS meter
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(Only supported by some browsers).
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 – Amoy front-end team