기록공간

<script>를 <body> 맨 뒤에 삽입하는 이유? 본문

FrontEnd/JavaScript

<script>를 <body> 맨 뒤에 삽입하는 이유?

입코딩 2021. 4. 19. 08:57
반응형

자바스크립트 코드는 html 태그 어디에 놓더라도 동작한다.

하지만 일반적인 사이트들의 html 코드를 살펴보면 <body> 맨 마지막에 <script>가 삽입되어 있다는 것을 알 수 있다.

 

google 검색결과 페이지 html

도대체 어떤 이유가 있는 것일까?

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> JavaScript </title >
  <script type ="text/javascript">                 
          alert( "Hello, JavaScript!");                        
  </script >                
</head>
<body>
        
</body>
</html>

만약 다음과 같이 자바스크립트를 삽입했다고 가정해보자.

이렇게 간단한 자바스크립트 코드는 별 문제가 생기지 않을 것이다.

하지만 매우 무거운 자바스크립트 코드들이 포함되어 있다면 어떨까?

 

그 코드들을 불러오고 실행하느라, 그 밑에 있는 html 코드들이 로딩되지 못하게 될 것이고,

이는 브라우저가 렌더링 되는 것에 방해가 될 수 있다. 

그래서 사용자는 완성되지 않은 중간 화면을 오랫동안 쳐다보고 있어야 할지도 모른다.

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> JavaScript </title >               
</head>
<body>

  <script type ="text/javascript">                 
          alert( "Hello, JavaScript...!");                        
  </script >     
</body>
</html>

다음과 같이 자바스크립트 코드를 body 태그 맨 뒤에 선언하게 되면,

무거운 코드가 있다고 하더라도 html태그와 CSS가 모두 동작한 다음 불러오기 때문에

미완성된 화면이 오랫동안 지속되지 않을 것이다.

또한 문서의 DOM(Document Object Model)구조가 완료된 시점에서 실행되기 때문에

따로 추가 설정을 할 필요가 없어진다.

 

그렇기 때문에 특별한 사유가 있는게 아니라면 <script> 위치는 <body> 태그 맨 마지막에 선언하는 것 올바르다.

반응형
저작자표시

'FrontEnd > JavaScript' 카테고리의 다른 글

JavaScript 변수  (0) 2021.06.08
로컬 스토리지(Local Storage)  (0) 2021.04.20
바닐라 자바스크립트(Vanilla JS)란?  (0) 2021.04.19
AJAX 정리  (0) 2020.12.09
jQuery(제이쿼리) 정리  (0) 2020.12.09
'FrontEnd/JavaScript' Related Articles more
Comments