브라우저 렌더링 과정은 웹 페이지를 브라우저에 표시하기 위한 단계적인 프로세스를 나타냅니다. 이러한 프로세스를 이해하면 웹 페이지를 최적화하고 성능을 향상시킬 수 있습니다.
[HTML 파일]
<!DOCTYPE html>
<html>
<head>
<title>렌더링 예제</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a sample paragraph.</p>
<script src="script.js"></script>
</body>
</html>[CSS 파일]
h1 {
color: blue;
}[JS 파일]
document.querySelector('p').style.color = 'red';
브라우저 렌더링 과정을 아주 간단한 예제와 함께 살펴보겠습니다.
렌더링 과정은 HTML, CSS, Javasciript의 상호작용으로 구성됩니다.
1. 문서 파싱(Document Parsing)
- 브라우저는 HTML 문서를 가져오고, 문서의 각 요소(태그)를 파싱하여 DOM(Document Object Model)을 생성합니다.
- DOM은 웹 페이지의 구조를 표현하며, HTML 요소와 요소의 관계를 포함시킵니다.
- HTML 문서를 파싱하면서 <script> 태그를 만나면, 해당 스크립트를 실행하기 위해 파싱을 일시 중지합니다. (블로킹)
- CSS 파일과 외부 리소스를 가져오기 위한 네트워크 요청도 시작됩니다.
2. CSS 파싱 및 스타일 계산 (CSS Parsing and Style Calculation)
- CSS 파일 및 <style> 태그에서 스타일 정보를 파싱하고, 각 요소에 적용할 스타일을 계산합니다.
- <h1> 요소에 대한 스타일은 'color: blue;'로 계산됩니다.
3. 레이아웃 (Layout)
- 브라우저는 요소의 크기와 위치를 계산하여 화면에 배치합니다. 이 과정에서 <h1> 요소의 크기와 위치가 결정됩니다.
4. 페인팅 (Paint)
- 레이아웃 단계에서 생성된 레이아웃 정보를 기반으로 화면에 픽셀을 그리는 페인팅 과정이 진행됩니다.
- 브라우저는 레이아웃 정보에 따라 픽셀을 그리고 각 요소를 화면에 표시합니다.
- <h1>, <p> 요소가 화면에 표시됩니다.
5. 자바스크립트 실행
- HTML 파싱 중, <script> 태그를 만나면 브라우저는 Javascript 파일을 실행합니다.
- Javascript 코드는 <p> 요소의 텍스트 색상을 변경하도록 요청합니다.
5. 리플로우(Reflow)
- 웹 브라우저에서 문서의 레이아웃을 다시 계산하고 재그리는 과정을 말합니다. 레이아웃을 재조정해야 할 때 브라우저는 해당 페이지의 모든 요소의 크기와 위치를 다시 계산하고, 이러한 계산 결과에 따라 페이지를 다시 그립니다.
- 웹 페이지의 요소가 동적으로 변경되거나 스타일이 변경될 때 발생합니다. (예: 요소의 크기, 위치, 폰트 크기 변경)
- 리플로우는 비용이 많이 드는 연산이므로 최소화 해야 합니다.
- <p> 요소의 스타일이 변경되면 리플로우가 발생합니다.
6. 리페인트 (Repaint)
- 레이아웃의 변경 없이 요소의 스타일 속성(색상, 배경, 텍스트 등)이 변경될 때 발생합니다. 리페인트는 리플로우보다는 비용이 낮습니다.
- <p> 요소의 새로운 레이아웃을 계산하고, 변경된 내용을 화면에 다시 그려 빨간색으로 표시합니다.
7. 최적화 및 렌더링
- 브라우저는 최적화 기법을 사용하여 성능을 향상시키며, 최종 렌더링을 수행하여 사용자에게 웹 페이지를 표시합니다.
'1. 웹개발 > 1_1_1 JavaScript' 카테고리의 다른 글
| [Javascript] 불변성이란? (0) | 2023.12.23 |
|---|---|
| [Javascript] Function Declaration과 Function Expression의 차이 (0) | 2023.12.09 |
| [Javascript] 런타임 작동 방식 (1) | 2023.11.25 |
| [Javascript] 클로저(Closure)란? (0) | 2023.11.19 |
| [Javascript] 웹 접근성을 높이는 방법 (0) | 2023.11.17 |
