랜더링이 무엇일까요?
- html, css, js 등 개발자가 작성한 문서가 브라우저에 출력되는 과정을 랜더링이라고 합니다.
랜더링 과정
1 - 브라우저가 html, css, js 파일과 이미지, 폰트 등을 서버에 요청하고 받아옵니다.
- 브라우저 랜더링 엔진이 html 을 차례대로 파싱하면서, link, script, img 등의 태그를 만나면 해당하는 css, js, 이미지, 폰트 등의 리소스도 같이 요청합니다.
2 - 브라우저 랜더링 엔진이 받아온 html 을 파싱하여 DOM 을 생성합니다.
-
DOM : document object model
-
서버에게 갓 받아온 html 은 2진수 형태의 'byte 데이터' 입니다.
-
meta charset 속성에 적혀있는 방식으로 '문자열'로 인코딩합니다.
-
문자열 형태의 html 문서를 '토큰' 단위로 분해합니다.
-
각각의 토큰들을 객체로 변환하여 '노드'를 생성합니다.
3 - 브라우저 랜더링 엔진이 받아온 CSS 를 파싱하여 CSSOM 을 생성합니다.
-
CSSOM : CSS object model
-
html 파싱과 같은 방식으로 CSS 를 파싱하여 CSSOM 을 생성합니다.
4 - 랜더 트리를 생성합니다.
- DOM 과 CSSOM 을 합쳐서 랜더링을 하기 위한 트리를 생성합니다.
5 - 브라우저 자바스크립트 엔진이 js 를 파싱합니다.
-
js 코드를 토큰 단위로 분해하고 구조를 더하여 AST (추상 구문 트리) 를 생성합니다.
-
AST (추상 구문 트리) 를 인터프리터가 이해할 수 있도록 바이트 코드로 변환합니다.
-
인터프리터는 변환된 바이트 코드를 실행합니다.
6 - 레이아웃 - html 요소의 위치와 크기를 계산합니다.
-
랜더 트리를 가장 위부터 아래로 내려가며 각 요소들의 위치와 크기를 계산합니다.
-
이때 크기 정보는 '절대값인 px 단위'로 모두 변환합니다.
7 - 페인팅 - 화면에 html 요소를 그립니다.
- 픽셀을 채워서 이미지화 시킵니다.
8 - 리플로우, 리페인팅
-
DOM 은 javascript 를 통하여 DOM 을 조작할 수 있도록 DOM API 를 제공합니다.
-
document.createElement('div') 와 같은 코드가 DOM API 입니다.
-
요소의 위치나 크기에 대한 변경사항이 있으면 레이아웃 작업을 다시하는데, 이것을 리플로우라고 합니다.
-
요소의 색상 등이 변경된 경우 페인팅 작업을 다시 하는데, 이것을 리페인팅이라고 합니다.
good things take time