JavaScript를 HTML에 링크할 때 효율적인 방법

Berry·2021년 11월 29일

HTML에서 자바스크립트를 포함할 때 어떻게 포함하는 것이 더 효율적일까요?

1. head 안에 그냥 script를 포함시키기

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>방법1</title>
    <script src="main.js"></script>
</head>
<body>
  
</body>
</html>

HTML을 쭉 파싱하다가 script 태그가 보이면 HTML을 파싱하는것을 잠시 멈춤
필요한 JS 파일을 서버에서 다운받아 실행한 다음에 파싱하는 부분으로 넘어감
자바스크립트 파일 사이즈가 큰 경우 페이지가 로드되는데 많은 시간이 소요됨

2. body 끝 부분에 script를 추가하기

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>방법2</title>
</head>
<body>
  <script src="main.js"></script>
</body>
</html>

HTML을 쭉 파싱해서 페이지가 준비된 다음 script를 만나서 서버에서 받아오고 실행
사용자가 기본적인 HTML을 빨리 볼 수 있음
자바스크립트 의존성이 큰 경우, 사용자가 정상적으로 작동하는 웹 페이지를 보기 어려움

3. head + async

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>방법3</title>
    <script async src="main.js"></script>
</head>
<body>
  
</body>
</html>

브라우저가 HTML을 파싱하다가 async을 확인하고 병렬로 다운로드를 명령만 해놓음
다시 파싱을 하고 JS 파일이 다운로드되면 그때 파싱을 멈춤
다운로드된 JS 파일을 실행하게된다.
이후 실행을 다하고나서 나머지 HTML을 파싱함
다운로드받는속도를 절약할 수 있지만 HTML이 파싱되기도 전에 실행이 됨
사용자가 페이지를 보는데 여전히 시간이 조금 걸릴 수 있음

4. head + defer

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>방법4</title>
    <script defer src="main.js"></script>
</head>
<body>
  
</body>
</html>