html 태그에서 script 태그 위치
조회수 1138회
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 답변
-
안녕하세요 monkeycode69님
해당 질문으로 보아 JavaScript 영상 강의 초반을 보고 계신 것으로 보입니다. ^ ㅡ ^
질문에 대한 답변 대신 해당 내용을 다루는 영상 강의 [4-21] Load vs DOMContentLoaded 이벤트 / async vs defer 속성을 시청하면 도움이 될 것 이라 생각됩니다. 그리고 남겨주신 질문에 간단하게 답변 달아봅니다.
답변 1
보다 나은 방법은 기준에 따라 달라질 수 있다고 봅니다. 제 경우는 문서객체모델(DOM)에 접근/조작하는 코드가 없을 경우
<head>에 사용하기도 합니다. 하지만 가급적</body>바로 위에 코드를 삽입해 사용합니다.답변 2
강의 초반에는 작성할 수 있는 다양한 방법을 알아야 하기에 요소 사이에 추가하는 방법을 설명했지만, HTML 해석(parsing)을 일시 중지하는 문제로 사용을 권장하지 않습니다.
답변 3
async속성과defer속성은 비슷해보여도 작동 방식이 다릅니다. 그리고 해당 속성은 모두 IE 10 이상에서 온전하게 작동합니다. 즉, IE 9 이하를 고려해야 하는 상황에서는 사용할 수 없습니다.-
(•́ ✖ •̀)
알 수 없는 사용자
-
댓글 입력