Computer >> 컴퓨터 >  >> 프로그래밍 >> HTML

HTML

HTML <script> 요소를 사용하여 문서에 JavaScript를 추가하는 방법을 알아보세요.

HTML <script> 요소는 문서에 JavaScript 코드를 추가할 때 사용합니다.

<script> 요소로 JavaScript를 추가하는 방법은 크게 두 가지입니다:

즉, JavaScript를 내부에서 로드하느냐, 외부에서 로드하느냐의 차이라고 할 수 있습니다.

지금부터 두 가지 방법을 하나씩 자세히 살펴보겠습니다.

인라인 JavaScript

JavaScript 코드를 인라인으로 삽입하려면 여는 태그와 닫는 태그를 정의한 뒤, 그 사이에 JS 코드를 작성하면 됩니다:

<script>
  // 여기에 JavaScript 코드를 작성하세요
</script>

<script> 요소는 문서의 <head> 요소 안에 배치할 수 있습니다:

<!DOCTYPE html>
<html>
  <head>
    <script>
      // 여기에 JavaScript 코드를 작성하세요
    </script>
  </head>
  <body>
    ...
  </body>
</html>

또는 </body> 닫는 태그 바로 앞에 배치할 수도 있습니다:

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    ...
    <script>
      // 여기에 JavaScript 코드를 작성하세요
    </script>
  </body>
</html>

그렇다면 JavaScript를 <head>에 넣는 것과 <body>에 넣는 것에는 어떤 차이가 있을까요?

차이는 바로 성능(performance)입니다. 그리고 그 차이는 생각보다 클 수 있습니다.

기본적으로 HTML 문서와 그 요소들은 위에서 아래로 순서대로 파싱(읽기)되고 렌더링됩니다. <head>에서 JavaScript 코드를 로드하고 실행하면, 해당 스크립트의 파싱과 실행이 모두 끝날 때까지 페이지의 나머지 요소들, 즉 사용자에게 보이는 콘텐츠의 렌더링이 차단(blocking)됩니다.

JavaScript 파일의 실행 시간은 코드의 크기와 종류에 따라 몇 밀리초(ms)가 걸릴 수도 있고, 경우에 따라 몇 초가 걸릴 수도 있습니다. 그만큼 사용자가 페이지를 실제로 사용할 수 있게 되기까지의 시간이 지연될 수 있다는 뜻입니다.

반면 JavaScript 코드를 문서 하단(</body> 바로 앞)에 배치하면, 모든 페이지 콘텐츠가 렌더링되어 사용자에게 표시된 이후에 비로소 JavaScript가 로드되고 실행됩니다. 이렇게 하면 페이지 콘텐츠가 차단되지 않기 때문에 사용자가 훨씬 빨리 웹 페이지와 상호작용할 수 있습니다.

이제 인라인 JavaScript 코드를 삽입하는 방법과, 가장 성능이 좋은 방식으로 배치하는 방법을 모두 알게 되었습니다.

다음은 외부 JavaScript 코드를 가져오는 방법과, 인라인(내부) JavaScript와 어떻게 다른지 살펴보겠습니다.

외부 JavaScript 파일 가져오기

외부 JavaScript 코드를 로드하려면 .js 확장자를 가진 파일을 통해 가져와야 합니다. 예를 들어 main.js 같은 파일이죠.

사용 방법은 다음과 같습니다:

<script src="main.js"></script>

인라인 JavaScript와 마찬가지로, <head> 요소 안에 배치할 수도 있습니다:

<!DOCTYPE html>
<html>
  <head>
    <script src="main.js"></script>
  </head>
  <body>
    ...
  </body>
</html>

또는 </body> 닫는 태그 바로 앞에 배치할 수도 있습니다:

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    ...
    <script src="main.js"></script>
  </body>
</html>

defer 속성

모던 JavaScript 환경에서는 외부 스크립트를 페이지 하단에서 로드하는 것보다 더욱 뛰어난 성능을 낼 수 있는 방법이 있습니다.

바로 <script> 요소에 defer 속성을 사용하는 것입니다:

<script defer src="main.js"></script>

그리고 이 요소를 <head> 안에 배치합니다:

<!DOCTYPE html>
<html>
  <head>
    <script defer src="main.js"></script>
  </head>
  <body>
    ...
  </body>
</html>

defer 방식에서는 HTML 코드가 파싱되는 동안(병렬로) JavaScript 코드가 미리 로드되며(실행은 되지 않음), HTML 파싱이 모두 끝난 이후에 실행됩니다.

반면 외부 스크립트를 문서 하단에 배치하면 다음과 같은 순서로 진행됩니다:

defer를 사용하면 HTML이 파싱되는 동안 동시에(병렬로) JavaScript 코드를 로드하기 때문에, HTML 파싱이 끝나는 즉시 JavaScript가 이미 로드된 상태로 곧바로 실행할 수 있습니다.

왜 이 방법이 더 좋을까요? 물론 항상 더 나은 것은 아닙니다. 하지만 많은 웹사이트는 페이지가 상호작용 가능해지는 순간 곧바로 JavaScript가 동작해야 제대로 기능합니다. 이러한 접근 방식은 사이트가 훨씬 빠르게 상호작용 준비를 마치도록 도와줍니다.

지금 당장 defer 개념이 완전히 이해되지 않아도 괜찮습니다. 직접 사용해 보면서 경험을 쌓다 보면 자연스럽게 이해하게 될 것입니다.

가장 중요하게 기억할 점은, defer가 웹사이트에서 JavaScript 코드를 실행하는 일반적으로 가장 성능이 좋은 방법이라는 사실입니다.

알아두면 좋은 팁