HTML 태그 중 script 태그에는 async 속성과 defer. 이렇게 두 가지 속성이 있습니다.
이 두가지 속성은 어떤 특징이 있으며 두 가지 중 어떤 속성을 사용하는 것이 좋은지 알아보도록 할게요!
async 속성
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script async src="main.js"></script>
</head>
<body>
</body>
</html>
컴퓨터가 HTML 코드를 처음부터 읽어내려오다가 script 태그를 만나면 HTML을 읽는 것과 병렬로 위치하며 script 태그에 쓰인 파일을 다운로드합니다. 파일 다운로드가 완료되면 해당 파일(js)을 실행하게 되는데요.
이때, HTML을 읽는 것은 파일이 실행되는 동안 멈추게 됩니다. 그러고 파일 실행이 완료되면 다시 script 태그 아래의 나머지 HTML을 읽기 시작하게 되는 것이죠 😉
이렇게 script 태그에 async 속성을 사용했을 때 장점과 단점!
장점 : body 태그의 끝에 위치시켰을 때와 달리 script의 파일 다운로드가 HTML parsing과 병렬적으로 이루어지기 때문에 다운로드 시간을 단축시킬 수 있습니다.
단점 : 만약 js의 파일 내부에 HTML에서 쿼리를 조회하고 조작하는 부분이 있을 때, 해당 쿼리 실행을 할 수 있는 html 코드가 js가 실행된 다음에 위치해있다면 문제가 생길 수 있습니다.
또한 HTML 코드의 parsing이 완료되어야 사용자가 볼 수 있기 때문에 사용자가 화면을 보기까지 시간이 다소 걸릴 수 있습니다.
defer 속성
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script defer src="main.js"></script>
</head>
<body>
</body>
</html>
브라우저가 HTML 코드를 다운로드하여 읽어내려 오다가 head 태그 내부의 script 태그를 만나면 HTML 읽는 것과 동시에 병렬로 script 내부의 파일 다운로드를 같이 진행합니다. 그리고 파일 다운로드만 하고 해당 파일을 실행시키는 것은 HTML 코드 parsing이 다 끝난 뒤에 해당 script 파일을 실행시키게 되죠.
이렇게 defer 속성을 사용하게 되면 아래와 같은 장점이 있습니다.
장점 : HTML 코드를 읽어 오는 동안 script 내부의 모든 파일 다운로드를 완료하고 사용자가 화면을 보는 직후에 바로 해당 파일이 실행됩니다.
눈치채셨겠지만 async와 defer 속성 중에 defer를 사용하는 것이 훨씬 좋다는 것을 알 수 있을 거예요 😉
또한 추가적으로 head 태그 내부에 아래와 같이 script 파일이 여러 개가 정의되어 있을 경우
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="aa.js"></script>
<script src="bb.js"></script>
<script src="cc.js"></script>
</head>
<body>
</body>
</html>
async 속성을 사용했을 때는 해당 script의 순서 상관없이 다운로드가 먼저 끝난 파일에 대해 실행이 때문에
만약, 자신의 코드가 script 내부 파일의 순서에 의존적이라면? 이 또한 defer을 사용하는 것이 좋습니다.
defer은 script를 나열한 순서대로 실행이 되기 때문이에요! 😃
'HTML' 카테고리의 다른 글
| script 태그의 위치는 어디가 좋을까? (0) | 2020.09.06 |
|---|---|
| [CSS] font-size, color (0) | 2020.08.26 |
| [HTML] img 태그 (0) | 2020.08.12 |
| [HTML] p, br 태그 (0) | 2020.08.12 |
| HTML (HyperText Markup Language) (0) | 2020.08.03 |
댓글