HTML script 태그의 위치

FrontEnd/HTML & CSS

SambaLim 2019. 3. 26. 23:33

HTML script 태그의 위치

<script>태그를 사용하여 자바스크립트를 HTML안에 넣습니다.

이 때, <script>의 위치가 어느 태그 내에 있는 것이 좋을지 알아보려 합니다.

`<head>` vs `<body>`

일반적으로 <script>의 위치가 <body>태그 안의 맨 마지막에 위치한 것을 일반적으로 볼 수 있었을 것입니다.

이 이유는 간단합니다. 브라우저가 웹 사이트를 로드할 때 <script>태그를 발견한 경우 HTML 구문 분석(파싱)을 멈추고 스크립트가 다운로드 할 때까지 로드를 중지하기 때문입니다.

<head>에 <script를 통해 자바스크립트를 수행한다면 <body>태그는 아직 파싱되기 전이기 때문에 자바스크립트에서 해당 태그가 무엇인지 알 수 없습니다. (null을 가지고 작업하게 됩니다.)

따라서 <body>내의 DOM에 접근하지 않는 자바스크립트를 수행하는 경우 <head>태그 내에 위치하여도 상관없지만 그렇지 않은 경우 <head>태그 내에서 HTML 구문 분석을 멈추고 로딩을 더 지연시킬 수 있습니다.

<body>태그 맨 아래에 <script>를 두는 것(</body>바로 위에 위치)은 HTML 파싱을 멈추지 않게 합니다. 그리고 이미 DOM객체들이 생성되어 작업에도 용이합니다.

<script type="text/javascript" src="./js/hello1.js" async></script>
<script type="text/javascript" src="./js/hello2.js" async></script>

async속성이 있는 스크립트는 비동기적으로 실행됩니다.

기존에 <script>만 사용하였을 때, HTML 파싱이 멈추는 문제를 해결할 수 있습니다.

다행히도 caniuse의 script-async 에 따르면 IE 10이상, Chrone 73 이상에서 사용이 가능합니다.

<script type="text/javascript" src="./js/hello1.js" defer></script>
<script type="text/javascript" src="./js/hello2.js" defer></script>

defer속성이 있는 <script>는 순서대로 실행합니다. (hello1.js → hello2.js)

async와 마찬가지로 HTML 파싱을 중지시키지는 않습니다. 하지만 async와 다르게 파싱이 종료된 후, 실행됩니다.

caniuse의 script-defer 에 따르면 대부분의 브라우저에서 사용이 가능합니다.