스크립트의 실행 시점을 조절하는 속성
<script src="./js/main.js"></script>
<script asyn src="./js/main.js"></script>
<script defer src="./js/main.js"></script>동적인 웹을 작성하긴 JavaScript 파일을 불러오는게 필요하다.
하지만 복잡하게 되어있는 JavaScript 파일이라면 용량이 매우 크며 로드시간이 길다.
따라서 scirpt 파일의 로드시간을 줄이는 속성을 알아보고 정리해본다.
<head>
<scirpt src="main.js"></script>
</head>
<body>
<div>
</div>
<scirpt src="main.js"></script>
</body>스크립트 소스를 읽어오게하는 방식은 크게 두가지가 있다.
head 안에 script를 작성하는 것과 body 끝에 작성하는 법이 있다.
1.head 안에 스크립트를 작성하게 되면 스크립트를 먼저 다운받고 실행한다음에 html을 분석하고 읽게된다 (parsing)
그랬을 때 단점은 스크립트 사이즈가 크다면 속도가 저하될 수 있다.
2.script를 body 끝에 작성하게 된다면 html을 parsing 하고난 이후에 script를 다운,실행하게 된다
단점은 스크립트를 다운받는 도중 이벤트를 발생시 제대로 동작이 안될 수 있다.
이런 단점들 때문에 스크립트 파일을 직렬이 아닌 병렬로 불러오는 방식을 선언하기 위해 async 와 defer 를 사용한다.
async
<script asyn src="./js/main.js"></script>3.html을 parsing 하는동안에 스크립트는 다운받는 중이며 실행할때는 parsing을 멈추며 스크립트를 실행하고 그 이후에 나머지 html을 parsing 하게된다.
병렬로 실행하기에 2번보다는 시간을 절약할 순 있지만
async 스크립트는 실행 순서가 보장되지 않기 때문에
// big.js는 로드가 10초가 걸림
<script asyn src="./js/big.js"></script>
// small.js는 로드가 3초가 걸림
<script asyn src="./js/small.js"></script>불러오는데 서로 다른 시간이 걸리는 async 스크립트라면, 먼저 로드가 되는 스크립트가 실행된다 그렇기에 실행 순서를 조정할 수 없고 만약 두 스크립트가 서로 의존성이 있다면 제대로 동작할지 않을 수 있다.
그래서 async 스크립트는 다른 스크립트에 의존적이지 않은 스크립트들을 독립적으로 실행 할 때 좋다.
defer
<script defer src="./js/main.js"></script>defer 스크립트 역시 병렬로 로드되며 로드가 완료된 후 즉시 실행되는 async 스크립트와는 다르게, defer 스크립트는 모든게 다 끝난 후에 실행된다.
또한 defer는 async 처럼 먼저 로드된 스크립트먼저 실행되는게 아니라 먼저 선언한 순서대로 실행된다.
이렇기 때문에 기본적으로 실행 순서도 보장받고 빠르기 때문에 효율적이다.
