Whether it causes layout
If so, make animated elements absolute as much as possible to avoid affecting the document tree and causing large-area layout recalculations.
Whether to enable hardware acceleration
"CSS3 animation is used" and "hardware acceleration is turned on" are two different things, although the former may lead to the latter.
There is a magical panacea in webkit for turning on hardware acceleration: opacity: 1; or -webkit-backface-visibility: hidden;.
Whether it has high-cost attributes (css shadow, background-attachment: fixed, etc.)
If available, pictures are also an option. This can be regarded as an optimization that trades space for time.
Repaint area
If so, we have to reduce the animation area. The optimization of this step is limited and basically relies on the above three
Go over the wall and read High Performance Animations:
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Let’s optimize it in the following order:
If so, make animated elements absolute as much as possible to avoid affecting the document tree and causing large-area layout recalculations.
"CSS3 animation is used" and "hardware acceleration is turned on" are two different things, although the former may lead to the latter.
There is a magical panacea in webkit for turning on hardware acceleration:
opacity: 1;or-webkit-backface-visibility: hidden;.css shadow,background-attachment: fixed, etc.)If available, pictures are also an option. This can be regarded as an optimization that trades space for time.
If so, we have to reduce the animation area. The optimization of this step is limited and basically relies on the above three
Go over the wall and read High Performance Animations: