html 에서 javascript 코드를 head에 넣지 않고, body 맨 끝에 넣는 이유는 무엇인가요?

조회수 19142회

안녕하세요. 초보 개발자 gerald 입니다. AsQ 사이트를 구경하다가 궁금한 점이 생겨서 질문 남깁니다.

AsQ 사이트를 소스보기 해서 보면 javascript 를 불러오는 부분이 head에 있지 않고,

<html>
<head>
  <script type="text/javascript" src="~~~"></script>
</head>

아래처럼 body tag를 닫기 전에 적혀있습니다.

<html>
<head>
 ...
</head>
<body>
  ...
  <script type="text/javascript" src="~~~"></script>
</body>
</html>

이렇게 두면 어떤 점이 좋아지게 되는지 궁금합니다.

  • (•́ ✖ •̀)
    알 수 없는 사용자

4 답변

  • 웹브라우저가 HTML 문서를 해석(Parsing) 할 때 <script> 태그를 만나면 그 안에 있는 JavaScript 의 처리가 끝날 때 까지 다른 HTML의 해석을 멈추기 때문에 사용자 입장에서 HTML 페이지가 화면에 다 그려지기까지 더 오래걸리게 됩니다. 그래서 우선 CSS, HTML 해석이 먼저 완료되고 나서 JavaScript 가 수행하는 것이 더 빠르게 느껴지기 때문에 HTML 문서의 마지막(= </body> 직전)에 두는 것을 권합니다.

    참고링크

    • (•́ ✖ •̀)
      알 수 없는 사용자
  • 페이지 로딩을 조금 더 빠르게 하기 위해서 입니다. javascript를 안에 선언하게 되면 인터넷 환경이 매우 좋거나, 페이지가 단순할 때는 차이가 거의 없지만, 인터넷환경이 좋지 않을 때는 에 선언해 놓은 javascript때문에 페이지가 열리는 속도가 느려지는 현상이 생길 수 있습니다.

    따라서 javascript를 맨 끝에 넣으면 일단 페이지 먼저 열리고, 그 후에 javascript가 할일을 하게 되기때문에 퍼포먼스가 더 좋은 경험을 주게 됩니다.

    • 디자이너 같으신데... 자바스크립트 댓글도 다시나요? 2016.2.3 11:17
    • 짱 멋진 디자이너시군요! 2016.2.12 13:02
  • 퍼포먼스를 위해 스크립트는 가능하면 가장 뒤에 넣으라더라구요. 스크립트보다는 화면에 보여줄것들을 먼저 로딩한 다음에 제일 마지막에 스크립트를 로딩하는게 좋다고 합니다.

  • 기능적 차이는 없으나 순서적 차이는 있습니다.

    html 이 자바스크립트보다 빨리 로딩되어야 할 경우가 있습니다.

    그럴경우는 html 구문 밑에 쓰기도 합니다.

    하지만 상단에 쓴다고해서 html 이 로딩된 후 안불려지는것은 아닙니다.

    기본적으로는 로딩순서를 뭐가 먼저할것이냐 의 차이 말고는 없습니다.

    • (•́ ✖ •̀)
      알 수 없는 사용자

답변을 하려면 로그인이 필요합니다.

프로그래머스 커뮤니티는 개발자들을 위한 Q&A 서비스입니다. 로그인해야 답변을 작성하실 수 있습니다.

(ಠ_ಠ)
(ಠ‿ಠ)