CSS 애니메이션과 불타는 CPU
Do Not Burn Your CPU Working With CSS Animations
120장의 이미지를 불러오기 + css animation을 적용한 placeholder + lazy loading
lazy loading이 되기 때문에 첫 10장은 placeholder가 사라지고 이미지가 보이지만 나머지 110장은 infinite loop animation css가 돌아가고 있는 상태
=> translateZ(0) ?
CSS keyframe animation CPU usage is high, should it be this way?
Lastly, not all properties are equal -- box-shadow is much harder for the browser to animate smoothly than, say, background-color. Leaving all of the keyframes intact but dropping the box-shadow property, using the translateZ(0) trick had my CPU usage hovered at only 10-11%.
transform: rotateZ(360deg)
The will-change property defined in this specification allows an author to declare ahead-of-time what properties are likely to change in the future, so the UA can set up the appropriate optimizations some time before they’re needed. This way, when the actual change happens, the page updates in a snappy manner.
CSS3 filter performance & CPU usage: Why do certain filters tax the CPU?
You'll notice that the only time the performance is hit hard is when you either use blur or drop-shadow. If you play with any of the other filters there is very little cpu usage or any indication of a performance hit.
The first thing to understand is that not all filters are created equal.