브라우저의 렌더링 과정에 대해서 알아보자.
브라우저가 화면에 나타나는 요소를 렌더링 할때, 웹킷(Webkit)이나 게코(Gecko) 등과 같은 렌더링 엔진을 사용한다. 렌더링 엔진이 HTML, CSS, Javascript로 렌더링할 때 CRP(Critical Rendering Path)라는 프로세스를 사용한다. CRP가 무엇일까?
그럼 이제 CRP 프로세스를 사용한 렌더링 단계를 알아보자 !!!
DOM Tree는 브라우저가 HTML 문서를 로드한 후 파싱하여 생성하는 모델이다.
CSSOM Tree는 브라우저에서 만든 DOM에 정의한 CSS 문서를 로드한 후 병합하여 생성하는 모델이다.
❗ 만약, HTML 중간에 스크립트가 있다면 HTML 파싱이 중단된다.
따라서 자바스크립트 코드는 body태그 가장 마지막에 선언해주는 것이 좋다.
출처 : https://twofivezero.tistory.com/56
❗ display: none 속성과 같이 화면에서 보이지도 않고
공간을 차지하지 않는 것은 렌더트리로 구축되지 않는다.
뷰포트 기반으로 렌더트리와 각 노드가 가지는 정확한 위치와 크기를 계산한다.
계산한 위치, 크기를 기반으로 화면에 그린다.
이렇게 총 6단계로 CRP 프로세스 렌더링 단계를 나타낼 수 있다.
그럼 실제로 크롬 개발자 도구를 이용해 다음 코드를 어떻게 렌더링 하는지 살펴보자.
<!-- html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Rendering TEST</title>
</head>
<body>
<div></div>
<script src="script.js"></script>
</body>
</html>
/* css */
body{
background-color: aqua;
}
div{
width: 200px;
height: 199px;
background-color: brown;
}
// javascript
document.querySelector('div').addEventListener('click',()=>{
console.log('Click div');
});
위 코드로 렌더링 과정을 살펴보자. 렌더링 과정은 개발자 도구 Performance 탭에서 확인할 수 있다.
위 로그를 보면 위에서 언급한 CRP 프로세스 과정이 진행된다.
출처 : https://github.com/baeharam/Must-Know-About-Frontend/blob/main/Notes/frontend/browser-rendering.md