티스토리 뷰

HTML

[HTML] HTML 고급 (Async, Defer의 차이점)

_Woogie 2023. 4. 12. 18:22

HTML 기본 구조

<!DOCTYPE html> // 관습적으로 document 타입은 html이다라고 명시
<html> // html은 head와 body로 나뉘어진다.
<head> // 타이틀, 제목, 부가설명 등의 메타정보만을 포함한다.
    <meta charset="UTF-8"> //문자포맷을 UTF-8로 세팅한다.UTF-8은 현존하는 모든언어를 지원한다.
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title> //브라우저 탭 부분에 보이는 제목
</head>
<body> // 사용자에게 보여지는 최상위의 컨테이너, body안에 작성된 내용이 화면에 보여진다. 
	
</body>
</html>

 

우리는 HTML과 JavaScript를 이용해서 웹 프로그래밍을 할 때 <script>태그를 <body>태그가 끝나는 지점 바로 위에 지정해준다. 그 이유는 브라우저가 HTML 파싱을 하다가 <script>태그를 보면 파싱을 중단하고 스크립트 파일을 다운로드하고 실행하기 때문이다.

그래서 <script>태그가 맨 위에 있으면 브라우저가 스크립트를 다운로드하고 실행할 때까지 화면에 아무것도 보이지 않게 되기 때문에 <body> 태그 맨 아래에 위치시키는 것이다.

 

하지만 이 방법이 완벽한 해결책은 아니라고 한다.

 

 

위 사진을 보게 되면 <script>태그에 아무 설정도 해주지 않으면 HTML 파싱을 하다가 스크립트 다운로드와 실행을 하기 위해서 파싱을 멈추는걸 알 수 있다.

이때 HTML 문서 자체가 아주 큰 경우라면 브라우저가 HTML 문서를 모두 파싱하고 스크립트를 받게 되기 때문에 마찬가지로 페이지가 정말 느려질 것이다.

 

그래서 나온 속성이 바로 async와 defer속성이다.

 

defer

defer 속성이 있는 스크립트를 "백그라운드"에서 다운로드한다. 따라서 HTML 파싱을 멈추지 않고 비동기적으로 스크립트 파일을 다운로드받을 수 있다. 이런 특징 때문에 defer속성이 없을 때보다 빠르게 페이지를 로딩할 수 있다.

 

 

async

또 다른 대안으로는 async 속성이 있다. defer속성과 마찬가지로 백그라운드에서 스크립트 파일을 다운로드한다. defer와 다른 점이 있다면 defer 속성은 페이지 전체가 다운로드 및 파싱된 이후에 스크립트가 실행이 되고 async 속성은 스크립트 파일이 다운로드 완료되고 바로 실행된다는 차이가 있다.

 

실무에서는 defer를 DOM 전체가 필요한 스크립트나 실행 순서가 중요한 경우에 적용하고, async는 방문자 수 카운터나 광고 관련 스크립트같이 독립적인 스크립트 혹은 실행 순서가 중요하지 않은 경우에 적용한다고 한다.