즉, 사용자 동작으로 자바스크립트가 실행되어서 CSS가 변경되거나 애니메이션 재생이 일어났을 때 어떻게 될까?
크게 3가지 경우로 동작을 한다.
한번 알아보자!
주로 요소의 크기나 위치가 바뀔 때, 아니면 브라우저창이 크기가 바뀌었을 때,
그림의 순서에 따라서 Layout이 다시 발생한다.
이 때, 레이아웃 수치를 다시 계산해서 배치를 해야 되기 때문에 레이아웃 과정이 다시 발생하고 이에 맞춰서 다시 페인트도 해줘야하고, 마지막으로 레이어를 합성하는 과정까지 거쳐야 한다.
주로 배경이미지나 텍스트 색상, 그림자 등 Layout의 수치를 변화시키지 않는 스타일의 변경이 일어났을 때 발생한다.
Layout이 변경 된 것이 아니므로 Layout과정이 발생하지 않기 때문에 성능상 이 점을 가지게 된다!
레이어는 하나의 층이라고 생각하면 된다. 맨 나중에 집어넣은 레이어가 가장 위에 표시된다.
레이어는 포토샵의 레이어와 비슷하게 (Paint)페인팅할 영역을 나누어 놓는 것을 의미한다.
Chrome의 경우에는 Layout과정 이후에 정해진 기준이나 필요에 의해서 브라우저가 레이어를 생성한다.
그리고 Render Tree(렌더트리)에 있는 Node객체들은 생성된 레이어에 포함되게 된다.
레이어들은 Tree형태로 구성이 된다.
그리고 렌더링 엔진이 각 레이어를 paint과정에서 각각 그려준 다음에 하나의 비트맵으로 합성(Composite)해서 페이지를 완성한다.
이때 경우는 Layout과 paint과정도 수행하지 않고 레이어의 합성만 발생하기 때문에 성능상으로 가장 큰 이점을 가진다.
CSS 속성이 변경되었을 때 위에서 알아본 3가지 중 어떤 경우로 업데이트 되는지 알아볼 수 있는 사이트이다.
-> CSS Trigger
개발자도구 -> performance로 들어간다. -> 애니메이션 시작하고 확인할 부분까지 녹화를 해준다. -> 확대해서 보면 하나의 프레임마다의 Style, Layout, Paint, Composite layer 과정이 진행되었는지 확인해 볼 수 있다.
예를 들어 이미지를 왼쪽으로 계속 움직이는 효과를 주는 애니메이션이 있는데
이 효과를 1px씩 왼쪽으로 옮기는 방식으로 했다면 Style과정부터 Layout, Paint, Composite 과정까지 발생했을것이다. -> 성능 안좋음
transform속성으로 애니메이션을 이용하게 되면 Composite layer과정만 거치면 되기 때문에 끊김이 덜하고 더 부드러운 애니메이션이 가능하도록 성능이 최적화 된다!