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파일을 실행시키므로 사용자는 안정적으로 출력된 화면을 보게 됨.
