반응형
DOMContentLoaded와 load의 차이
먼저 아래와 같은 코드가 있다고 가정할 때
콘솔에 찍히는 순서는 어떻게 될까? 고민해보자
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./test.js" defer></script>
</head>
<body>
<script>
window.addEventListener('DOMContentLoaded', ()=>{
console.log('DOMContentLoaded');
})
window.addEventListener('load', ()=>{
console.log('load');
})
</script>
</body>
</html>(고민 중)
결과
js -> DOMContentLoaded -> load 순으로 출력되는 것을 확인할 있다
근데 이건 너무 당연한 예제네요
이미지 리소스가 많은 경우면 결과가 달라졌을 수도? 🤔
Why?
load는 모든 리소스(CSS, images..)가 다운로드된 다음에 이벤트 호출되고
DOMContentLoaded는 HTML document를 전부 읽고 DOM트리를 완성하는 즉시 이벤트가 호출된다.
그래서 load의 경우 이미지 리소스가 다 불러와진 후에 이벤트가 실행되기 때문에 리소스가 많을 경우 속도 저하가 발생!
그러나 이미지와 관련된 이벤트를 호출할 경우에는 속도 저하와 상관없이 load를 사용해야 된다
이미지 리소스가 많은 document의 경우 defer옵션 혹은 DOMContentLoaded를 사용하는 게 좋다.
적재적소에 잘 활용하자 ..
반응형
'📍 Front-End > 🜸 JavaScript' 카테고리의 다른 글
| [JavaScript30/Day-1] Drum Kit (0) | 2021.07.14 |
|---|---|
| [자바스크립트] 호이스팅이 뭘까 ,, (Hoisting!!!!!!!) (0) | 2021.07.13 |
| [자바스크립트] append()와 appendChild()의 차이 (0) | 2021.07.13 |
| [자바스크립트] 함수 (function) (0) | 2021.06.23 |
| [자바스크립트] var, let, const 변수 (0) | 2021.06.23 |
댓글