[CS지식] 브라우저 렌더링2 (최적화)

hyo·2023년 5월 15일
0

CS지식

목록 보기
2/2
post-thumbnail

UI 업데이트 발생했을때 렌더링이 어떻게 될까?

즉, 사용자 동작으로 자바스크립트가 실행되어서 CSS가 변경되거나 애니메이션 재생이 일어났을 때 어떻게 될까?
크게 3가지 경우로 동작을 한다.
한번 알아보자!

다시 Layout이 발생하는 경우

주로 요소의 크기나 위치가 바뀔 때, 아니면 브라우저창이 크기가 바뀌었을 때,
그림의 순서에 따라서 Layout이 다시 발생한다.
이 때, 레이아웃 수치를 다시 계산해서 배치를 해야 되기 때문에 레이아웃 과정이 다시 발생하고 이에 맞춰서 다시 페인트도 해줘야하고, 마지막으로 레이어를 합성하는 과정까지 거쳐야 한다.


Paint부터 다시 발생되는 경우

주로 배경이미지나 텍스트 색상, 그림자 등 Layout의 수치를 변화시키지 않는 스타일의 변경이 일어났을 때 발생한다.
Layout이 변경 된 것이 아니므로 Layout과정이 발생하지 않기 때문에 성능상 이 점을 가지게 된다!


레이어의 합성만 다시 발생하는 경우



레이어는 하나의 층이라고 생각하면 된다. 맨 나중에 집어넣은 레이어가 가장 위에 표시된다.

레이어는 포토샵의 레이어와 비슷하게 (Paint)페인팅할 영역을 나누어 놓는 것을 의미한다.
Chrome의 경우에는 Layout과정 이후에 정해진 기준이나 필요에 의해서 브라우저가 레이어를 생성한다.
그리고 Render Tree(렌더트리)에 있는 Node객체들은 생성된 레이어에 포함되게 된다.

레이어들은 Tree형태로 구성이 된다.
그리고 렌더링 엔진이 각 레이어를 paint과정에서 각각 그려준 다음에 하나의 비트맵으로 합성(Composite)해서 페이지를 완성한다.
이때 경우는 Layout과 paint과정도 수행하지 않고 레이어의 합성만 발생하기 때문에 성능상으로 가장 큰 이점을 가진다.


CSS Trigger 사이트

CSS 속성이 변경되었을 때 위에서 알아본 3가지 중 어떤 경우로 업데이트 되는지 알아볼 수 있는 사이트이다.

-> CSS Trigger


애니메이션 렌더링 최적화하는 방법 팁!

개발자도구 -> performance로 들어간다. -> 애니메이션 시작하고 확인할 부분까지 녹화를 해준다. -> 확대해서 보면 하나의 프레임마다의 Style, Layout, Paint, Composite layer 과정이 진행되었는지 확인해 볼 수 있다.

예를 들어 이미지를 왼쪽으로 계속 움직이는 효과를 주는 애니메이션이 있는데
이 효과를 1px씩 왼쪽으로 옮기는 방식으로 했다면 Style과정부터 Layout, Paint, Composite 과정까지 발생했을것이다. -> 성능 안좋음

CSS의 애니메이션(animation속성 아님)을 이용할 때 transform 속성을 이용하는 것이 유리하다.

transform속성으로 애니메이션을 이용하게 되면 Composite layer과정만 거치면 되기 때문에 끊김이 덜하고 더 부드러운 애니메이션이 가능하도록 성능이 최적화 된다!

profile
개발 재밌다

0개의 댓글