[FE 지식] 브라우저의 렌더링 과정

LeeHanna·2021년 9월 9일
0

FE 지식

목록 보기
2/4
post-thumbnail

브라우저의 렌더링 과정에 대해서 알아보자.

브라우저가 화면에 나타나는 요소를 렌더링 할때, 웹킷(Webkit)이나 게코(Gecko) 등과 같은 렌더링 엔진을 사용한다. 렌더링 엔진이 HTML, CSS, Javascript로 렌더링할 때 CRP(Critical Rendering Path)라는 프로세스를 사용한다. CRP가 무엇일까?

CRP (Critical Rendering Path)


  • CRP는 브라우저가 HTML, CSS, Javascript를 화면에 픽셀로 변화하는 일련의 단계를 말하며 이를 최적화 하는 것은 렌더링 성능을 향상시킨다. CRP는 DOM, CSSOM, 렌더트리, 레이아웃을 포함한다.

그럼 이제 CRP 프로세스를 사용한 렌더링 단계를 알아보자 !!!

브라우저 렌더링 단계


1. HTML 파싱 후, DOM(Document Object Model) 트리 구축

DOM Tree는 브라우저가 HTML 문서를 로드한 후 파싱하여 생성하는 모델이다.

2. CSS 파싱 후, CSSOM(CSS Object Model) 트리 구축

CSSOM Tree는 브라우저에서 만든 DOM에 정의한 CSS 문서를 로드한 후 병합하여 생성하는 모델이다.

3. Javascript 실행

❗ 만약, HTML 중간에 스크립트가 있다면 HTML 파싱이 중단된다. 
따라서 자바스크립트 코드는 body태그 가장 마지막에 선언해주는 것이 좋다.

4. DOM과 CSSOM을 조합하여 렌더트리(Render Tree) 구축


출처 : https://twofivezero.tistory.com/56

❗ display: none 속성과 같이 화면에서 보이지도 않고 
공간을 차지하지 않는 것은 렌더트리로 구축되지 않는다.

5. Layout/Reflow 단계

뷰포트 기반으로 렌더트리와 각 노드가 가지는 정확한 위치와 크기를 계산한다.

6. Paint 단계

계산한 위치, 크기를 기반으로 화면에 그린다.

이렇게 총 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 프로세스 과정이 진행된다.

  1. Parse HTML을 통해 HTML 파싱 후 DOM 트리 구축
  2. Parse Stylesheet을 통해 CSS 파싱 후 CSSOM 트리 구축
  3. Compile Script를 통해 Javascript 실행
  4. 렌더 트리 구축
  5. Layout을 통해 뷰포트 기준으로 렌더트리 노드들의 각 크기, 위치 계산
  6. Paint를 통해 Layout에서 계산한 값들로 각 요소를 화면에 그림

출처 : https://github.com/baeharam/Must-Know-About-Frontend/blob/main/Notes/frontend/browser-rendering.md

0개의 댓글