async vs defer
❗script를 head 안에 작성
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src ="main.js"></script>
</head>
<body>
</body>
</html>위 코드처럼 head 안에 script를 포함하게 될 경우, 브라우저가 한줄씩 html을 parsing한다. 그러다가 script src = "main.js"를 만나게 되면 잠시 parsing을 멈추고 필요한 자바스크립트 파일을 서버에서 다운받아 실행후 다시 html parsing을 시작한다.
🤨 만약 인터넷이 엄청나게 느리거나, JavaScript 코드가 길어서 다운이 오래걸릴 경우 사용자가 웹사이트를 보는데 많은 시간이 소요된다는 단점이 있다.
❗script를 body 가장 뒤에 작성
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
내용
</body>
<script src ="main.js"></script>
</html>다른 방법으로는 이와 같이 body 가장 아래에 script를 배치 하는것이다. 이러한 경우 Html parsing을 다 하고 스크립트를 서버에서 받고(fetcing js) 실행(executing js)하게 된다.
😊 사용자들은 페이지 컨텐츠를 미리 볼 수 있다.
🤨 다만, 웹사이트가 자바스크립트에 의존적인 경우 정상적인 페이지를 보기까지 시간이 걸린다.
❗script를 head 안에 작성 근데 이제 async 속성을 곁들인...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script async src ="main.js"></script>
</head>
<body>
내용
</body>
</html>또 다른 방법으로는 head 안에 script를 이용하되 async라는 속성값을 이용하는 것이다. async는 Boolean 타입이기 때문에 선언하면 true로 설정이 된다.
이를 사용하면 브라우저가 html을 parsing 하다가 script async 를 발견하면 스크립트를 서버에서 받는 작업과(fetcing js) parsing 작업을 동시에(병렬로) 한다. 그러다가 스크립트를 다 받으면 이를 실행(executing js)하고 나머지 html을 parsing 한다.
😊 body 끝에 script를 사용하는 것보다 내려받는 시간을 절약할 수 있다.
🤨 html parsing이 끝나기 전에 자바스크립트가 실행되기 때문에 자바스크립트가 DOM 요소를 조작하려고 할 때 우리가 원하는 html 요소가 아직 정의 안 된 상태일 수 있다.
❗script를 head 안에 작성 근데 이제 defer 속성을 곁들인...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script defer src ="main.js"></script>
</head>
<body>
내용
</body>
</html>html parsing을 하다가 defer를 만나면 다운로드(fetcing js)명령을 시킵니다. html parsing 작업을 끝까지 하고 마지막에 다운로드 된 자바스크립트 파일을 실행(executing js)한다.
😊 html parsing을 끝내서 사용자에게 페이지를 보여준 다음 자바스크립트를 실행하기 때문에 브라우저를 보는데 문제 발생이 줄어든다.
