1. 오늘의 학습 목표
학습 목표
브라우저가 HTML, CSS, JavaScript 코드를 해석해서 우리 눈에 보이는 화면으로 만들어내는 과정을 단계별로 이해합니다. DOM과 CSSOM의 역할을 명확히 설명할 수 있습니다.
핵심 요약
브라우저 렌더링 과정을 이해하는 것은 웹 성능 최적화의 시작입니다
2. 핵심 개념 파헤치기
2.1. 브라우저 렌더링이란 무엇인가?
브라우저 렌더링(Browser Rendering)이란, 브라우저가 서버로부터 요청해서 받은 HTML, CSS, JavaScript와 같은 파일들을 해석(Parsing)하여 사용자가 볼 수 있는 시각적인 웹 페이지로 변환하는 과정을 의미합니다. 우리가 작성한 코드가 실제로는 이 렌더링 과정을 거쳐야만 비로소 의미 있는 화면으로 탄생하게 됩니다.
2.2. 핵심 원리
브라우저의 렌더링 엔진은 Critical Rendering Path라는 정해진 순서에 따라 동작합니다
- DOM 트리 구축: 브라우저는 HTML 문서를 위에서부터 한 줄씩 읽어내려가며, 태그들을 트리(Tree) 구조의 객체 모델인 DOM(Document Object Model)으로 변환합니다. <html>은 최상위 노드, 각 태그는 자식 노드가 됩니다
- CSSOM 트리 구축: HTML을 읽다가 CSS 링크나 스타일 태그를 만나면, CSS 코드를 해석하여 스타일 규칙을 트리 구조로 만드는데, 이를 CSSOM(CSS Object Model)이라고 합니다.
- 렌더 트리 생성: DOM 트리와 CSSOM 트리를 결합하여 화면에 보여질 요소들만으로 구성된 렌더 트리를 생성합니다. 예를 들어, display: none; 속성이 적용된 노드는 렌더 트리에 포함되지 않습니다
- 레이아웃: 렌더 트리를 기반으로 각 요소가 화면의 어느 위치에, 어떤 크기로 배치될지를 계산하는 과정을 '레이아웃'이라고 합니다
- 페인트: 레이아웃 계산이 끝나면, 각 요소를 실제 화면의 픽셀로 그려내는 '페인트' 과정을 통해 최종적으로 우리 눈에 보이는 화면이 완성됩니다.
3. 코드로 배우기
3.1. 구현 목표
간단한 HTML, CSS, JavaScript 코드를 작성하여 브라우저가 DOM을 생성하고, JavaScript가 이 DOM을 조작했을 때 화면이 어떻게 다시 렌더링되는지 확인합니다.
3.2. [1단계: 기본 HTML과 CSS 작성]
아래 코드는 브라우저가 DOM 트리와 CSSOM 트리를 만드는 기본 재료가 됩니다. 브라우저는 h1과 p 태그로 DOM 노드를 만들고, <style> 태그 안의 규칙으로 CSSOM 노드를 만듭니다.
<!DOCTYPE html>
<html>
<head>
<title>Browser Rendering</title>
<style>
h1 {
color: blue;
}
</style>
</head>
<body>
<h1 id="title">Hello World!</h1>
<p>This is a rendering test.</p>
</body>
</html>
3.3. [2단계: JavaScript로 DOM 조작하기]
페이지 로드가 완료된 후, JavaScript가 id가 title인 h1 DOM 노드를 찾아 내용을 변경합니다. 이 변경사항은 DOM 트리에 즉시 반영되고, 브라우저는 변경된 렌더 트리를 기반으로 레이아웃과 페인트 과정을 다시 수행하여 화면을 업데이트합니다.
(이 과정을 '리페인트' 또는 '리플로우'라고 부릅니다.)
//</body> 태그 직전에 아래 코드를 추가
<script>
//DOMContentLoaded 이벤트는 HTML문서가 로드되고 파싱되었을 때 발생합니다
document.addEventListener('DOMContentLoaded', () => {
const titleElement = document.getElementById('title');
titleElement.textContent = 'DOM is Manipulated!';
titleElement.style.color = 'red'; //CSSOM에도 영향을 줍니다
});
</script>4. 전체 코드
<!DOCTYPE html>
<html>
<head>
<title>Browser Rendering</title>
<style>
h1 {
color: blue;
}
</style>
</head>
<body>
<h1 id="title">Hello World!</h1>
<p>This is a rendering test.</p>
<script>
document.addEventListener('DOMContentLoaded', () => {
const titleElement = document.getElementById('title');
titleElement.textContent = 'DOM is Manipulated!';
titleElement.style.color = 'red';
});
</script>
</body>
</html>
'개발 > 웹 개발' 카테고리의 다른 글
| Day 6: HTML과 시맨틱 웹 (1) | 2024.08.02 |
|---|---|
| Day 5: CORS (Cross-Origin Resource Sharing) (1) | 2024.08.01 |
| Day 4: 동기 vs 비동기 (2) | 2024.07.31 |
| Day 3: REST API의 이해 (0) | 2024.07.29 |
| Day 2: HTTP/HTTPS 프로토콜 (0) | 2024.07.28 |
