렌더링 이란?

@Firmbee.com unsplash

렌더링 이란?

렌더링이란 서버로부터 HTML 파일을 받아 브라우저에 보여주는 과정입니다.

브라우저는 서버로부터 HTML 문서를 받습니다. 그리고 브라우저의 렌더링 엔진은 HTML문서를 파싱 해서 DOM트리를 만들어 줍니다.

 

그다음 외부 CSS 파일과 함께 포함된 스타일 요소를 파싱 하여 CSSOM(CSS Object Model) 트리를 만들어 줍니다.

그 결과 인라인으로 들어가 있는 스타일 속성이 우선순위를 가지게 됩니다.

 

다음으로 DOM트리와 CSSOM을 결합하여 렌더링 트리를 형성합니다.

이때 화면에 드러나지 않는 head 태그나 display 속성에 none 값이 할당된 요소는 렌더 트리에 포함되지 않습니다.

다음은 기기의 뷰포트 내에서 노드들의 정확한 위치와 크기를 계산하는 과정이 진행됩니다.

이 단계가 레이아웃 단계이며, 리플 로우라 고도합니다.

페이지에서 각 객체의 정확한 크기와 위치를 파악하기 위해 브라우저는 렌더링 트리의 루트부터 시작하여 렌더링 트리를 순회하게 됩니다.

이 작업이 끝나면, 이제 렌더링 엔진은 각 요소가 어디에 어떤 크기로 표현될지 알게 됩니다.

렌더링 엔진은 페인트 이벤트를 발생시켜 렌더링 트리를 화면에 그리고, 이 과정을 페인팅 또는 래스터화라고 합니다.

 

모든 HTML을 파싱 할 때까지 기다리지 않고 배치와 그리기 과정을 진행합니다.
웹페이지에 접속했을 때 페이지가 한꺼번에 뜨지 않고 점점 화면에 그려지는 것이 이 때문입니다.

렌더링 순서

1. HTML을 파싱 하여 DOM 트리를 만듭니다.
2. CSS를 파싱하여 CSSOM 트리를 만듭니다.
3. DOM과 CSSOM을 결합하여 렌더링 트리를 만듭니다.
4. 렌더링 트리에서 각 노드의 크기와 위치를 계산합니다.
5. 개별 노드를 화면에 그린다.

 

렌더링이 완료된 상태에서 사용자의 인터렉션에 의해 화면의 일부 영역이 변경된다면 리플로우 또는 리 페인트가 발생합니다.

 

다시 말하자면 레이아웃이 변경될 경우 리플로우 리 페인트를 거치고 레이아웃에는 영향을 주지 않지만 가시성에는 영향을 주는 엘리먼트가 변경될 때는 리 페인트만 거치게 됩니다.( ex. opacity, background-color 등등 )

레이아웃의 변경

1. DOM 엘리먼트 추가, 제거 또는 변경될 때
2. CSS 스타일 추가, 제거 또는 변경될 때
3. CSS 스타일을 직접 변경하거나, 클래스를 추가함으로써 레이아웃이 변경될 수 있습니다.

엘리먼트의 길이를 변경하면, DOM 트리에 있는 다른 노드에 영향을 줄 수 있습니다.
4. CSS3 애니메이션과 트랜지션. 애니메이션의 모든 프레임에서 리플로우가 발생합니다.
5. offsetWidth와 offsetHeight 의 사용 할때 offsetWidth 와 offsetHeight 속성을 읽으면, 초기 리플로우가 트리거 되어 수치가 계산됩니다.
6. 유저 행동. 유저 인터랙션으로 발생하는 hover 효과, 필트에 텍스트 입력, 창 크기 조정, 글꼴 크기 변경, 스타일시트 또는 글꼴 전환 등을 활성화하여 리플로우를 트리거할 수 있습니다.

 

렌더링 성능을 최적화하기 위해서는 위의 단계들을 최적화하면 됩니다.