브라우저가 화면에 나타나는 요소를 렌더링 할 때, 웹킷(webkit)이나 게코(Gecko) 등 과 같은 렌더링 엔진을 사용한다. 렌더링 엔진이 HTML, CSS, JavaScript로 렌더링 할 때 CRP(Critical Rendering Path)라는 프로세스를 사용한다.
웹킷(webkit)
• 크롬이나 사파리에서 채용한 HTML, CSS 웹 브라우저 렌더링 엔진 입니다.
• 그외 게코(Gecko)는 파이어 폭스에서 사용하는 렌더링 엔진입니다.
• 종종 css 접두사로 '-webkit' 라는 표현이 사용됩니다. 해당 웹 브라우저에서 해석해서 렌더링이 가능합니다.
CRP(Critical Rendering Path)
• 렌더링 엔진이 HTML, JS, CSS 파일을 렌더링 할때 의 프로세스입니다.
1. HTML파일을 파싱 후 DOM(Document Object Model) 트리 구축
❗️ HTML 중간에 스크립트가 있다면 HTML 파싱이 중단되고 스크립트가 실행된다. 자바스크립트에는 DOM트리 구조 자체를 바꿀수 있는 document.write() 메서드와 같은 것을 사용해서 문서의 모양을 변경할 수 있기 때문이다.
2. CSS 파싱 후, CSSOM(CSS Object Model) 트리 구축
3. JavaScript 실행
4. DOM과 CSSOM을 조합하여 렌더트리(Render Tree) 구축
❗️ display : none 과 같이 화면에서 보이지도 않고 공간을 차지하지 않는 것은 렌더트리로 구축되지 않는다.
5. Layout 단계 : 뷰포트 기반으로 렌더트리의 각 노드가 가지는 정확한 위치와 크기 계산
6. Paint 단계 : 계산한 위치와 크기를 기반으로 화면에 그림
<!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>테스트</title>
</head>
<body>
<div></div>
<script src="script.js"></script>
</body>
</html>body {
background-color: red;
}
div {
width: 100px;
height: 100px;
background-color: blue;
}document.querySelector('div').addEventListener('click', () => {
console.log('Click div');
});차례대로 html, css, javscript 파일 이다.
console.log
위 로그를 보면 CRP가 진행되는 것을 알 수 있다.
1. Parse HTML을 통해 HTML 파싱이 이루어지고 DOM 구축
2. Parse Stylesheet을 통해 CSS 파싱이 이루어지고 CSSOM 구축
3. Evaluate Script를 통해 스크립트 실행
4. Recalculate Style를 통해 DOM과 CSSOM을 조합하여 렌더 트리 구축
5. Layout 과정을 통해 뷰포트 기준으로 렌더 트리 노드들의 정확한 위치와 크기를 계산
6. Paint 과정을 통해 화면에 보여준다.
참고
github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/frontend/browser-rendering.md
baeharam/Must-Know-About-Frontend
:mortar_board: 취준생이라면 반드시 알아야 하는 프론트엔드 관련 지식들. Contribute to baeharam/Must-Know-About-Frontend development by creating an account on GitHub.
github.com
'FrontEnd' 카테고리의 다른 글
| CD와 CI (0) | 2021.01.14 |
|---|---|
| 모듈 번들러와 트랜스파일러 (0) | 2021.01.14 |
| BOM & DOM (0) | 2021.01.13 |
| 자바스크립트 엔진이 코드를 실행하는 과정 (0) | 2021.01.13 |
| CSR(Client Side Rendering) 과 SSR(Sever Side Rendering (0) | 2021.01.13 |
