페이지 로드 후 실행하기 (window.onload, document.ready) / document.ready를 순수자바스크립트로! (DOMContentLoaded)

📖  목차

 

스크립트를 위쪽에서 불러오면 요소를 찾지 못하는 오류를,

아래쪽에서 불러오면 느린 로딩속도 등의 이유로

우리는 스크립트 내에서 페이지로드 후 불러오는 함수를 사용하곤 한다.

 

대표적으로 js구문의 window.onload와 jQuery구문의 document.ready를 많이 사용할텐데

이 둘에 대해서 알아보고 이 외에 또 어떤것들을 사용할 수 있는지 알아보자!

---

window.onload()

<script>
	window.onload = function(){
    
    }
</script>

대표적인 속성인 window.onload는 HTML의 모든 태그를 불러온 후 코드내에 onload가 있을 경우 읽어낸다.

또한 js, css까지 모~~두 읽은 후에 실행이 되기 때문에 매우매우매우 느릴 수 있다는 단점이 있다.

 

또한 onload를 사용하면 가장 마지막에 실행된 onload함수만 실행하게 되는데

물론 한 프로젝트에 onload함수는 하나만 사용해서 안에 다 때려넣겠지만 만에하나 여러개의 onload함수를 사용하게 된다면 가장 마지막에 실행된 onload함수 하나만! 실행이 되기때문에 오류가 발생한다.

 

따라서 많은 분들이 window.onload를 사용하는 것을 추천하지는 않으셨다.

 

그래서 이에대한 대처로 나온것이 JQuery의 document.ready이다.

 

document.ready

<script>
	$(document).ready(function(){
    
    });
</script>

document.ready는 window.onload와 다르게 태그의 로드만을 감지한다.

이미지나 영상상관없이 DOM트리를 생성한 직후 실행되면서 window.load보다 조금 더 빠르게 실행되고 중복 사용하여 실행해도 전부 다 실행할 수 있다는 장점이 있다.

 

하지만.. jQuery를 사용하려면 cdn을 추가해야하는데 요즘처럼 순수자바스크립트의 중요성이 높아지면서 자연스레 jQuery의 사용빈도가 줄어들텐데 굳이 document.ready 이 한줄만을 위해 cdn을 추가하는건 너무나도 비효율적이다.

 

document.ready와 크게 다를바 없는 성능을 VanilaJS만으로도 구현할 수 있는데 

이것은 DOMContentLoaded이다.

 

DOMCountentLoaded

window.addEventListener('DOMContentLoaded', function()
{

});

DOMContentLoaded는 addEventLister의 속성으로 쓰이게 된다.

 

이 코드를 사용하면 document.ready와 크게 다를바 없는 성능을 구현할 수 있다. 

하지만 ie8이하에서는 지원하지 않기 때문에 본인이 대처해야하는 환경이 어디까지인지 체크를 해 볼 필요가 있다.

하지만 요즘은 ie8이하의 점유율이 대폭 낮아진 상태라 문제없이 사용할 수 있지 않을까라고 생각한다.

(ie8이하에서도 대처할 수 있도록 콜백을 짜놓을 수 있지만....ie8인데...굳이..?)

 

---

기타..

이 외에도 함수를 실행할 때 click이라던지, change라던지 이벤트가 발생하면 함수를 호출하는 방법도 있다.

하지만 내가 생각해보고 싶었던 것은 이벤트가 발생할때가 아닌 페이지를 실행했을때 함수가 호출되는 부분이었다.

 

평소에는 아무렇지 않게 document.ready를 사용했지만 jQuery의 사용을 최대한 줄이려고 하고 있기때문에

이 글을 통해 나는 아마 DOMContentLoaded라는 방법을 사용하지않을까??

만약 이 방법에 문제가 생기거나 더 좋은 방법이 있을지도 모르니 끊임없이 정보를 찾아다닐 필요는 있을 것 같다:)