Front

알아두면 좋은 JS 파싱, async, defer

saramnim 2023. 3. 22. 12:36
728x90
JS 파싱과 async, defer에 대해 알아보자!

 

JS 파싱에 의한 HTML 파싱 중단

2023.03.22 - [TIL] - 중요한 파싱과 생성 및 실행

 

중요한 파싱과 생성 및 실행

파싱과 각 OM 생성 및 실행에 대해 알아보자! HTML 파싱과 DOM(Document Object Model) 생성 HTML 문서는 브라우저가 이해할 수 있는 자료구조(객체)로 변환하여 메모리에 저장해야 브라우저에 시각적인 픽

s-saramnim.tistory.com

위 글에서 본 바와 같이 렌더링 엔진과 JS 엔진은 병렬적으로 파싱을 실행하지 않고 직렬적으로 파싱을 수행하며, 브라우저는 동기적으로, 위에서 아래 방향으로 순차적으로 HTML, CSS, JS를 파싱하고 실행한다.

즉, script 태그의 위치에 따라 HTML 파싱이 블로킹되어 DOM 생성이 지연될 수 있으므로 script 태그의 위치는 중요하다.

 

HTML -> CSS -> JS(src)

<html>
	<head>
		<meta charset = "UTF-8">
		<link rel = "stylesheet" href = "style.css">
		<script src = "app.js"></script>
	</head>
    <body>
        <h1 id="name">Name</h1>
    </body>
</html>

app.js을 파싱하기 전 DOM API를 사용하는 경우에는 DOM, CSSOM이 이미 생성되어 있어야 한다.

 

HTML -> CSS -> JS(head부분)

<html>
    <head>
	<meta charset = "UTF-8">
	<link rel = "stylesheet" href = "style.css">
	<script>
		const $name = document.getelementById('name');
		$name.style.color = 'black';
	</script>
    </head>
    <body>
        <h1 id="name">Name</h1>
    </body>
</html>

DOM API는 DOM에서 id가 name인 HTML 요소를 취득해야 하지만

script 태그가 실행되는 시점에는 아직 HTML 요소가 모두 파싱되지 않아 DOM에 id가 name인 요소가 없다.

=> 정상적으로 작동하지 않는다.

 

HTML -> CSS -> JS(body부분)

<html>
    <head>
        <meta charset = "UTF-8">
        <link rel = "stylesheet" href = "style.css">
    </head>
    <body>
        <h1 id="name">Name</h1>
        <script>
            const $name = document.getelementById('name');
            $name.style.color = 'black';
        </script>
    </body>
</html>

script를 body의 가장 아래에 위치 시킨다면

JS가 실행될 시점에 렌더링 엔진이 HTML 요소를 모두 파싱해 DOM을 생성 완료한 이후이므로

1. DOM 조작 에러가 발생하지 않으며

2. JS 로딩, 파싱, 실행으로 인해 HTML 요소들의 렌더링에 지장받지 않아 페이지 로딩 시간이 단축된다.

 

async, defer 어트리뷰트

IE10 이상에서 지원한다.

src 어트리뷰트를 통해 외부 JS 파일을 로드하는 경우에만 사용가능하다.

<script async src = "hello.js"></script>
<script defer src = "hi.js"></script>

HTML 파싱과 외부 JS 파일 로드가 비동기적으로 동시에 진행되지만 JS 실행 시점에는 차이가 있다.

 

async

JS 파일 로드가 완료된 직후에 JS 파싱이 진행된다.

여러 개의 script 태그에 async를 지정하면 script 태그의 순서와 상관 없이 로드가 완료된 JS부터 실행된다.

=> 순서 보장이 필요한 경우 사용 지양

 

defer

HTML파싱이 완료된 직후(DOM 생성이 완료된 직후) JS파싱과 실행

=> DOM 생성이 완료된 이후 실행되는 JS에 유용

 

 

본 게시글은 모던자바스크립트 Deep Dive - 자바스크립트의 기본 개념 책을 읽고 정리했습니다.
더 자세한 내용은 책을 구매해보시길 권장드립니다!
728x90
반응형