JavaScript 코드를 HTML보다 밑에 작성해야 하는 이유는 무엇인가요?

👩🏻‍💻 JavaScript 코드를 HTML보다 밑에 작성해야 하는 이유는 무엇인가요?

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="main.css">
</head>
<body>
  <div class="alert-box" id="alert">알림창</div>
  <button onclick="openAlert()">Open</button>
  <script>
    function openAlert() {
      document.getElementById('alert').style.display ='block';
    }
  </script>
</body>
</html>

💁🏻‍♀️ 요약하자면 ,

페이지 로딩 속도를 향상시킬 수 있고, DOM 조작 및 이벤트 처리가 효율적으로 이루어질 수 있기 때문입니다.

1. 로딩 순서

웹 브라우저는 HTML 문서를 위에서 아래로 파싱하며 로딩하는데, HTML 문서 내에 있는 요소들을 만나면 해당 요소들을 순서대로 처리하게 됩니다. 따라서 HTML 문서에 포함된 JavaScript 코드도 순차적으로 처리됩니다. 만약 JavaScript 코드가 HTML보다 위에 위치한다면, HTML 파싱 중에도 JavaScript 코드를 만나게 됩니다.

이 경우 브라우저는 JavaScript 코드를 실행하려면 HTML 파싱을 중단하고 코드를 처리해야 하므로, 페이지 로딩이 느려질 수 있습니다. 만약 JavaScript 코드가 DOM 요소들을 조작하려고 할 경우, 해당 요소들이 아직 파싱되지 않았을 수 있어서 오류가 발생할 가능성이 있기도 합니다.

2. DOM 접근 및 조작

JavaScript는 대부분 DOM 요소들을 조작하고 상호작용하기 위해 사용됩니다. 즉, 웹 페이지의 요소들을 선택하고 수정하는 등의 작업을 수행합니다.

만약 JavaScript 코드가 HTML 아래에 위치한다면, 코드가 실행되는 시점에 이미 DOM이 생성되어 있으므로 JavaScript는 즉시 요소들에 접근하고 조작할 수 있습니다.

3. 이벤트 처리

JavaScript는 사용자의 상호작용에 따라 동적인 반응을 제공하기 위해 사용되는데, 이벤트 처리를 위해 HTML 요소에 이벤트 리스너를 추가하거나, 이벤트 처리 함수를 등록해야 합니다.

만약 JavaScript 코드가 HTML 아래에 위치한다면, 페이지의 모든 요소들이 로딩된 이후에 이벤트 리스너가 등록되므로 사용자의 상호작용에 더 빠르게 반응할 수 있습니다.

4. 렌더링 지연 최소화

브라우저는 HTML을 파싱하면서 페이지의 내용을 표시합니다.

만약 JavaScript 코드가 HTML 아래에 위치한다면, 브라우저는 코드 실행을 위해 페이지 렌더링을 중지하지 않아도 되므로 사용자에게 더 빠르게 콘텐츠를 보여줄 수 있습니다.

'📂 기술 면접 > Language' 카테고리의 다른 글

TypeScript는 정확히 무엇이며 JavaScript와 어떻게 다른가요? (0)	2023.06.08
재귀를 활용하기 좋은 상황은 언제인지 예시를 들어 설명해 주세요. (0)	2023.05.09
Promise의 기능과 필요한 이유에 대해서 설명해 주세요. (0)	2023.04.10
순수함수란 무엇인가요? 불변성과 사이드 이펙트와 연결하여 설명해 주세요. (0)	2023.04.10
JavaScript의 스코프에 대해 설명해 주세요. (0)	2023.03.13

Dev. Ella

JavaScript 코드를 HTML보다 밑에 작성해야 하는 이유는 무엇인가요?