브라우저 렌더링이란?
- 렌더링: HTML, CSS, Javascript로 작성된 문서를 해석하여 브라우저에 시각적으로 출력하는 것
렌더링할 문서 가져오기
브라우저 렌더링을 하기 위해서는 렌더링할 리소스가 필요하다. 렌더링할 리소스들은 서버에 있기 때문에 브라우저는 서버에 요청을 보내고 서버는 브라우저에게 요청에 대한 응답을 보낸다.
이에 브라우저는 주소창을 통해 서버에게 요청을 보낼 수 있다.
브라우저 url 주소창에 https://www.naver.com/ 을 입력하면 naver.com 서버로 요청을 보낸다. 이 경우 루트 요청(/) 을 보낸다. 서버는 루트 요청에 대해 암묵적으로 index.html 을 설정한다. 즉, https://www.naver.com/ 는 https://www.naver.com/index.html 을 같은 요청이다. )
https://www.naver.com/index.html 을 요청하면 index.html 뿐만 아니라 js파일, css파일, 이미지 파일도 요청한 것을 볼 수 있다. 이것은 HTML 문서를 해석면서 script 태그, link 태그, img 태그를 만나면 HTML 코드 해석을 중단하고 각 리소스를 요청하기 떄문이다.
문서 파싱하기
HTML 코드 파싱 및 DOM 생성
- HTML 문서는 순수 텍스트로 이루어진 문서이기 때문에 브라우저가 해석할 수 있도록 변환한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="sytle.css"> // 📌 HTML 파싱 중단, css 파일 로드
<title>Document</title>
</head>
<body>
<ul>
<li>apple</li>
<li>banana</li>
</ul>
<script src="main.js" /> // 📌 HTML 파싱 중단, JS 코드 파싱
</body>
</html>
HTML 파싱 과정
- 브라우저는 HTML 문서를 2진수의 바이트 코드로 입력을 받는다.
- 바이트 코드는
<meta charset="UTF-8">에 의해 문자열 형식으로 변환된다. - 문자열 형식은 문법적 의미를 가지는 토큰으로 분해된다.
- 각 토큰은 객체로 변환되어 노드를 생성한다.
- 노드들로 구성된 트리 자료구조인 DOM 을 생성한다.
CSS 코드 파싱 및 CSSOM 생성
- HTML 문서를 해석하다가 css 파일를 로드하는
link태그나style태그를 만나면 HTML 파싱을 중단하고 CSS 코드를 파싱한다. - CSS 파싱 과정은 HTML과 동일(바이트 → 문자열 → 토큰 → 노드 → CSSOM) 하고 CSSOM 을 생성한다.
렌더 트리 생성
- 생성된 DOM과 CSSOM을 결합하여 렌더 트리를 생성한다.
- 렌더 트리는 화면에 렌더링 되는 요소들의 노드들만 포함한다. (
meta태그,script태그, cssdisplay:none노드 포함 X)
레이아웃과 페인트
- 레이아웃: 노드들의 크기나 위치를 계산
- 페인트: 화면에 노드를 렌더링
자바스크립트 코드 파싱
- HTML 문서 파싱 중
script태그를 만나면 HTML 파싱을 중단하고 제어권을 자바스크립트 엔진에 넘긴다. - 자바스크립트 엔진은 자바스크립트 코드를 해석하여 추상적 구문 트리를 생성한다.
DOM 또는 CSSOM 변경
- 자바스크립트 코드에 의해 DOM이나 CSSOM이 변경이 될 수 있다. 변경에 의해 DOM과 CSSOM은 다시 렌더 트리를 생성하고 변경된 렌더 트리를 가지고 다시 레이아웃과 페인트 작업을 해야한다.
리플로우와 리페인트
- 리플로우: 다시 레이아웃 하는 것
- 리페인트: 변경된 렌더트리를 가지고 페인트 하는 것
참고
프론트엔드 개발자 지망생