Skip to Content
Suffering builds character

8. DOM 변환 처리, DOM Parsing

변환 처리(Parsing)란 브라우저가 HTML 내용(Contents)을 읽고, 읽은 내용을 기반으로 DOM Tree를 구성하는 처리 과정을 의미함

따라서 이러한 처리를 DOM Parsing이라고 하며, 그러한 처리를 수행하는 객체를 DOM Parser라고함

대부분의 브라우저는 Web API를 통해 DOMParser 객체를 제공하며, 해당 객체가 가지고 있는 parseFromString()을 통해 HTML DOM 트리로 파싱 처리를 수행할 수 있음

const domParser = new DOMParser();
 
// DOM Parser에게 문자열 데이터 전달
const result = domParser.parseFromString('<div class="main">hello</div>', 'text/html');
 
console.log(result);

result 실행 결과

<!-- 문자열 데이터가 HTML 엘리먼트의 형태로 변환(Parsing)됨 -->
<html>
	<head></head>
	<body>
		<div class="main">hello</div>
	</body>
</html>

브라우저가 서버로 웹 페이지를 요청할 경우 서버는 HTTP 응답 헤더에 Content-Type: text/html를 포함하여 문자열 형태의 HTML 텍스트를 응답함

'<html><head>...</head><body><div class="main">hello</div></body></html>'

이 응답 결과를 받은 브라우저는 DOM 트리를 하나씩 구성하면서 변환(parsing) 작업을 시작함

이러한 변환 작업은 HTML의 구성 방식인 중첩 트리구조에 따라, 최상위 엘리먼트(Root)인 부모(Parent) 엘리먼트부터 자식(Child) 엘리먼트에 접근하는 순서로 처리됨

렌더링 성능을 개선하여 서비스 페이지 로딩 속도를 빠르게 하기 위해서는 FP(First Paint), FCP(First Contentful Paint), LCP(Largest Contentful Paint)와 같은 성능 측정 메트릭 들이 최대한 서로 가깝게 배치되고 일찍 처리되어야 함

2. 차단된(Blocked) DOM Parsing

만약 브라우저가 변환(Parsing) 과정 도중에 외부 리소스(js, css, 그 외 img와 같은 이미지 등)를 읽게 되면 해당 리소스를 다운받기 위해 메인 스레드 밖인 백그라운드에서 처리하기 시작함

DOM Parsing 작업은 보통 메인 스레드(Main thread)에서 처리가 되는데,

만약 메인 스레드에서 자바스크립트의 실행이 바쁘게 진행되고 있을 경우, DOM Parsing 작업은 해당 스레드가 여유가 생길 때까지 차단되고 작업을 수행할 수 없게 됨 → Parsing was Blocked

<script />는 DOM Parsing 작업(DOM Parser)을 차단하는 대표적인 Parser-blocking resource라고 볼 수 있음

<div>Hi</div>
<script> ...</script> <!-- DOM 파싱 차단 -->
<div>waiting</div> <!-- blocked -->
Last updated on
1.클라우드 네이티브