script 태그의 위치
224
작성한 질문수 2
script를 input 태그 위에 위치시키면 동작되지 않는데 그 이유는 무엇인가요?
답변 1
1
안녕하세요, Sujin Lee님!
결론을 먼저 말씀드리자면, <script> 태그는 <body> 태그 최하단에 위치하는 것이 좋습니다.
이것을 이해하기 위해서는 브라우저의 동작 방식을 이해할 필요가 있습니다.
브라우저의 동작 방식
- HTML을 읽기 시작한다.
- HTML을 파싱한다.
- DOM 트리를 생성한다.
- Render 트리 (DOM tree + CSS의 CSSOM 트리 결합)가 생성되고
- Display에 표시한다.
위의 순서를 보면, HTML을 파싱한 다음 DOM 트리를 생성합니다. 그런데 브라우저는 HTML 태그들을 읽어나가는 도중 <script> 태그를 만나면 파싱을 중단하고 javascript 파일을 로드 후 javascript 코드를 파싱합니다. javascript 파싱이 완료되면 그 후에 HTML 파싱이 계속됩니다.
HTML 태그들 사이에 script 태그가 위치하면 두 가지 문제가 발생합니다.
HTML을 읽는 과정에 스크립트를 만나면 중단 시점이 생기고 그만큼 Display에 표시되는 것이 지연됩니다.
그리고 DOM 트리가 생성되기전에 자바스크립트가 생성되지도 않은 DOM의 조작을 시도할 수 있습니다.
위와 같은 상황들을 막기 위해 script 태그는 body 태그 최하단에 위치하는게 가장 좋습니다.
혹시 궁금하신 점이 있다면 댓글 남겨주세요.
도움이 되었으면 좋겠습니다. :)
강의 교안은 따로 없을까요?
0
207
1
배열관련 질문드립니다.
0
345
2
제발 도와주세요
-4
928
1
괄호 질문
0
423
1
new 를 안 붙이는 경우 (섹션19)
0
355
1
무한루프
1
1210
1
혹시 교재는 따로 없을까요?
0
685
0
선생님과 접점을 찾았어요.
0
456
0
new 생성자
0
262
0
sample파일에서 질문있습니다.
3
418
1
password == '111111'
0
510
1
배열
0
281
1
toUpperCase() 에 대해서 질문입니다.
0
251
0
강의를 들으면서 비쥬얼스튜디오 코드를 사용하여도 상관 없을까요?
0
623
2
\'와 변수를 같이 쓰면 안 되나요?
0
336
2
왜 에러가 났는지
0
352
1
첫번째 for문에서 i값 5가 5번 출력 되는 이유
0
502
3
name이 뭐죠
0
275
1
첫번째 예시문에서 값이 왜 5가 5번 반복되는지 궁금합니다.
0
700
3
grades 객체에 key값 show의 function을 지정하는 지점에서 오류가 발생합니다.
0
296
1
function오류
0
393
1
객체 출력차이(document.write, console.log)
0
315
0
자바스크립트에서 함수가 아닌 곳에서 정의된 변수
0
190
0
동일한 이름의 전역변수 선언이 가능한가요
1
743
1