브라우저는 사용자가 접속한 웹 페이지에 필요한 리소스(HTML, CSS, Javascript, 이미지, 폰트 등등..)를 다운로드 받고 이를 해석하여 화면에 보여준다.
브라우저 렌더링 과정 단계를 크게 **다운로드, 파싱, 스타일, 레이아웃, 페인트, 합성 & 렌더**의 6단계로 나눌 수 있다.
브라우저에서 웹 페이지를 로딩할 때 HTML 파일을 가장 먼저 다운로드 하는데 이 **HTML**파일을 해석하여 **DOM 트리, CSSOM 트리**를 구성하는 단계가 바로 파싱단계 이다.
파싱이 일어나면 HTML을 해석하여 DOM을 생성하고 각각의 DOM 객체를 트리 구조로 연결하여 부모-자식 관계를 갖도록 만든다. (body, p, div 태그들이 DOM 트리의 노드로 생성되고 자식 노드를 참조하게 된다.
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link href="style.css" rel="stylesheet" />
<title>Browser rendering</title>
</head>
<body>
<p>
Hello
<span> web performance </span>
students!
</p>
<div>
<img src="profile.png" />
</div>
</body>
</html>