브라우저 렌더링 과정

쑤·2024년 6월 4일

interview 프론트엔드 개발자 면접 준비

FE Interview

목록 보기

1/16

🔗 참고

모던 자바스크립트 Deep Dive 661p
Medium : 브라우저의 렌더링 과정
Github
MDN : CRP
MDN : Parse

📌 브라우저 렌더링 과정

개괄

브라우저가 화면에 나타나는 요소를 렌더링 할 때, Blink(Chrome), Webkit(Safari)이나 Gecko(Firefox) 등과 같은 렌더링 엔진을 사용한다. 렌더링 엔진이 HTML, CSS, JavaScript로 렌더링 할 때 CRP라는 프로세스를 사용하며 다음과 같은 과정을 거친다.

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

렌더링 과정

참고: Medium - 브라우저 렌더링 과정

브라우저는 HTML, CSS, Javascript, Image, Font 등 렌더링에 필요한 리소스를 요청하고 서버로부터 응답을 받는다.
브라우저의 렌더링 엔진은 서버로부터 응답된 HTML, CSS를 파싱하여 DOM과 CSSOM을 생성하고 이들을 결합하여 렌더 트리를 생성한다.

*DOM 트리 + CSSOM 트리 = 렌더링 트리
브라우저의 자바스크립트 엔진은 서버로부터 응답된 자바스크립트를 파싱하여 AST(Abstract Syntax Tree)를 생성 → 바이트 코드로 변환하여 실행. 이때 자바스크립트는 DOM API를 통해 DOM이나 CSSOM을 변경할 수 있다. 변경된 DOM과 CSSOM은 다시 렌더 트리로 결합된다.
렌더 트리를 기반으로 HTML 요소의 레이아웃(위치와 크기)를 계산하고 브라우저 화면에 HTML 요소를 페인팅한다.

*레이아웃 계산 : 뷰포트 내에 각 요소의 정확한 위치와 크기를 정확하게 캡쳐하는 Box 모델이 출력. 모든 상대적인 측정값은 절대적인 값으로 변경된다.

*페인팅 : 렌더링 트리의 각 노드를 화면의 실제 픽셀로 변환

Reflow와 Repaint

사용자가 처음 웹 페이지에 접속하면 위의 과정을 통해서 페이지가 렌더링된다. 그 이후 사용자는 페이지에서 여러 액션을 수행하게 되는데 이 과정에서 새로운 HTML 요소가 추가가 되거나 기존 요소의 스타일이 바뀌는 등의 변경사항이 발생한다. 이런 변경사항에 영향을 받는 노드들에 대해서 렌더링 트리 생성과 레이아웃 과정을 다시 수행하게 되는데 이 과정이 바로 Reflow이다.

리플로우는 단지 변경사항을 반영하기 위해서 렌더링 트리를 생성하고 레이아웃 과정을 다시 수행하는 것이고, 실제 이 결과를 화면에 그려지기 위해서는 다시 페인팅 단계를 수행해야 합니다. 이 가정을 리페인트(Repaint)라고 한다.

모든 변경 사항에 대해서 Reflow→Repaint가 발생하는게 아니다. 레이아웃에 영향이 미치지 않는 단순한 색상 변경 같은 변경사항은 리플로우(Reflow) 수행 없이 바로 리페인트(Repaint)만 수행한다.

리플로우 이후에는 반드시 리페인트가 수행

(+) 레이아웃 계산과 페인팅을 다시 수행하는 리렌더링은 비용이 많이 드는(성능애 악영향을 주는) 작업이다. 따라서 리렌더링이 빈번하지 발생하지 않는 것이 좋다.

📌 More Details..

예를 들어 www.google.com에 접속을 하면, 루트(/)요청이 해당 서버로 전송이 된다. 암묵적으로 루트 요청에는 index.html을 응답하도록 기본 설정이 되어있다.

사용자가 브라우저에 접근했을 때, 브라우저의 렌더링 엔진이 HTML(index.html)을 파싱하는 도중에 외부 리소스를 로드하는 태그(CSS 파일을 로드하는 <link>, 이미지 파일을 로드하는 <img>, 자바스크립트를 로드하는 <script> 등)를 반나면 HTML의 파싱을 일시 중단하고 해당 리소스 파일을 서버로 요청한다.

자바스크립트 파싱에 의한 HTML 파싱 중단

브라우저는 동기적(Synchronous, 위→아래로 순차적)으로 HTML, CSS, JavaScript를 파싱하고 실행한다. 이것은 <script> 태그의 위치에 따라 HTML 파싱이 막혀 DOM 생성이 지연될 수 있음을 의미한다.
만약 <head>안에 <script>가 있다면 HTML 파싱 과정 중간에 Javascript 파싱 및 실행으로 HTML 파싱이 중단(DOM 생성 중단)된다.
이를 막기 위해서든 다음의 방식들이 있다.

<head>에 <script> 내용은 두지 않고, DOM을 생성한 이후에 <script>를 로드할 수 있도록 한다. 즉, <body>태그의 하단부에 작성한다.
<script> 태그에 async/defer 속성을 추가한다.
- async, defer 속성은 src 속성을 통해 외부 자바스크립트 파일을 로드한느 경우에만 사용이 가능하다.
- async, defer 속성을 사용하면 HTML 파싱과 외부 자바스크립트 파일의 로드가 비동기적으로 동시에 진행될 수 있다.
1. async 속성 : HTML 파싱과 외부 자바스크립트 파일의 로드가 비동기적으로 동시에 진행된다. 하지만 자바스크립트의 파싱과 실행은 자바스크립트 파일의 로드가 완료된 직후 진행되며, 이때 HTML 파싱이 중단된다.
  async 속성을 설정하면 script 태그의 순서와는 상관없이 로드가 완료된 자바스크립트부터 먼저 실앻이 되어, script 태그의 순서가 보장되지 않는다. 따라서 순서 보장이 필요한 script 태그에는 async 속성을 지정해선 안된다.
2. defer 속성 : HTML 파싱과 외부 자바스크립트 파일의 로드가 비동기적으로 동시에 진행된다. 자바스크립트의 파싱과 실행은 HTML 파싱이 완료된 이후에 진행된다. 따라서 DOM 생성이 완료된 이후 실행되어야 할 자바스크립트에 유용하다.

📌 단어 설명

1. 파싱(Parsing)

프로그램을 분석하고 런타임 환경이 실제로 실행할 수 있는 내부 형식(예, 브라우저 내부의 JavaScript 엔진)으로 변환하는 것을 의미

브라우저의 요청에 의해 서버가 응답한 HTML 문서는 문자열로 이루어진 순수한 텍스트이다. 이를 시각적으로 렌더링 하기 위해선 브라우저가 이해할 수 있는 자료구조로 HTML문서를 변환해야한다. 변환 과정은 다음과 같다.