Javascript
HTML 내의 script 태그 삽입 위치에 따른 차이
mickey7
2024. 3. 12. 23:57
<head> 내에 스크립트
페이지가 로드될 때 스크립트가 먼저 다운로드되고 실행. 이는 사용자가 페이지의 콘텐츠를 볼 때까지 스크립트 실행을 차단할 수 있으므로 페이지 로딩 속도에 영향을 줄 수 있다.
<body> 내에 스크립트
페이지 콘텐츠가 로드된 후 스크립트가 다운로드되고 실행. 이는 페이지 로딩이 더 빠르게 진행되지만 스크립트가 필요한 부분에서 실행될 때까지 기다려야 할 수 있다.
async 속성 활용
async 속성이 있는 <script> 태그는 HTML 파싱을 차단하지 않고 비동기적으로 로드.
이는 스크립트를 병렬로 다운로드하고 다운로드가 완료되면 즉시 실행.
다중 스크립트가 있을 때, 실행 순서는 다운로드 완료 순서와 일치하지 않을 수 있다.
defer 속성 활용
defer 속성이 있는 <script> 태그는 HTML 파싱을 차단하지 않고 비동기적으로 로드.
그러나 스크립트는HTML 파싱 후에 실행됩니다.
여러 개의 defer 스크립트가 있더라도 순서대로 실행됩니다.
요약하면, <script> 태그의 삽입 위치는 페이지 로딩 속도에 영향을 미치고, async 및 defer 속성은 스크립트의 다운로드 및 실행 방식을 제어합니다. async는 다운로드 후 즉시 실행되며 순서를 보장하지 않고, defer는 다운로드 후에 실행되며 순서를 보장합니다.