JS - 점검 6(웹 페이지 렌더링 과정)

Gun·2023년 10월 5일

JS

목록 보기

6/12

💡 학습목표
   1. 웹 브라우저가 웹 페이지를 렌더링하는 과정에 대해 알아보자 
   2. 연습 문제 - 오류 해결

1. 웹 브라우저가 웹 페이지를 렌더링하는 과정에 대해 알아보자

웹 페이지를 렌더링하는 과정은 대체로 다음의 순서로 이루어집니다

HTML 파싱 (Parsing): 브라우저가 HTML 문서를 받아들이면, 이를 파싱하여 DOM Tree를 생성합니다.
CSS 파싱 (Parsing): 브라우저가 CSS를 파싱하여 CSSOM Tree를 생성합니다.
렌더 트리 (Render Tree) 생성: DOM Tree와 CSSOM Tree를 결합하여 렌더 트리를 생성합니다.
레이아웃 (Layout): 렌더 트리를 기반으로, 각 요소의 크기와 위치를 계산합니다.
페인팅 (Painting): 렌더 트리를 기반으로, 픽셀로 변환하여 화면에 그립니다.

JavaScript와 HTML 파싱

💡 JavaScript는 웹 브라우저에서 HTML 문서를 파싱하는 도중에 실행될 때, 그 파싱 과정을 중단시킬 수 있습니다. 
   이는 JavaScript가 DOM을 변경할 수 있기 때문입니다. 즉, JavaScript 코드가 실행될 때,
   웹 브라우저의 HTML 파서는 해당 스크립트가 완전히 실행될 때까지 대기 상태가 됩니다. 
   이런 이유로, 웹 개발자들은 종종 <script> 태그를 문서의 하단에 배치하거나, 
   async나 defer 속성을 사용하여 스크립트가 비동기적으로 로드되도록 합니다. 
   이렇게 하면 웹 페이지의 렌더링이 블로킹되지 않고 사용자에게 더 빠르게 페이지를 제공할 수 있습니다.

💡 HTML 파싱이란
   웹 브라우저가 HTML 문서의 내용을 이해하고 처리하는 과정을 말합니다. 
   이 과정에서 브라우저는 HTML 문서를 받아들여, 해당 문서의 구조를 분석하고, 
   이를 메모리에 저장하는 트리 구조인 DOM (Document Object Model) 트리를 생성합니다. 
   여기서 각 HTML 태그는 DOM 트리의 노드에 해당하며, 
   이 트리 구조를 통해 자바스크립트 등 다른 기술들이 문서의 구조와 내용에 접근하고 조작할 수 있게 됩니다.

HTML 파싱 과정:

바이트 단계: HTML 문서를 네트워크를 통해 받아오면, 이를 바이트 단위로 읽어들입니다.
문자 단계: 바이트를 문자로 변환합니다. 이 변환은 문자 인코딩에 따라 진행됩니다.
토큰 단계: 문자열을 HTML 토큰으로 변환합니다. 이때 HTML 토큰은 태그, 속성 등의 HTML 구성 요소를 나타냅니다.
노드 단계: 토큰을 Node 객체로 변환합니다. 이 Node 객체는 DOM 트리의 한 부분이 됩니다.
DOM 트리 구축: Node 객체들이 연결되어 구조적인 트리 형태인 DOM 트리를 생성합니다.

이렇게 생성된 DOM 트리를 통해 자바스크립트는 HTML 문서의 각 요소에 접근하고, CSS는 스타일을 적용하여 최종적으로 사용자에게 보여지는 웹 페이지가 완성됩니다.

시나리오 코드 1

project-root-directory
│
├── index.html
├── css/
│   └── styles.css
└── js/
    └── heavy-script.js

index.html

<<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<title>Non-Blocking Example</title>
	</head>
	<body>
		<p>Loading...</p>
		<script src="js/heavy-script.js"></script>
		<!-- 3초 뒤에 HTML 파싱 완료  -->
		<p>웹 페이지 렌더링 과정과 script 의 관계를 확인해 보자</p>
	</body>
</html>

console.log("Script Start");

// 현재 시간을 밀리초로 표현하여 startTime 변수에 저장
let startTime = new Date().getTime(); 
let delay = 3000; // 3초 

// 3초 동안 브라우저 블로킹
while (new Date().getTime() < startTime + delay) {
	// 현재 시간이 startTime + delay(시작 시간 + 3초) 보다 작은 동안은 계속 이 블록 내에서 루프를 돌게 됨.
}

console.log("Script End");

결과 보기

해결 방안 1

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<title>Non-Blocking Example</title>
	</head>
	<body>
		<p>Loading...</p>
		<!-- 1. defer 속성에 사용 -->
		<script src="js/heavy-script.js" defer></script>

		<p>웹 페이지 렌더링 과정과 script 의 관계를 확인해 보자</p>
	</body>
</html>

해결 방안 2

<!-- 2. async 속성에 사용 -->
<script src="js/heavy-script.js" async></script>

해결 방안 3

<!-- 3. script 구문을 맨 밑으로 내리는 방법 -->
<script src="js/heavy-script.js"></script>

해결 방안 4

window.addEventListener("load", function () {
	// 이 코드는 모든 리소스가 로드된 후에 실행됩니다.
	console.log("Script Start");

	// 현재 시간을 밀리초로 표현하여 startTime 변수에 저장
	let startTime = new Date().getTime();
	let delay = 3000; // 3초

	// 3초 동안 브라우저 블로킹
	while (new Date().getTime() < startTime + delay) {
		// 현재 시간이 startTime + delay(시작 시간 + 3초) 보다 작은 동안은 계속 이 블록 내에서 루프를 돌게 됨.
	}

	console.log("Script End");
	console.log("모든 리소스가 로드되었습니다.");
});

연습 문제

아래 코드를 실행하면 오류가 발생합니다 코드를 수정해서 오류를 해결해 주세요

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>
	<body>
		<script>
			function calcAge() {
				let currentYear = 2023;
				let birthYear = 2000;
				let age;
				age = currentYear - birthYear + 1;
				document.querySelector("#result").innerHTML = "당신의 나이는 " + age + " 세 입니다";
			}
			calcAge();
		</script>

		<div id="result"></div>

	</body>
</html>

에러 문구 확인

Gun

이전 포스트

JS - 점검 5(Browser Object Model)

다음 포스트

JS - 점검 6(웹 페이지 렌더링 과정)

JS

1. 웹 브라우저가 웹 페이지를 렌더링하는 과정에 대해 알아보자

HTML 파싱 과정:

연습 문제

JS - 점검 5(Browser Object Model)

JS 이벤트 처리 - 1 (기본)

0개의 댓글