브라우저의 렌더링 원리

렌더링이란?

• 렌더링이란 서버로부터 HTML 파일을 받아 브라우저에 뿌려주는 과정이다.

브라우저가 화면에 나타나는 요소를 렌더링할 때, 웹킷이나, 게코 등과 같은 렌더링엔진을 사용한다. 렌더링 엔진이 HTML, CSS, JavaScript로 렌더링할때 CRP라는 프로세스를 사용하며 6단계로 이루어져 있다.

1. HTML 파싱 후, DOM트리 구축
2. CSS 파싱 후, CSSOM트리 구축
3. JavaScript 실행
4. DOM과 CSSOM을 조합하여 렌더트리를 구축

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

1. 뷰포트 기반으로 렌더트리의 각 노드가 가지는 정확한 위치와 크기를 계산한다. ( Layout 단계 )
2. 계산한 위치/크기를 기반으로 화면에 그린다. (Paint 단계)

🔨 용어

렌더링엔진

• 브라우저 마다 다르지만, 브라우저는 렌더링을 수행하는 렌더링 엔진을 가지고 있다.
• 크롬 - 블링크(Blink)
• 사파리 - 웹킷(Webkit)
• 파이어폭스 - 게코(Gecko)

CRP

• CRP(Critical Rendering Path, 중요 렌더링 경로)는 브라우저가 HTML, CSS, JavaScript를 화면에 픽셀로 변화하는 일련의 단계
• Document Object Model ( DOM )
• CSS Object Model (CSSOM)
• 렌더트리, 레이아웃을 포함

파싱

• 하나의 프로그램을 런타임 환경(예를 들어, 브라우저 내 자바스크립트 엔진)이 실제로 실행할 수 있는 내부 포맷으로 분석하고 변환하는 것을 의미, 즉 파싱은 문서의 내용을 토큰(token)으로 분석하고 문법적 의미와 구조를 반영한 파서 트리(parse tree)를 생성하는 과정

DOM (Docuemnt Object Model)

• 웹 페이지를 이루는 태그들을 자바스크립트가 이용할 수 있게끔 브라우저가 트리구조로 만든 객체 모델을 의미
• 문서 객체란 html, head, body와 같은 태그들을 javascript가 이용할 수 있는 객체를 의미.
• HTML과 스크립팅 언어(JavaScript)를 서로 이어주는 역할을 함

CSSOM (CSS Object Model)

• CSS 내용을 파싱하여 자료를 구조화 한것을 CSSOM 이라고 한다.
• DOM 처럼 CSS의 내용을 해석하고 노드를 만들어 트리 구조를 만든것을 CSSOM 이라 한다.

렌더트리(Render Tree)

• 렌더 트리는 CSSOM과 DOM 트리의 결합으로 만들어진다.
• 렌더 트리는 웹 페이지에 나타낼 각 요소들의 위치(Layout)을 계산
• 픽셀을 화면에 렌더링 하는 페인트(Paint) 즉, 화면에 요소들을 표현하는 프로세스를 위해 존재

Layout(Reflow)

• 뷰포트 내에서 노드의 정확한 위치와 크기를 계산한다.
  • 현재 보고 있는 컴퓨터 화면의 영역
  • 웹 브라우저 용어로 UI, 메뉴바 등을 제외하고는 일반적으로 브라우저 창과 동일
• 뷰포트란?
• 이를 Layout 단계라고 하며, 경우에 따라 Reflow라고도 한다.

Paint

• 노드와 해당 노드의 계산된 스타일 및 기하학적 형태에 대해 파악했으므로, 렌더링 트리의 각 노드를 화면의 실제 픽셀로 변환하는 마지막 단계에 이 정보를 전달
• 페인팅 또는 래스터화라고 함.

---

 

- 면접때문이 아닌 실제적으로 개발할 때 도움이 많이 될것 같으니 개발자 도구로 어느 페이지던 실습해보시길! 

 

참고

[프론트앤드]페이지 렌더링 성능 확인하는 방법 (웹 페이지 속도 확인하기)

[프론트앤드]페이지 렌더링 성능 확인하는 방법 (웹 페이지 속도 확인하기)

 medium - 브라우저 렌더링 과정

브라우저의 렌더링 과정

github - 프론트엔드 면접 질문

GitHub - Esoolgnah/Frontend-Interview-Questions: 프론트엔드 중요도별 면접질문 + 용어 설명 ⭐️