📌 HTML에서 JavaScript를 포함하는 방법
- HTML에서 JavaScript를 포함할 때 어떻게 포함하는 것이 효율적인지 알아보겠습니다.
💬 태그 안에 추가
<!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>
</html>
- 위처럼
<head> 태그 안에 <script>를 포함하게 되면 동작 과정은 다음과 같습니다.
- 브라우저는 HTML 코드를 쭉 실행합니다.
<script> 태그를 만나는 시점에 src 속성에 따라 js 파일을 다운로드 받기 위해 HTML 파싱 작업을 잠시 멈추고, 필요한 js 파일을 서버에서 다운받습니다.- 다운로드 받은 js 파일을 실행한 후에 다시 파싱하는 작업으로 넘어갑니다.
- 만약 js 파일의 사이즈가 크거나 인터넷 속도가 느릴 경우 사용자가 우리가 구현한 웹 사이트를 보는데까지 많은 시간이 소요될 것입니다.
💬 태그 끝에 추가
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<div></div>
<script src="main.js"></script>
</body>
</html>
- 즉,
<body> 태그 끝 부분에 <script> 태그를 추가하는 것인데, 이렇게 하게 되면 HTML 파싱 작업이 모두 끝난 이후에 스크립트를 만나서 다운로드 한 뒤, 실행하게 됩니다.
- 따라서 웹 페이지가 js 파일 다운로드 전에 이미 준비가 되어서 사용자가 빠르게 페이지 콘텐츠를 볼 수가 있습니다.
- 하지만 만약, 우리가 만든 웹 페이지가 JavaScript에 굉장히 의존적인 경우 즉, 사용자에게 의미있는 콘텐츠를 제공하기 위해서는 서버에서 데이터를 받아와야 하는 경우에는 문제가 될 수 있습니다.
💬 <head> + async
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<script asyn src="main.js"></script>
</head>
</html>
- 위처럼
<head> 태그 안에 <script> 태그를 포함시키고, asyn 속성을 true로 줄 경우(asyn 속성은 불리언 값이기 때문에 선언하는 것 만으로도 true로 설정됨) HTML 파싱과 js 파일 다운로드를 병렬로 진행하게 됩니다.
- 이후 js 파일 다운로드가 완료되면, 그제서야 HTML 파싱 작업을 잠시 멈추고 js 파일을 먼저 실행한 후에 나머지 HTML 파싱 작업을 이어나가게 됩니다.
- 위와 같이 동작할 경우 js 파일 다운로드가 HTML 파싱과 병렬적으로 이루어지기 때문에 다운로드 받는 시간을 그 만큼 절약할 수 있습니다.
- 다만, 다운로드 받은 js 파일이 HTML 파싱 작업이 모두 끝나기도 전에 실행되기 때문에, 만약 js 파일에서 HTML 파일에 선언한 DOM 요소에 접근하려고 할 경우, 원하는 요소가 아직 정의되어 있지 않은 경우가 발생할 수 있습니다.
- 또한 js 파일 실행 시간동안 HTML 파싱 작업이 잠시 멈추기 때문에 여전히 사용자에게 콘텐츠를 제공하는 속도에 문제가 있습니다.
💬 <head> + defer
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<script defer src="main.js"></script>
</head>
</html>
- 위처럼
<head> 태그 안에 <script> 태그를 포함시키고, defer 속성을 true로 줄 경우 브라우저는 다음과 같이 동작합니다.
- HTML 파싱 작업을 수행합니다.
<script> 태그를 만날 경우 js 파일 다운로드를 병렬적으로 수행합니다.- 이후 HTML 파싱 작업이 모두 끝나고 나서 js 파일을 실행합니다.
- 위와 같이 동작할 경우 HTML 파싱 작업 동안 js 파일을 모두 다운로드 받아 놓고, HTML 파싱을 우선으로 하여 사용자에게 콘텐츠를 먼저 제공한 다음, 바로 이어서 js 파일을 실행하기 때문에 위 세 가지 방법보다 효율적으로 웹 페이지를 제공할 수 있습니다.
📌 async vs defer
- async와 defer의 차이점에 대해 살펴보겠습니다.
- async
- async 옵션으로 다수의 script를 다운로드 받을 경우 먼저 다운로드 되는 script를 먼저 실행하게 됩니다.
- 즉, 정의된 순서에는 상관없이 실행하기 때문에 만약 우리가 사용할 js 파일이 순서에 의존적이라면 문제가 발생할 수 있습니다.
- defer
- 반면 defer 옵션의 경우 HTML 파싱 작업 동안 필요한 js 파일을 모두 다운로드 받아 놓고, HTML 파싱 작업이 모두 끝나면 순서대로 js 파일을 실행하게 됩니다.
- 따라서 async에서 우려되었던 순서와 관련된 문제에서 자유로울 수 있습니다.
📌 결론
- 이렇게 여러모로 살펴보았을 때,
<head> 태그 안에 defer 옵션을 통해 script를 추가하는 것이 가장 효율적이고 안전하다고 볼 수 있습니다.