반응형 css2 📫 css animation 성능 비교 🎊 성능비교 글을 쓰게 된 이유 이번에 모바일웹에서 장시간으로 켜두면 핸드폰이 빨리 배터리가 닳는다는 말이 나왔다. 그래서 성능차이를 알아보니, 브라우저 CPU가 꽤 많이 잡아먹고 있었다... 원인은 렌더링이 많아져서 연산이 많이 이루어진걸로 확인되었다. "Layout" 많이 이루어져서 장시간 켜두면 CPU 사용량이 많아서,.. 배터리가 빨리 닳는다. 🔑 scaleY , height 성능차이 animation을 쓸 경우 width,height를 쓰면 Layout이 많이 일어난다. 그러므로 Layout 줄이는 방향으로 가야한다. 아래 사진은 height를 이용하여 animation 사용했을때의 Perfomance와 구현화면 이다. "Layout" 빈번하게 일어난것을 볼 수 있다. 아래는 "ScaleY"를 .. 2023. 6. 22. animation left / transform 성능 📺 left / transform 차이 기획자나 디자이너 요구사항에 따라 애니매이션을 넣어야 하는 경우가 있다. 이번에 애니메이션이 버벅인다는 말이 나왔고, 애니메이션에 속도 저하시키는 요소가 left였다는 것을 발견하였다. 간단하게 left가 0 => 100px 하는 모습을 만들어보았다. 🕹️ left를 이용한 애니메이션 위와 같이 만들었을때의 단점이 존재하였다. 단점은 애니메이션을 infinite(무한반복) 시켰을때 리렌더링이 되고 있었다. 간단한 left를 이용한 css 코드이다. html css .container { position: relative; display: inline-block; width: 100%; height: 100px; } .circle { display: inline-bl.. 2023. 6. 12. 이전 1 다음 반응형
