html 태그에서 script 태그 위치

조회수 512회

script 태그의 html document에서의 위치에 대해 의문점이 생겨서 질문드립니다. (해당 영역에 대해 검색을 해보았습니다.)

1. <head> 안에 작성한다.
2. <body> 안에 작성한다.
3. </body> 바로 위에 작성해야한다.

라는 방법 3가지를 소개해 주셨었는데요. 주장이 아주 달라서 여쭤요.

1. 어떤 분은 html파싱 때문에 무조건 3번에 작성해야한다. 
2. 1번에는 가벼운 로딩 되기 전에 실행해야 할 javascript를
    3번에는 무거운 부류 javascript를 실행해야 한다.
3. 위, 아래에 작성하면 개발할 때 번거롭다. head에 작성해라.

라는 분도 많고 의견도 다양해서 어떤게 보다 나은 방법인지 알 수가 없더라구요.

1. 2번처럼 javascript의 기능, 크기에 따라 <head>, </body> 위에 작성하는 방법이
보다 나은 방법인가요?
2. <body>안에 작성해야 하는 경우도 있다고 하셨는데 예를들면 어떤 경우에 태그와 태그
사이에 작성하나요?
3. <head>작성하게 된다면, <script async> 속성과 <script defer>속성을 추가하는
방법이 보다 나아 보이는데, 제가 이해한 게 맞나요?

1 답변

  • 좋아요

    0

    싫어요
    채택 취소하기

    안녕하세요 monkeycode69님

    해당 질문으로 보아 JavaScript 영상 강의 초반을 보고 계신 것으로 보입니다. ^ ㅡ ^

    질문에 대한 답변 대신 해당 내용을 다루는 영상 강의 [4-21] Load vs DOMContentLoaded 이벤트 / async vs defer 속성을 시청하면 도움이 될 것 이라 생각됩니다. 그리고 남겨주신 질문에 간단하게 답변 달아봅니다.

    답변 1

    보다 나은 방법은 기준에 따라 달라질 수 있다고 봅니다. 제 경우는 문서객체모델(DOM)에 접근/조작하는 코드가 없을 경우 <head>에 사용하기도 합니다. 하지만 가급적 </body> 바로 위에 코드를 삽입해 사용합니다.

    답변 2

    강의 초반에는 작성할 수 있는 다양한 방법을 알아야 하기에 요소 사이에 추가하는 방법을 설명했지만, HTML 해석(parsing)을 일시 중지하는 문제로 사용을 권장하지 않습니다.

    답변 3

    async 속성과 defer 속성은 비슷해보여도 작동 방식이 다릅니다. 그리고 해당 속성은 모두 IE 10 이상에서 온전하게 작동합니다. 즉, IE 9 이하를 고려해야 하는 상황에서는 사용할 수 없습니다.

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

Hashcode는 개발자들을 위한 무료 QnA 사이트입니다. 계정을 생성하셔야만 답변을 작성하실 수 있습니다.

(ಠ_ಠ)
(ಠ‿ಠ)

ᕕ( ᐛ )ᕗ
로그인이 필요합니다

Hashcode는 개발자들을 위한 무료 QnA사이트 입니다. 계정을 생성하셔야만 글을 작성하실 수 있습니다.