📖 HTML(2) script 태그의 위치

Lee Jooam·2022년 4월 22일

script 태그와 딜레이

// index.js

function init() {
  for (let i = 0; i < 1000000; i++) {
    console.log("woo");
  }
}

init();

<!-- index.html -->

<!DOCTYPE html>
<html lang="en">
  <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>Document</title>
    <script src="./index.js"></script>
  </head>
  <body>
    <h1>hello world</h1>
  </body>
</html>

위와 같이 1,000,000번의 console 출력을 실행하는 스크립트 파일이 있다고 가정해보자.

실제로 이 index.html 파일을 실행시키면 hello world가 화면에 나타나는데 한참이나 시간이 걸린다.

스크립트 파일을 fetch하고 execution하는 시간 동안 HTML의 파싱이 멈추기 때문이다.

그리고 만약 스크립트 파일에서 DOM 요소에 접근한다고 했을 때 HTML 파싱이 해당 DOM 요소까지 마치지 않은 상황이라면 문제가 생길 수 있다.

이 현상에 대한 첫 번째 해결책은 다음과 같다.

script 태그를 body 최하단에 넣기

<!DOCTYPE html>
<html lang="en">
  <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>Document</title>
  </head>
  <body>
    <h1>hello world</h1>
    <script src="./index.js"></script>
  </body>
</html>

다음과 같이 script 태그를 body의 맨 밑 부분에 선언하는 건 흔한 상황이다.

스크립트 태그를 최하단으로 내려 HTML 문서가 먼저 렌더링 되도록한다. 그렇게 한다면 사용자가 받는 로딩에 대한 체감을 낮출 수 있다.

하지만 이것은 완벽한 해결책이 아니다.

스크립트 파일의 실행이 아주 오래 걸리고, 많은 이벤트들이 그 스크립트 파일에 작성되어 있다면 사용자와 웹 어플리케이션 간의 상호작용에 딜레이가 생기기 때문이다.

또한 HTML 파일이 아주 클 때도 script의 실행에 오랜 시간이 걸리기 때문에 완벽하게 페이지가 로딩될 때까지 딜레이가 생기게 된다.

이런 상황이 모던한 웹 브라우저에서는 어떤 식으로 처리되는 지 알아보자.

defer 속성

<!DOCTYPE html>
<html lang="en">
  <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" />
    <script defer src="./index.js"></script>
    <title>Document</title>
  </head>
  <body>
    <h1>hello world</h1>
  </body>
</html>

외부에서 불러온 스크립트 파일은 fetch(불러오기)와 execution(실행) 과정을 거친다.

defer 옵션은 이 두 과정 중 fetch 과정을 HTML 파싱과 함께 하도록 해준다. fetch를 마친 script 파일은 페이지의 구성이 끝나고 난 후 실행된다.

<!DOCTYPE html>
<html lang="en">
  <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" />
    <script defer src="./index.js"></script>
    <script defer src="./index_long.js"></script>
    <script defer src="./index_small.js"></script>

    <title>Document</title>
  </head>
  <body>
    <h1>hello world</h1>
  </body>
</html>

defer 옵션을 가진 스크립트 태그가 여러 개 있다면 어떻게 될까? 모든 파일은 script 태그를 만나 멈추지 않고 fetch 과정을 진행한다.

그리고 페이지의 구성이 끝나면 각각 파일을 실행한다. 이때 실행되는 순서는 먼저 fetch된 순서가 아닌 파일이 등록된 순서이다.

async 속성

<!DOCTYPE html>
<html lang="en">
  <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" />
    <script async src="./index.js"></script>
    <script async src="./index_long.js"></script>
    <script async src="./index_small.js"></script>

    <title>Document</title>
  </head>
  <body>
    <h1>hello world</h1>
  </body>
</html>