브라우저 동작원리를 통해서 본 css 애니메이션의 성능
현대 브라우저는 아래와 같이 크게 두개의 쓰레드로 동작을 합니다.
메인 쓰레드 : 자바스크립트 실행과 Dom 엘리먼트 렌더링을 담당
컴포지터 쓰레드 : GPU를 이용하여 렌더링된 엘리먼트를 화면에 그리는 역할을 담당
두 쓰레드의 큰 차이점은 메인 쓰레드는 주어진 작업이 끝나기 전까진 다른 작업이 모두 블락 되는 반면에 컴포지터 쓰레드는 화면을 그리는데 있어서 특정 부분에서 블락이 된다면 그부분은 빈영역으로 대체 한채 다른 영역을 그리는 작업을 초당 60번 정도 반복 수행을 합니다.
여기서 컴포지터 쓰레드가 이용하는 GPU는 아래와 같은 작업들은 빠르게 수행합니다.
비트맵을 화면에 그리는 작업
같은 비트맵을 다시 그리는 작업
같은 비트맵을 다른위치로 이동, 회전, 크기를 변경하여 다시 그리는 작업
하지만 다음과 같은 작업은 상대적으로 처리속도가 느립니다.
자신의 메모리에 비트맵을 로드하는 작업
css 애니메이션을 그리는 방법들은 여러가지가 있지만, 위와같은 gpu의 특성때문에 같은 애니메이션 효과라도 성능의 차이가 느껴지는 경우가 있습니다.
대표적으로, 비슷한 애니메이션을 보여주는 엘리먼트의 transition: top 속성을 이용하여 위치를 이동하는 경우와 transition: transform 속성을 이용하는 경우를 들수 있습니다.
top의 값이 0px -> 100px로 1초동안 점차 증가하는 방식으로 애니메이션이 동작할때 top의 값이 1px씩 증가 할때 마다 메인쓰레드는 레이아웃과 페인팅을 새로해서 비트맵을 만들고 해당 비트맵을 컴포지터 쓰레드로 업로드 하며, 컴포지터 쓰레드는 이 비트맵을 로드하여 화면에 새로 그리는 작업을 반복합니다.
transform의 translateY값을 0px -> 100px로 1초동안 점차 증가하는 방식으로 애니메이션이 동작할 경우에는 최초 해당 엘리먼트에 대한 비트맵이 업로드 된 이후로는 해당 비트맵 업로드 없이 컴포지터 쓰레드가 기존의 비트맵을 가지고 위치를 1px씩 이동시키는 작업을 반복합니다.
그렇기 때문에 transform 처럼 비트맵 로드를 적게 하는 애니메이션이 top의 값을 이동하는 것처럼 비트맵 로드를 많이 하는 애니메이션보다 빠르고 부드럽게 동작합니다.
다음은 상대적으로 빠른속도를 가지는(비트맵 업로드를 적게 하는) css 변환 속성 들입니다.
css transform
css opacity
css filter(브라우저와 필터의 복잡도에 따라 다름)
이처럼 좀더 부드럽고 빠른 페이지를 위해서 css 애니메이션을 이용할 때는 위의 속성을 사용하는 걸 추천드립니다.
이글은 해당 링크 의 글을 요약 정리하였습니다.