-
script 태그 위치와 onload, DOMContentLoaded, readyKnowledge/javascript 2019. 8. 13. 15:10반응형
script는 아무 데나 넣을 수 있다. 그러나 아무 데나 놔서는 안된다
12345678910111213141516<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>DOMContentLoaded</title></head><body><script>var target = document.querySelector('div');console.log(target);</script><div>시작</div><div>중간</div><div>끝</div></body></html>이 코드는 아래와 같은 결과가 나온다
12345678910111213141516<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>DOMContentLoaded</title></head><body><div>시작</div><script>var target = document.querySelector('div');console.log(target);</script><div>중간</div><div>끝</div></body></html>이 코드는 아래와 같은 결과가 나오고..
뻔한 중간은 건너뛰고 script를 </body> 바로 위에 위치시키면
그제서야 비로소 의도한 결과를 얻을 수 있다
즉 스크립트 태그는 어디든 위치할 수 있지만
HTML 파싱과 DOM 생성이 완료된 후 작동할 수 있게 가장 하단에 위치시키는 것이 가장 좋다는 말이다.
실제로 브라우저는 HTML을 읽어가는 중에 script 태그를 만나면 html파싱을 중단하고
자바스크립트 코드를 로드해서 파싱한 후 그 과정이 끝나면 다시 html을 파싱하기 때문.
그러나 상황에 따라 스크립트 태그를 </body> 직전에 두기 힘든 경우도 있을 수 있다.
그렇기에 실무에선 DOMContentLoaded 이벤트와 load를 사용한다. DOM Tree 분석이 끝나면 DOMContentLoaded 이벤트가 발생하며, 그 외 모든 자원(이미지, 동영상 등등..)이 다 받아져서 브라우저에 렌더링까지 다 끝난 시점에 Load가 발생한다. 보통 DOM Tree가 다 만들어지면 DOM에 접근할 수 있기 때문에 주로 DOMContentLoaded를 사용한다.
설명한 내용은 콘솔에 찍어서 확인해 볼 수도 있다
123456789101112131415161718192021222324252627<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>DOMContentLoaded</title></head><body><script>window.onload = function(){var target = document.querySelectorAll('div');console.log(target);console.log("afterwindowload");}document.addEventListener("DOMContentLoaded", function() {var target = document.querySelectorAll('div');console.log(target);console.log("afterdomload");});var later = document.querySelectorAll('div');console.log(later);console.log("바로시작")</script><div>시작</div><div>중간</div><div>끝</div></body></html>이렇게 스크립트 태그를 바디 열림 태그 바로 아래 위치 시키고
onload, DOMContentLoaded, pure 순서대로 콘솔에 찍어보면
그냥 쓴 건 가장 먼저 실행되지만 dom을 찾지 못하고
그 이후 DOMContentLoaded 이벤트 안에 있는 콘솔 내용이 찍히고
onload 안에 있는 콘솔 내용이 찍히는 걸 확인할 수 있다
결론 : 실행되는 자바스크립트 코드는 DOMContentLoaded 안에 보관하자!
ps. DOMContentLoaded 와 jQuery의 Ready는 같다. jQuery 쓰시는 분들은 Ready 쓰세요!
참고 :
[LECTURE] 2) DOMContentLoaded 이벤트 : edwith
들어가기 전에 로딩 이후에 자바스크립트 동작이 이뤄지는 것이 일반적입니다. 자바스크립트가 실행돼야 할 가장 적절한 타이밍은 언제일까요? 학습 목표 DOM ContentLoaded ... - 부스트코스
www.edwith.org
HTML에서 script태그는 어디에 위치해야 할까?
처음 html, javascript를 공부 할 때는 script 태그는 head 태그에 위치하게끔 하는 코드나,또는 body 태그의 어디에 위치하건 그 위치에 대해 별 의미를 두지 않는 코드들이 많았다.하지만 지금은 항상 스크립트는 body…
junhobaik.github.io
반응형'Knowledge > javascript' 카테고리의 다른 글
javascript 객체 리터럴 패턴과 생성자 패턴, prototype (0) 2019.09.09 데이터 바인딩을 도와주는 handlebars.js 사용법 (0) 2019.08.26 setTimeout에서 this사용하는 방법! (0) 2019.08.26 CSS와 javascript는 눈보다 빠르다 슬라이드와 무한슬라이드 (6) 2019.08.13 자바스크립트로 리스트에 이벤트 다는 방법 ( Event delegation / 이벤트 위임 ) (2) 2019.08.12