stay h5 In development , We often need to implement some dynamic effects to make the page more visual , When we talk about dynamic efficiency, we will inevitably think of the topic of dynamic performance optimization :
Reduce pages DOM operation , have access to CSS No more than one line of action js Code
Use absolute positioning to disengage DOM Off stream , Reduce page rearrangement (relayout)
Use CSS3 3D Property to enable hardware acceleration
that ,CSS3 What does it have to do with dynamic optimization , This article will talk about... From the browser rendering level CSS3 Dynamic optimization principle of
Browser page display process —
home page , We need to know about the page display process of the browser :
Style: according to CSS Selectors , For each DOM Element matches the corresponding CSS style .
Layout: Specific calculation DOM The size and position of the element displayed on the screen .
Paint: Achieve one DOM Visual effects of elements ( Color 、 Frame 、 Shadow, etc ), In general, it is done by multiple render layers .
Composite: When each layer is drawn , The browser will merge all layers into one layer in a reasonable order , Show to screen . In this article, we will focus on
CompositeThe process .
Browser rendering principle —
In the discussion
Composite Before , We also need to understand the principle of browser rendering
From this picture , We can find out ：
Layout ObjectThere is a one-to-one correspondence
Generally speaking , Having the same coordinate space
Layout ObjectBelong to the same
Paint Layer ( Render layer ), adopt
position、opacity、filteretc. CSS Property can create a new Paint Layer
Paint LayerWould be considered to be
Composite Layer ( Composite layer / Composite layer ),Composite Layer Have a separate
Graphics Layer ( Graphics layer ), And those who are not Composite Layer Of Paint Layer, Will and have Graphics Layer The parent layer of the
The visual effect of the screen we see in our daily life can be understood as ： By multiple bitmaps
GPU Composite rendering to screen , The smallest unit of bitmap is pixels . Here's the picture ：
So how do you get bitmaps ,
Graphics Layer It plays a key role , Every
Graphics Layer There is one.
Graphics Context, Bitmaps are stored in shared memory ,
Graphics Context Will be responsible for the bitmap as
texture Upload to
GPU in , Again by GPU Composite rendering . Here's the picture ：
CSS What role does it play at the browser rendering level
Most people are interested in CSS3 First impression of , It's through 3D( Such as transform) Property to turn on hardware acceleration , Many students are refactoring a project , Considering animation performance , Will tend to :
take 2Dtransform Change it to 3Dtransform 2. take left ( top、bottom、right ) Change the movement of to 3Dtransform
But turn on hardware acceleration
Underlying principleIn fact, it is
take Paint Layer Promoted to Composite LayerThe following methods all work in the same way ：
3D Property to enable hardware acceleration (3d-transform)
Use fixed or sticky location
Yes opacity、transform、filter Applied animation(actived) or transition(actived), Notice the animation And transition Need is in
Let's write two paragraphs
demo Code , Take you to analyze the actual situation
demo1. 3D Property to enable hardware acceleration (3d-transform)
composited - 3dtransform
It can be seen that it is because of the CSS 3D transform, Created a composite layer
demo2. Yes opacity、transform、filter application animation(actived) or transition(actived)
animation: move 2s infinite, opacity 2s infinite;
animation: move 2s infinite;
<div id="composited" class="both">
composited - animation
const dom = document.getElementById('composited')
dom.className = 'move'
Here we define two
keyframes(move、opacity), There are two
class(both、move), At first
className = 'both',5 After the second delay ,
className = 'move', Let's take a look at the actual changes in the browser .
At first ：
#composited Created a composite layer , And when you exercise fps No fluctuations , Very stable performance
5 Seconds later ：
The composite layer disappears , In sports fps There's a jitter , Performance starts to become unstable
How to view composite layers and fps
Dev Tools Choose from
More tools, And check the
Animation performance optimization
Before , We mentioned the rendering pipeline experienced by the page rendering , In fact, in terms of performance ,
The most ideal rendering pipeline has no layout and drawing links , In order to achieve the above effect , You need to use only those that trigger
Composite Properties of .
at present , Only two properties satisfy this condition ：
opacity（ Only some browsers support ）.
Relevant information can be viewed ：css Triggers
In short, upgrading to a composite layer has the following benefits ：
Bitmap of composite layer , It's up to GPU synthesis , Than CPU Deal with it quickly
When you need to repaint when , It only needs repaint In itself , Does not affect other layers
about transform and opacity effect , Some browsers will not trigger Layout and Paint, Relevant information can be viewed ： css Triggers 
Creating a new composite layer is not free , It consumes extra memory and management resources .
After the texture is uploaded, it will be handed over to GPU Handle , So we also need to think about CPU and GPU Bandwidth issues between 、 And how much memory there is for GPU Dealing with these textures
Most people like to use 3D attribute translateZ(0) For so-called hardware acceleration , To improve performance . But we also need to analyze the actual performance of the page , Continuous improvement and testing , This is the right way to optimize performance .
css Triggers: https://csstriggers.com/?spm=taofed.bloginfo.blog.36.20e75ac8xZGHBo
Wireless performance optimization ：Composite - Taoxi front end team : https://fed.taobao.org/blog/taofed/do71ct/performance-composite/?spm=taofed.blogs.header.7.63e65ac801qdAI