Analysis of CSS3 dynamic optimization principle from browser rendering level

Concave convex Laboratory 2021-10-14 07:35:08


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 :

  • Javascript: Mainly responsible for business interaction logic .
  • 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 Composite The process .

Browser rendering principle

In the discussion Composite Before , We also need to understand the principle of browser rendering  picture

From this picture , We can find out :

  • DOM Elements And Layout Object There is a one-to-one correspondence
  • Generally speaking , Having the same coordinate space Layout Object Belong to the same Paint Layer ( Render layer ), adopt position、opacity、filter etc. CSS Property can create a new Paint Layer
  • Some special Paint Layer Would 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

Graphics Layer

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 : 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 : 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 :

  1. take 2Dtransform Change it to 3Dtransform 2. take left ( top、bottom、right ) Change the movement of to 3Dtransform
    But turn on hardware acceleration Underlying principle In fact, it is take Paint Layer Promoted to Composite Layer  picture The following methods all work in the same way :
  • 3D Property to enable hardware acceleration (3d-transform)
  • will-change: (opacity、transform、top、left、bottom、right)
  • Use fixed or sticky location
  • Yes opacity、transform、filter Applied animation(actived) or transition(actived), Notice the animation And transition Need is in active Talent

Let's write two paragraphs demo Code , Take you to analyze the actual situation

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

  width: 200px;
  height: 200px;
  background: red;
  transform: translateZ(0)

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

 picture 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)

@keyframes move{
@keyframes opacity{

  background: red;
  position: absolute;
  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 #composited Of 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  picture

5 Seconds later : The composite layer disappears , In sports fps There's a jitter , Performance starts to become unstable  picture

How to view composite layers and fps

In browser Dev Tools Choose from More tools, And check the Rendering Medium FPS meter picture

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 . picture
at present , Only two properties satisfy this condition :transforms and opacity( Only some browsers support ).
Relevant information can be viewed :css Triggers[1]


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 [1]

shortcoming :

  • 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 .

Reference material


css Triggers:


Wireless performance optimization :Composite - Taoxi front end team :

Please bring the original link to reprint ,thank
Similar articles