맨 땅에 프론트엔드 개발자 되기

브라우저 렌더링 동작 과정 본문

코딩 공부 일지/Browser & Network

브라우저 렌더링 동작 과정

헬로코딩 2022. 3. 23. 18:04
728x90

1. HTML 파일과 CSS 파일을 파싱(Parsing)해서 각각 Tree를 만든다.

브라우저가 HTTP 프로토콜을 통해 IP 주소에 해당하는 서버에 접속해서 웹사이트를 구성하기 위한 리소스(HTML, CSS, JavaScript)를 받아오면 가장 먼저 HTML 파일을 해석(Parsing)한다. 그리고 해석 단계를 거쳐 DOM(Document Object Model) 트리를 구성한다. HTML 파일에 스타일시트도 연결이 되어 있다면, 스타일시트도 해석해서 CSSOM(CSS Object Model) 트리를 구성한다.

- DOM 트리 생성

  1. 브라우저가 HTML의 원시 바이트를 읽어와서, HTML 파일에 정의된 인코딩 방식(예: UTF-8)에 따라 개별 문자로 변환한다.
  2. 브라우저가 문자열을 W3C 표준에 지정된 고유 토큰으로 변환한다.
  3. 방출된 토큰은 해당 속성 및 규칙을 정의하는 객체로 변환된다.
  4. 마지막으로 HTML 마크업에 정의된 여러 태그 간의 관계를 해석해서 트리 구조로 연결한다.

- CSSOM 트리 생성

  1. HTML 문서 내부에 style 태그로 작성되어 있든 외부 파일로 CSS 파일이 연결되어 있든 상관없이 브라우저가 이해하는 방식으로 변환한다.
  2. DOM 트리 생성과정과 비슷한 과정으로 해석해서 트리 구조로 연결한다.

- HTML 파일 파싱 중에 <script> 태그를 만나면?

HTML 파일을 파싱하는 중에 <head> 영역에 선언된 <script> 태그를 만나면 진행중인 HTML 파싱을 중지하고 JS 파일 혹은 작성된 스크립트들을 읽어들인다. 그리고 나서 다시 HTML 파일로 돌아가 파싱이 중단된 시점부터 다시 파싱을 시작한다. 이렇게 되면 아직 DOM 트리가 다 구성되지 않은 상태에서 <script>를 읽기 때문에 스크립트가 제대로 동작하지 않게 되고(DOM 요소를 제어할 경우), 레이아웃 구성이 느려져서 사용자 경험을 떨어뜨리는 결과를 초래할 수 있다.

이러한 이유로 <script> 태그는 HTML 문서의 제일 마지막에 위치시키거나, defer나 async 속성을 명시하는 것을 권장한다.

 

코딩독학) script 태그, async와 defer

async와 defer Parsing 이란? 영단어 ‘Parse’ 의 뜻은 ‘문장을 문법적으로 분석하다.’ 라는 뜻으로 프로그래밍의 개념에서는 브라우저가 html, css, javascript 같은 프로그래밍 언어를 읽고 해석하여

babycoder05.tistory.com

2. HTML 트리와 CSS 트리를 결합하여 렌더링 트리를 만든다.

HTML 파일로부터 구성된 DOM 트리와 스타일시트로부터 구성된 CSSOM 트리가 생성되면 그 둘을 매칭시켜 렌더링 트리를 구성한다.

렌더링 트리에는 페이지를 렌더링 하는데 필요한 노드만 포함된다. 대표적으로, visibility: hidden 의 스타일 속성을 가진 요소는 렌더링 트리에 포함이 되지만, display: none 의 속성을 가질 경우 렌더링 트리에서 제외된다.

3. 렌더링 트리에서 각 노드의 위치와 크기를 계산한다. (Layout)

그 다음엔 각 노드를 화면에 배치하기 위해 위치와 크기를 계산한다. 이 때, 모든 상대적인 측정값은 화면에서 절대적인 픽셀로 변환된다. 만약 단위를 %로 지정했다면, 브라우저는 % 값을 계산해서 픽셀 단위로 변환한다.

4. 계산된 값을 이용해 각 노드를 화면 상의 실제 픽셀로 변환하고, 레이어를 만든다.

계산이 완료되면 실제로 화면 상에 각 노드를 픽셀로 구현한다. 이를 ‘페인팅’ 또는 ‘래스터화’라고 한다.

- 리플로우(Reflow), 리페인트(Repaint)

최초의 페이지 접속 시 렌더링 과정을 거쳐 화면에 페인팅이 종료된 이후에 사용자의 여러 가지 상호작용으로 인해 새로운 HTML 요소가 추가되거나, 기존 요소의 스타일이 바뀌는 변경이 일어난다. 이 경우에는 렌더링 트리 생성과 레이아웃을 계산하는 과정을 다시 수행한다. 이러한 과정을 리플로우(Reflow)라고 한다. 그리고 그 결과로 다시 화면에 구현하는 것을 리페인트(Repaint)라고 한다.

기존 요소에 변경사항이 생겼을 때 모든 경우에 리플로우-리페인트가 일어나는 것은 아니고, 레이아웃에 영향이 미치지 않는 단순한 색상 변경 같은 변경사항은 리플로우 수행 없이 바로 리페인트만 수행한다.

 

728x90
저작자표시

'코딩 공부 일지 > Browser & Network' 카테고리의 다른 글

Refresh Token 프론트엔드 보관 위치  (0) 2023.04.19
HTTP와 REST API  (0) 2022.07.09
브라우저의 인증(로그인) 방식에 대해 알아보자 Session / JWT / OAuth 2.0  (2) 2022.06.28
웹 브라우저 쿠키에 대해 알아보자  (0) 2022.03.23
www.google.com 을 주소창에 치면 일어나는 일 (What happens when type www.google.com)  (0) 2022.03.23
'코딩 공부 일지/Browser & Network' Related Articles more