-
웹브라우저 자바스크립트 - 문서로딩JavaScript/생활코딩 2018. 11. 30. 17:14
문서로딩 - https://opentutorials.org/course/1375/6765
자바스크립트를 실행할 때 어떤 타이밍에 실행해야지 문서의 엘리먼트들에게 문제없이 명령을 실행할 수 있는가와 관련되어 있다.
아래 예제를 실행시키면 값은 null이 나온다.
그 이유는 브라우저는 위->아래로 코드를 실행하는데 script부분의 id값 target은 위에서 찾을 수 없는 값이기 때문이다.
<html>
<head>
<script>
var t = document.getElementById('target');
console.log(t);
</script>
</head>
<body>
<p id="target">Hello</p>
</body>
</html>
위의 스크립트를 정상적으로 출력하는 방법은 아래와 같다.
1. script태그를 p태그 아래에 위치시킨다.
2. window객체의 onload를 사용한다.
3. window객체의 addEventListener를 사용한다.
아래는 3번방법을 이용한 것이다.
이 방법은 웹페이지창의 모든 코드들을 읽고 난 뒤 실행된다.
그런데 load 이벤트는 문서내의 모든 리소스(이미지, 스크립트)의 다운로드가 끝난 후에 실행된다. 이것을 에플리케이션의 구동이 너무 지연되는 부작용을 초래할 수 있다.
<head>
<script>
window.addEventListener('load', function(){
var t = document.getElementById('target');
console.log(t);
})
</script>
</head>
<body>
<p id="target">Hello</p>
</body>
아래코드는 위의 코드에서 'load'부분을 'DOMContentLoaded' 으로 변경한 코드이다.
DOMContentLoaded는 문서에서 스크립트 작업을 할 수 있을 때 실행되기 때문에 이미지 다운로드를 기다릴 필요가 없다.
하지만 DOMContentLoaded이벤트는 IE9 이하버전에서 동작하지 않는것을 고려해야 한다.
<html>
<head>
<script>
window.addEventListener('load', function(){
console.log('load');
})
window.addEventListener('DOMContentLoaded', function(){
console.log('DOMContentLoaded');
})
</script>
</head>
<body>
<p id="target">Hello</p>
</body>
</html>
'JavaScript > 생활코딩' 카테고리의 다른 글
자바스크립트 기본 - 함수지향, 유효범위 (0) 2018.12.03 웹브라우저 자바스크립트 - 마우스 (0) 2018.12.03 웹브라우저 자바스크립트 - 이벤트 타입, 폼 (0) 2018.11.30 웹브라우저 자바스크립트 - 기본동작의 취소 (0) 2018.11.30 웹브라우저 자바스크립트 - addEventListener() (0) 2018.11.30 댓글