[html] async, defer

sinsin·2022년 4월 22일
0

html

목록 보기
2/2

document는 html 문서가 전부 parsing 되어야 ready됨.


head 안에 script

<head>
	<title>Document</title>
	<script src="main.js"></script>
</head>

중간에 등장하는 script를 실행하기 위해 나머지 뒷부분 html의 parsing을 멈추므로, 만약 JS가 무겁다면 화면 로드가 오래 걸릴 수 있음.



body 안에 script

<head>
	<title>Document</title>
</head>
<body>
	<script src="main.js"></script>
</body>

html 요소는 바로 준비가 될 수 있지만 스크립트는 가장 마지막에야 다운로드가 시작되기 때문에, 자바스크립트 의존도가 높은 화면은 자바스크립트를 실행하기까지 불완전한 상태로 기다려야 함.



defer와 script

<head>
	<title>Document</title>
	<script async src="main.js"></script>
</head>
  • 브라우저는 script를 만난 순간 html 파일을 parsing 하는 동시에 js파일을 병렬로 다운로드받음.
    하지만 다운이 완료되는 순간 html의 parsing을 멈추고 js를 실행하기 때문에 사용자는 html보다 먼저 js를 보게될 수 있고, 이 때 js가 참조할 대상인 html 요소가 parsing 되어있지 않으면 오류가 발생할 수 있음.
  • 또한 스크립트가 여러 개라도 먼저 다운로드된 것을 먼저 실행하기 때문에 스크립트가 순서의존적이라면 오류가 발생할 수 있음.



async ⭐️⭐️⭐️

<head>
	<title>Document</title>
	<script defer src="main.js"></script>
</head>

브라우저는 스크립트를 만난 순간 html 파일과 함께 병렬로 다운로드받지만, html 파일의 parsing이 끝난 뒤에 왼료된 script파일을 실행시키므로 사용자는 안정적으로 출력된 화면을 보게 됨.



0개의 댓글