1. 웹 브라우저가 웹 페이지를 렌더링하는 과정에 대해 알아보자
웹 페이지를 렌더링하는 과정은 대체로 다음의 순서로 이루어진다.
- HTML 파싱 (Parsing): 브라우저가 HTML 문서를 받아들이면, 이를 파싱하여 DOM Tree를 생성한다.
- CSS 파싱 (Parsing): 브라우저가 CSS를 파싱하여 CSSOM Tree를 생성한다.
- 렌더 트리 (Render Tree) 생성: DOM Tree와 CSSOM Tree를 결합하여 렌더 트리를 생성한다.
- 레이아웃 (Layout): 렌더 트리를 기반으로, 각 요소의 크기와 위치를 계산한다.
- 페인팅 (Painting): 렌더 트리를 기반으로, 픽셀로 변환하여 화면에 그린다.
JavaScript는 웹 브라우저에서 HTML 문서를 파싱하는 도중에 실행될 때, 그 파싱 과정을 중단시킬 수 있다. 이는 JavaScript가 DOM을 변경할 수 있기 때문이다. 즉, JavaScript 코드가 실행될 때, 웹 브라우저의 HTML 파서는 해당 스크립트가 완전히 실행될 때까지 대기 상태가 된다. 이런 이유로, 웹 개발자들은 종종 <script> 태그를 문서의 하단에 배치하거나, async나 defer 속성을 사용하여 스크립트가 비동기적으로 로드되도록 한다. 이렇게 하면 웹 페이지의 렌더링이 블로킹되지 않고 사용자에게 더 빠르게 페이지를 제공할 수 있다.
HTML 파싱이란?
웹 브라우저가 HTML 문서의 내용을 이해하고 처리하는 과정을 말한다. 이 과정에서 브라우저는 HTML 문서를 받아들여, 해당 문서의 구조를 분석하고, 이를 메모리에 저장하는 트리 구조인 DOM (Document Object Model) 트리를 생성한다. 여기서 각 HTML 태그는 DOM 트리의 노드에 해당하며, 이 트리 구조를 통해 자바스크립트 등 다른 기술들이 문서의 구조와 내용에 접근하고 조작할 수 있게 된다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Non-Blocking Example</title>
</head>
<body>
<p>Loading....</p>
<p>웹 페이지 렌더링 과정과 script 의 관계를 확인해보자</p>
<script src="js/heavy-script.js" ></script>
</body>
</html>
/** heavy-script.js */
window.addEventListener("load", function() {
console.log('start script....');
// js 현재 시간 정보 객체 --> Date
let startTime = new Date().getTime();
let delay = 6000; // 3초
// 3초동안 브라우저 렌더링 과정을 블로킹 해보자.
while( new Date().getTime() < startTime + delay ) {
// 3초동안 루프 동작 함
}
console.log('end script....');
});: window.addEventListener("load", function() {} 사용 여부를 확인!
728x90
'JS' 카테고리의 다른 글
| JS 이벤트 처리 - 2 ( addEventListener ) (0) | 2024.07.26 |
|---|---|
| JS 이벤트 처리 - 1 ( 기본 ) (0) | 2024.07.26 |
| JS - 점검 5 ( Browser Object Model ) (0) | 2024.07.26 |
| JS - 점검 4 ( Document Object Model ) (0) | 2024.07.26 |
| JS - 점검 3 ( 함수의 이해와 활용 ) (1) | 2024.07.26 |
