script 태그의 위치
230
작성한 질문수 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
35
1
강의 교안은 따로 없을까요?
0
230
1
배열관련 질문드립니다.
0
359
2
제발 도와주세요
-4
942
1
괄호 질문
0
439
1
new 를 안 붙이는 경우 (섹션19)
0
365
1
무한루프
1
1229
1
혹시 교재는 따로 없을까요?
0
696
0
선생님과 접점을 찾았어요.
0
467
0
new 생성자
0
273
0
sample파일에서 질문있습니다.
3
431
1
password == '111111'
0
527
1
배열
0
294
1
toUpperCase() 에 대해서 질문입니다.
0
261
0
강의를 들으면서 비쥬얼스튜디오 코드를 사용하여도 상관 없을까요?
0
641
2
\'와 변수를 같이 쓰면 안 되나요?
0
354
2
왜 에러가 났는지
0
367
1
첫번째 for문에서 i값 5가 5번 출력 되는 이유
0
526
3
name이 뭐죠
0
291
1
첫번째 예시문에서 값이 왜 5가 5번 반복되는지 궁금합니다.
0
722
3
grades 객체에 key값 show의 function을 지정하는 지점에서 오류가 발생합니다.
0
309
1
function오류
0
402
1
객체 출력차이(document.write, console.log)
0
322
0
자바스크립트에서 함수가 아닌 곳에서 정의된 변수
0
202
0