1. 웹 브라우저가 웹 페이지를 렌더링하는 과정에 대해 알아보자
웹 페이지를 렌더링하는 과정은 대체로 다음의 순서로 이루어집니다
- HTML 파싱 (Parsing): 브라우저가 HTML 문서를 받아들이면, 이를 파싱하여 DOM Tree를 생성합니다.
- CSS 파싱 (Parsing): 브라우저가 CSS를 파싱하여 CSSOM Tree를 생성합니다.
- 렌더 트리 (Render Tree) 생성: DOM Tree와 CSSOM Tree를 결합하여 렌더 트리를 생성합니다.
- 레이아웃 (Layout): 렌더 트리를 기반으로, 각 요소의 크기와 위치를 계산합니다.
- 페인팅 (Painting): 렌더 트리를 기반으로, 픽셀로 변환하여 화면에 그립니다.
JavaScript와 HTML 파싱
HTML 파싱 과정:
- 바이트 단계: HTML 문서를 네트워크를 통해 받아오면, 이를 바이트 단위로 읽어들입니다.
- 문자 단계: 바이트를 문자로 변환합니다. 이 변환은 문자 인코딩에 따라 진행됩니다.
- 토큰 단계: 문자열을 HTML 토큰으로 변환합니다. 이때 HTML 토큰은 태그, 속성 등의 HTML 구성 요소를 나타냅니다.
- 노드 단계: 토큰을 Node 객체로 변환합니다. 이 Node 객체는 DOM 트리의 한 부분이 됩니다.
- DOM 트리 구축: Node 객체들이 연결되어 구조적인 트리 형태인 DOM 트리를 생성합니다.
이렇게 생성된 DOM 트리를 통해 자바스크립트는 HTML 문서의 각 요소에 접근하고, CSS는 스타일을 적용하여 최종적으로 사용자에게 보여지는 웹 페이지가 완성됩니다.
시나리오 코드 2
<!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() {} 사용 여부를 확인!
'JS' 카테고리의 다른 글
| 이벤트 처리 - 2(addEventListener) (0) | 2024.09.25 |
|---|---|
| 이벤트 처리 - 1 (기본) (0) | 2024.09.25 |
| Browser Object Model (0) | 2024.09.25 |
| Document Object Model (0) | 2024.09.25 |
| 함수에 이해와 활용 (0) | 2024.09.25 |
