🎨웹 내 주체
🪄 웹 페이지
웹 페이지는 문서다.
-
웹 페이지는
HTML로 제작되어 있어 사람이 바로 읽을 수 없다. -
따라서 웹 페이지 리더기 역할을 하는 웹 브라우저가 필요하다.
🪄 웹 브라우저
웹 브라우저는 웹 페이지를 읽는다.
-
웹 브라우저는 웹 페이지를 읽고 표시한다.
-
'읽고 표시한다'는 것은
Rendering을 의미한다. -
웹 페이지를 렌더링하기 위해서 웹 브라우저는 몇 가지 단계를 거친다.
🪄 웹 서버
웹 서버는 웹 페이지를 제공한다.
- 웹 서버(각 컴퓨터)는 웹 페이지를 제공(Serve)한다는 측면에서 웹 페이지 제공자 역할을 한다.
🎨웹 페이지의 구성 요소
🪄 HTML
- 웹 페이지의 뼈대 구축
- 웹 페이지의 기본적인 구조와 컨텐츠를 정의
- 텍스트, 이미지, 링크, 버튼 등 페이지의 각 요소를 배치하는데 사용
🪄 CSS
- 웹 페이지의 디자인과 레이아웃을 정의
- 글꼴, 색상, 여백, 크기 등을 설정하여 웹 페이지가 어떻게 보일지 지정
- HTML로 작성된 컨텐츠에 스타일을 입히고 페이지의 레이아웃과 시각적 배치를 조정
🪄 JS (JavaScript)
- 웹 페이지에 동적 기능을 추가
- 사용자와 웹 페이지 사이의 상호작용을 담당하여 페이지의 컨텐츠나 동작을 변경
- 버튼 클릭시 이미지 변경
- 사용자가 폼에 데이터 입력시 그에 따른 화면 업데이트 등
🎨Rendering
Rendering 이란 웹 브라우저가 웹 페이지의 구성요소 HTML, CSS, JavaScrip 를
해석 및 실행하여사용자가 볼 수 있는 시각적인 웹 페이지(결과 페이지)로 변환하는 과정을 의미한다.
🎨Rendering 절차
🖌️ 1. HTML Parsing / DOM
웹 브라우저는 HTML을 파싱하여 DOM를 생성한다.
🪄 Parsing
데이터를 해석하고 분석하여 적절한 형식 또는 구조로 변환하는 작업
데이터를 규칙에 따라 분석하고, 그 구조나 의미를 추출해 구조화된 데이터로 변환하는 역할
- 구조화된 데이터: 객체(
Array,List.. ), 트리 구조
데이터 처리 과정에서 일어나는 변환 작업을 지칭하는 범용적 용어
🪄 DOM (Tree)
DOM(Documnet Object Model)은 HTML 문서의 구조화된 표현으로,
문서의 요소들을 객체로 취급하여 JavaScript를 통해 이 요소들을 조작할 수 있게 해주는 인터페이스를 제공한다.
(DOM API)
-
DOM은 트리 형태로 구성되어 있다.
-
각 요소는
node로 표현된다. -
HTML 문서 최상위요소
<html>이 루트노드가 된다.
-
-
DOM은 동적 조작이 가능하다.
- JavaScript를 사용해 DOM에 접근하면 웹 페이지 요소를 실시간으로 변경할 수 있다.
-
DOM은 객체 모델이다.
-
웹 페이지의 각 요소(
<div>,<p>등)는 객체로 표현되고, 각 객체는 속성과 메서드를 가진다. -
JavaScript를 사용해 속성과 메서드에 접근하여 페이지를 제어할 수 있다.
-
🖌️ 2. CSS Parsing / CSSOM
웹 브라우저는 HTML 파일에 포함된 CSS파일 또는 <style> 태그 내의 스타일 규칙을 파싱하여 CSSOM을 생성한다.
🪄 CSSOM (Tree)
CSSOM 은 HTML이 대상인 DOM과 유사하게 CSS가 대상인 DOM이라고 생각할 수 있다.
CSSOM 은 웹 브라우저가 CSS 스타일 시트를 처리하고 관리하기 위한 객체 모델이며
CSS 스타일 시트와 포함된 스타일 규칙을 JavaScript에서 조작할 수 있도록 구조화된 데이터 모델을 제공한다.
-
CSSOM은 스타일 시트, 스타일 규칙, 스타일 선언을 객체 형태로 제공한다.
-
CSSOM은 동적 조작이 가능하다.
- 객체 모델을 통해 웹 페이지의 스타일을 동적으로 변경하고 수정 가능하다.
🖌️ 3. Render Tree
Render Tree 는 DOM과 CSSOM 가 결합되어 생성된다.
화면에 표시될 스타일이 적용된 최종 요소의 트리 구조를 나타낸다.
🪄 Render Tree 생성 과정
-
DOM의 Root에서 시작해
node각각을 읽으며 표시한다.- <head>, <meta> 태그, <script> 태그의 노드는 표시 되지 않는다.
- 일부 노드는 CSS를 통해 숨겨지며 Render Tree에서도 제거된다.
- 사용자에게 보이지 않아도 되는 내용은 렌더링 출력에 반영되지 않는다.
-
표시된 DOM의 각 노드에 대해 일치하는
CSSOM규칙을 찾아 적용한다. -
화면에 표시될 모든 노드의 컨텐츠 및 스타일 정보를 포함하는 구조로 이루어진
Render Tree가 구축된다.
[참고] CSS 속성과 Rendering
-
visibility : hidden
요소가 화면에 보이지 않지만, 요소의 공간을 차지하도록 유지
✅ Render Tree에 포함된다. -
display : none
요소가 화면에 보이지 않고, 요소가 차지하던 공간도 제거
✅ Render Tree에서 제거된다.
🖌️ 4. Layout(Reflow)
Render Tree를 기반으로 각 요소의 위치, 크기를 계산하여 화면에 어떻게 배치될지 결정하는 단계이다.
최종적으로 웹 페이지의 시각적 구조를 형성한다.
-
Render Tree는 요소의 크기, 위치 등의 정보를 담고 있지만
텍스트로 구성된 객체에 불과하다. -
따라서
Rendering Engine이Render Tree의 Root부터 각 요소의 정보들을 계산하고
요소가 화면에서 어디에, 어떤 크기로, 어떻게 배치되어야 하는지 결정한다.
🖌️ 5. Paint(Repaint)
Paint는 Layout에서 결정된 요소의 크기와 위치를 기반으로 실제 화면에 요소를 그리는 단계로,
시각적 표현을 생성하고 최종적으로 화면에 표시될 페이지를 형성한다.
- 요소의 텍스트, 이미지, 비디오 등 시각적 컨텐츠를 그린다(글꼴, 텍스트 크기, 색상 적용)
- 요소의 배경색, 배경 이미지 등을 화면에 그린다.
- 요소의 보더를 화면에 그린다.(보더의 두께, 색상, 스타일 적용)
- 박스 모델을 적용하여 시각적 표현을 완성한다.
이 외에 Layer Compositing 과정이 있을 수 있다.
🖌️ 6. JavaScript
JavaScript는 DOM과 CSSOM을 조작한다.
브라우저는 JavaScript를 실행해 동적으로 컨텐츠와 스타일을 변경하며,
JavaScript를 통해 인터랙션 이벤트를 적용한다.
🎨 CRP(Critical Rendering Path)
CRP(Critical Rendering Path) 란
브라우저가 웹 페이지를 화면에 표시하는데 필요한 단계 중 가장 중요한 단계를 의미한다.
이 과정에서 HTML, CSS, JavaScript등 다양한 리소스를 처리해 최종적으로 화면에 웹 페이지를 렌더링한다.
라고 GPT가 말해주긴 했는데 CRP는 간단히 얘기하자면 앞서 살펴본 렌더링 과정이다.
그러나 CRP에는 렌더링 과정에 대한 최적화와 성능 개선 개념을 추가해 확장해야 한다.
이 외에도 Rendering과 관련해 담아낼 내용이 많은데, 한 포스트에 다 쓰자니 벅차다..
쒸익쑤ㅣ익..
🪄 다음 포스트에서 CRP 최적화에 대한 포스팅을 하며
Rendering 과정에 대해 좀 더 깊이 다뤄보자 (미루는게 최고 짜릿해)
ref
nitropack.io
blog.logrocket
YoutubeCritical Rendering Path Visually
MDN_CRP
Velog@soorokim
