# tag의 위치

* HTML의 `<script>`태그는 실행 가능한 코드를 문서에 포함하거나 참조할 때 사용합니다. 보통은 자바 스크립트 코드와 함께 사용합니다.
* HTML에서 `<script>`태그는 body 태그 안의 **최하단에 위치** 해야 합니다.
* 브라우저는 서버로부터 응답 받은 HTML 파일을 렌더링 엔진을 통해 읽고, 파싱한 다음 DOM 트리를 생성하는 순서로 동작합니다.
* 하지만 브라우저가 HTML 파일의 태그들을 읽어 나가는 중에 `<script>` 태그를 만나면 파싱을 중단하고, 자바 스크립트 파일을 로드 한 후, 자바 스크립트 코드를 파싱 합니다. 이 작업이 완료하면 중단되었던 HTML 파싱이 다시 시작됩니다.

  ![Browser](/files/-MaQx8NooJglkcSz-puE)
* `<script>` 태그가 HTML 태그들 사이에 위치하면

  **1. HTML을 읽는 과정에서 자바 스크립트 로드와 파싱을 위해 중단되는 시점이 생기고, 따라서 그 만큼 화면에 표시되는 것(display)이 지연됩니다.**

  **2. HTML 파싱이 끝나고 DOM 트리가 렌더링 되기 전에 자바 스크립트가 실행되어 DOM 조작을 할 경우 에러가 발생할 수 있습니다.**

```markup
  <!-- script.html -->
  <!DOCTYPE html>
  <html>
    <head>
      <meta charset="UTF-8" />
      <title></title>
    </head>
    <body>
      <script src="./script.js"></script>
      // dom 트리가 렌더링 되기 전에 DOM 조작(error)

      <input type="button" id="dom" value="Hello world" />

      <script src="./script.js"></script>
      // dom 트리가 렌더링 된 후 DOM 조작(working)
    </body>
  </html>
```

```javascript
  // script.js
  var dom = document.getElementById("dom");
  dom.addEventListener("click", function () {
    alert("Hello world");
  });
```

## 로딩 순서 제어

* `<script>` 태그가 body의 최하단에 위치할 수 없는 경우

  * `<script>` 태그의 `async` 속성으로 로딩 순서를 제어하거나,

  ```markup
  <script async src="script.js">
  ```

  * `<script>` 태그의 `defer` 속성으로 로딩 순서를 제어하거나,

  ```markup
  <script defer src="script.js">
  ```

  * **DOMContentLoaded** 와 **onload** 활용하여 script 내부에서 로딩 순서 제어할 수 있습니다.
    * **DOMContentLoaded** 내부의 코드는 DOM 생성이 끝난 후 실행됩니다.
    * **onload** 내부의 코드는 문서에 포함된 모든 콘텐츠 (images, script, css...) 가 전부 로드 된 후에 실행됩니다.

      ![DOMContentLoaded\_Load](/files/-MaQx8NpyS2rhtypsn-L) ![script\_console](/files/-MaQx8NqaTjEb5WgZKjx)

      ````markup
      <!DOCTYPE html>
      <html lang="ko">
        <head>
          <meta charset="UTF-8" />
          <title>Control Script Load</title>
        </head>
        <body>
          ```javascript
          <script>
            // 1. **window.onload**
            window.onload = function () {
              console.log("1.onload: afterwindowload");
              var target = document.querySelector("#test");
              console.log("target:", target);
            };
            // 2. **DOMContentLoaded**
            document.addEventListener("DOMContentLoaded", function () {
              console.log("2. DOMContentLoaded: afterdomload");
              var target = document.querySelector("#test");
              console.log("target:", target);
            });
            // 3. **일반 script 코드**
            console.log("3. script code");
            var target = document.querySelector("#test");
          </script>
      ````

      ```
      <div id="test">test</div>
      ```

      \</body> \</html>

      \`\`\`

※ Reference

<https://junhobaik.github.io/js-script-position/>

<https://www.youtube.com/watch?v=Ru5zGHkOgic>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://yong2401.gitbook.io/til-by-ellie/html-1/positionof-less-than-script-greater-than.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
