“Don’t confuse positioning with design-y motion.”
브라우저 렌더링 과정은 웹 애플리케이션의 성능과 관련이 있으므로 중요한 개념입니다.
하지만 스터디원이 네이버 홈페이지가 어떻게 그려지는지 질문을 했을때 깔끔하게 답하지 못했습니다. 😂
그런 의미에서 브라우저가 화면을 어떻게 렌더링 하는지 깔끔하게 정리해보려 합니다.
우선 브라우저의 구조부터 살펴보겠습니다.
브라우저는 다음의 7가지 구조로 이루어져 있습니다.
브라우저의 일곱 요소 중 렌더링 엔진에 대해 집중적으로 살펴보겠습니다.
렌더링 엔진은 2가지 역할을 합니다.
화면 요소들이 업데이트 된다는 것은 유저의 동작이 발생한 경우를 의미합니다.
유저의 동작은 입력이 발생하거나 화면 스크롤이 발생한 경우를 포함합니다.
브라우저의 렌더링 엔진은 다음 동작 과정을 통해 위 2가지 역할을 수행합니다.
HTML과 CSS 파일을 파싱해 DOM 트리와 CSSOM 트리를 생성합니다.
조금 더 자세히 살펴보겠습니다.
HTML 코드의 각 태그는 HTML5 표준에 지정된 고유 '토큰'으로 변환됩니다.(토큰화)
이후 토큰은 각각의 속성 및 규칙을 정의하는 '노드 객체'로 변환됩니다.(렉싱)
그리고 각 노드 객체 사이에 연관성이 존재하도록 'DOM 트리'가 생성되는 것입니다.
DOM 트리와 CSSOM 트리를 결합해 Render 트리를 구성합니다.
이 렌더 트리를 바탕으로 요소들이 화면에 표시됩니다.
렌더 트리는 화면에 표시되는 노드의 컨텐츠, 스타일 정보를 포함합니다.
이때 'display: none;'과 같은 스타일 정보를 갖는 노드들은 렌더트리에서 제외됩니다.
(따라서 'display: none;' 스타일 정보를 갖는 노드들은 화면에 표시되지 않습니다.)
각 노드 객체들의 뷰포트 내 크기와 위치를 계산합니다.
만약 요소의 크기 값을 상대 단위(%, em)로 지정했다면 픽셀 단위로 변환합니다.
Layout 단계에서 계산된 값을 바탕으로 각 노드들을 화면상의 실제 픽셀로 변환합니다.
이때 픽셀로 변환된 결과물들은 단일 레이어가 아닌 여러 레이어로 관리됩니다.
Paint 단계에서 생성된 레이어를 합성합니다.
이때 생성된 결과물이 실제 화면에 표시됩니다.
화면이 업데이트 되는 3가지 시나리오가 있습니다.
예를 들면 특정 요소의 width와 height을 변경하면 Layout 단계부터 재실행 됩니다.
따라서 애니메이션 동작을 구현하기 위해서는 width와 height 값을 변경하는 구현 방식은 지양하는 편이 좋습니다.
대신에 transform 속성을 사용하면 전자보다 렌더링 성능을 높일 수 있습니다.
Layout 단계부터 리렌더링이 발생하지 않기 때문입니다.
https://csstriggers.com/
https://mygumi.tistory.com/238
https://wit.nts-corp.com/2020/06/05/6134
https://medium.com/@ArthurFinkler/css-animations-translate-vs-absolute-positioning-and-background-position-dd39fbdeade5