TIL 80 | 브라우저 렌더링 과정과 최적화

Gom·2021년 6월 2일

브라우저 렌더링 최적화

Web & CS

목록 보기

13/14

렌더링 과정

1. DOM(Document Object Model) 생성

텍스트로 이루어진 html 파일을 파싱한다.
(목적) JS가 조작 가능하도록 문서에 대한 프로그래밍 인터페이스를 제공하기 위함.

2. CSSOM 생성

link 태그를 만나 css 요청이 발생하면 css를 파싱

3. Render Tree 생성

DOM트리와 CSSOM트리를 합쳐 Render Tree를 생성한다. CSS 속성에 따라서 화면에 보여지지 않는 element는 제외되기도 한다.
ex) display:none; (cf. visibility:hidden; 은 보이지는 않지만 공간은 차지하므로 render tree에 포함)

4. Layout [Reflow]

각 노드의 스크린상 좌표 등을 계산하여 정확히 어디에 위치하는지 결정

5. Painting [Rendering]

픽셀단위로 요소들에 색을 입히는 과정
스타일이 복잡할수록 소요시간 증가
ex) background-color, color의 painting 속도보다 그라데이션, 그림자 효과의 소요시간이 더 길다.

기타

HTML Parser는 Script 태그를 만나면 파싱을 중단하고 제어 권한을 자바스크립트 엔진에게 넘긴다. 자바스크립트 코드 또는 파일을 로드해서 파싱하고 실행한다.
특정 액션이나 이벤트에 따라 HTML요소의 크기나 위치 등의 레이아웃 수치를 수정하면 그에 영향을 받는 자식 노드나 부모 노드들을 포함하여 Layout(Reflow)->Repaint 과정을 다시 수행

🔎👀 렌더링 최적화 방법 고찰

script 태그 비동기적 실행

script 태그에 async, defer 속성을 주면 비동기적 실행이 가능하다. 본래 script 태그를 만나면 html 파싱을 중단하고 자바스크립트 파일을 로드 및 실행한다. script 태그를 만나면 파싱이 중단되는 특징을 개선하여 script가 로드되는 동안 html파싱 역시 병렬적으로 실행되게 하면 파싱 중단 시간이 줄어 성능이 개선될 것이다.

Reflow 최소화

Reflow가 발생하면 필연적으로 Repaint가 일어나기 때문에 렌더링 최적화에 좋지 않다.

1. 가능하면 Reflow가 발생하는 속성보다 Repaint만 발생하는 속성을 사용하는 것이 좋다.

Reflow가 일어나는 대표적인 속성

position, width, height, left, top, right, bottom, margin, padding, border, border-width,
clear, display, float, font-family, font-size, font-weight, line-height, min-height,
overflow, text-align, vertical-align, white-space...

Repaint가 일어나는 대표적인 속성

background, background-image, background-position, background-repeat, background-size,
border-radius, border-style, box-shadow, color, line-style, outline, outline-color,
outline-style, outline-width, text-decoration, visibilty...