HTML 맛보기 에서 랜더링과정이 무엇인지 배워보려고 합니다.
어제는 URL 입력과정과 DNS 그리고 HTTP 와 HTTPS 가 무엇인지에 대해서 배웠고 이제 해당 페이지가 어떤 식으로 랜더링 되는지 알아보겠습니다.
랜더링(Rendering) 과정
- 브라우저는 웹 서버에서 받은 데이터를 화면에 표시하기 위해 다음 단계를 수행한다.
HTML 파싱 및 DOM 트리 생성
- HTML 파일을 해석하여 DOM(Document Object Model) 트리를 만든다.
- <head>, <body> 등의 태그가 계층 구조로 정리된다.
CSS 파싱 및 스타일 계산
- CSS 파일을 해석하여 CSSOM(CSS Object Model) 트리를 생성한다.
- DOM 트리와 결합하여 최종 스타일을 계산한다.
JavaScript 실행
- HTML과 CSS가 렌더링되는 중간에도 JavaScript 파일이 로드되면 실행된다.
- JavaScript는 DOM을 조작할 수 있어, 동적인 콘텐츠 변경이 가능하다.
렌더 트리(Render Tree) 생성 및 레이아웃 계산
- DOM과 CSSOM을 합쳐 렌더 트리를 구성한다.
- 각 요소의 위치와 크기를 계산하는 레이아웃(Layout) 과정이 수행된다.
페인팅(Painting) 및 화면 출력
- 계산된 요소들을 픽셀로 변환하여 화면에 그린다.
- 최적화를 위해 GPU 가속을 활용할 수도 있다.역시.. 무슨 말 인지 모르겠습니다.
차근차근 알아가보겠습니다.
HTML 파싱과 DOM 트리생성
"HTML 문서를 컴퓨터가 이해할 수 있도록 분석하고 정리하는 과정" : HTML 파싱
"HTML 문서를 트리 모양의 구조로 변환한 것! (JavaScript로 조작 가능)" : DOM 트리
ex> 예를 들어 다음과 같은 HTML 이 있다고 했을 경우
<!DOCTYPE html>
<html>
<head>
<title>예제 페이지</title>
</head>
<body>
<h1>안녕하세요!</h1>
<p>이것은 HTML 파싱 예제입니다.</p>
</body>
</html>HTML 파싱 시작 → <html>, <head>, <body> 태그를 한 줄씩 분석
- Document
├── <html>
│ ├── <head>
│ │ └── <title> "예제 페이지"
│ ├── <body>
│ ├── <h1> "안녕하세요!"
│ └── <p> "이것은 HTML 파싱 예제입니다."JavaScript가 이 DOM을 조작하면 웹페이지가 동적으로 변함! DOM
CSS 파싱 및 스타일 계산
"CSS 파일을 분석해서, 브라우저가 적용할 수 있도록 정리하는 과정!" : CSS 파싱
"각 HTML 요소에 어떤 스타일이 적용될지 계산하는 과정!" : 스타일 계산
JavaScript 실행
JavaScript가 중간에 실행되는 이유?
JavaScript는 DOM을 조작할 수 있기 때문!
JavaScript는 HTML을 변경하는 기능을 가짐
예를 들어, <script>가 <body> 태그 전에 실행되면,
아직 body 요소가 존재하지 않기 때문에 오류 발생 가능
JavaScript는 즉시 실행되기 때문!
<script> 태그를 만나면, 브라우저는 HTML 해석을 잠시 멈추고
JavaScript를 다운로드 → 실행
그 후 다시 HTML 해석을 이어감
그래서 JavaScript가 중간에 실행될 수 있음!
브라우저가 효율적으로 페이지를 로드하기 위해서!
JavaScript 실행이 HTML 파싱을 막을 수도 있음 → 최적화를 위해 조절 가능
<script> 태그에 async, defer 속성을 붙이면 동작 방식이 달라짐!번외 ) <script defer src="script.js"></script> 이렇게 하면 HTML 파싱이 끝난 후에 JavaScript가 실행됨.
렌더 트리(Render Tree) 생성 및 레이아웃 계산
렌더 트리는 HTML(DOM)과 CSS(CSSOM)을 합쳐서 만듭니다.
즉, 지금까지 작업은 랜더 트리를 만들기 위해서 작업한 과정 입니다.
랜더 트리는 HTML + CSS 를 합쳐서 "화면에 표시할 요소들"을 모아놓은 것 이라고 생각하면 쉽습니다.
페인팅(Painting) 및 화면 출력
렌더 트리를 기반으로 픽셀 단위의 정보를 계산
각 요소의 색상, 테두리, 배경, 텍스트 등을 적용
GPU(Graphics Processing Unit) 또는 CPU를 사용해 화면에 표시
"렌더 트리가 웹페이지의 '설계도'라면, 페인팅은 그 설계도에 '색칠'하는 과정!"
새로알게 된 사실
간단하게 브라우저는 출력 만 해주는 게 아니라, HTML 을 변환하고 스타일을 계산을 하며
최종적으로 랜더 트리 < (이게 중요해 보임) 를 생성하게 되는데 이걸 기반으로 페인팅 부분에서 색칠 한다.
즉, 변환하고 계산하기 위한건 전부 랜더 트리를 만들기 위한 작업이라는 것.
