script 태그의 위치, 어디에 두어야 할까?
결론부터 말하면, 자바스크립트 코드를 담고 있는 <script> 태그는 웹 페이지 내 어디에든 배치할 수 있습니다. 다만 일반적으로는 <head> 태그 안이나 <body> 태그 안에 넣는 것이 권장됩니다.
body 태그 안에 넣으면 성능에 유리합니다
브라우저는 HTML 문서를 위에서부터 순서대로 해석하기 때문에, <head>에 스크립트가 있으면 해당 스크립트의 실행이 끝날 때까지 페이지 렌더링이 지연될 수 있습니다. 따라서 성능 측면에서는 자바스크립트를 <body> 요소 안, 특히 본문 콘텐츠가 끝나는 위치에 두는 것이 좋습니다.
다음은 <body> 태그 안에 <script>를 추가하는 예제입니다.
<html>
<body>
<script>
document.write("Hello World!");
</script>
</body>
</html>head 태그 안에 넣는 경우
반대로 <head> 태그 안에 스크립트를 넣는 방법도 있습니다. 페이지가 로드되기 전에 반드시 먼저 실행되어야 하는 코드(예: 설정 값, 조기 실행이 필요한 로직 등)라면 head에 두는 것이 적합합니다.
<html>
<head>
<script>
document.write("Hello World!");
</script>
</head>
<body>
</body>
</html>정리
- <body> 안: DOM 요소가 먼저 로드된 후 스크립트가 실행되므로 페이지 로딩 속도와 사용자 경험에 유리합니다.
- <head> 안: 페이지 렌더링 전에 스크립트를 먼저 실행해야 할 때 사용합니다. 이 경우
defer또는async속성을 함께 활용하면 렌더링 지연을 줄일 수 있습니다.
즉, 자바스크립트를 반드시 <head>에 넣어야 하는 것은 아니며, 대부분의 경우 성능과 유지보수를 고려해 <body> 마지막 부분에 배치하는 것이 가장 좋은 선택입니다.