Script async과 defer
###📝오늘 배운 내용
오늘은 html 파일에 script 테그를 작성하여 연결시켜줄 때, 어느 위치에 넣어줘야 가장 적합 할지 알아보았다.
1. head 테그 안에 script 테그를 작성한 경우
<!DOCTYPE html>
<html lang=""en>
<head>
<script src="hello.js"></script>
</head>
<body>
</body>
</html>이렇게 head 테그 안에 script 테그를 작성한 경우 우리는 html 파싱을 순차적으로 하다가 script 테그를 만나는 순간 Javascript 파일을 서버에서 다운 받은 후 이것을 실행한 후에 다시 html 파싱을 하게된다.
이렇게 사용하게 된다면, Javascript 파일이 거대한 내용을 담고 있다거나 또한 현재 인터넷 환경이 좋지 못 할 경우 우리는 웹사이트를 눈으로 확인하는데 있어 굉장히 많은 시간이 걸릴 수 있다.
2. body 테그 마지막 부분에 script 테그를 작성한 경우
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div>hello world</div>
<script src="hello.js"></script>
</body>
</html>이렇게 body 테그 가장 아래 부분에 script 테그를 작성할 경우 우리는 html 파싱된 내용을 빨리 볼 수 있는 장점이 있다. 하지만 만약 이 웹사이트가 Javascript 없이는 어떤 동작도 할 수 없다거나, 너무 Javascript에 의존적이라면 html이 파싱이 되어도 의미가 없을 것이다.
3. head 테그 안에 async을 사용했을 경우
<!DOCTYPE html>
<html lang="en">
<head>
<script async src="hello.js"></script>
</head>
<body>
</body>
</html>async 옵션을 사용할 경우 웹사이트가 html을 파싱하다 async을 발견하게 되고, html 파싱과 동시에 병렬로 Javascript 파일을 다운받는다.
이 방법은 body끝에 사용하는 것보다는 fetching이 병렬적으로 일어나기 때문에 다운로드받는 시간을 절약할 수 있다. 하지만 Javascript가 html이 파싱되기도 전에 실행되기 때문에 만약 Javascript 파일에서 쿼리 셀렉터로 돔 요소를 조작하려 할 때, 조작하는 시점에 원하는 요소가 아직 정의되지 않아 문제가 발생할 수 있다. 또한 Javascript 가 실행되는 동안에 block되므로, 사용자가 웹 페이지를 보는데까지 시간이 걸린다.
4. head 테그 안에 defer을 사용했을 경우
<!DOCTYPE html>
<html lang="en">
<head>
<script defer src="hello.js"></script>
</head>
<body>
</body>
</html>html 파싱을 하다가 defer를 발견하게 되면 Javacript 파일을 다운로드 받게 된다. 이렇게 명령만 시켜놓은 후 나머지 html 파싱을 시작한다. 그리고 html 파싱이 모두 끝난 후에야 Javascript를 실행한다. 개인적으로 defer이 가장 괜찮은 방법이라고 생각한다.
