자바스크립트 구문 실행 순서 조절하기

1. window.onload

빠른 로딩속도를 위해 자바스크립트 구문을 나중에 따로 로드할 수 있는 함수이다. HTML의 모든 태그를 불러온 이후 onload가 실행된다.
HTML 태그에 이미지, 영상과 같은 고용량 파일이 있을 때 성능상 문제가 발생할 수 있다.

<script>
  window.onload = function(){
  const a = document.getElementById( 'sky' );
  a.style.color = "blue"
  }
</script>
<p id = "sky">sky</p>

2. JQuery의 document.ready

DOM트리 (DOM Tree) 의 로드만을 감지한다. window.onload와 다르게 태그의 로드만을 감지하므로 이미지, 영상이 로드되기 전에 자바스크립트 구문이 실행된다.
제이쿼리 cdn을 불러오지 않으면 사용할 수 없다.

<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script>
$( document ).ready(function() {
  // Handler for .ready() called.
   const a = $( '#sky' );
    a.style.color = "blue"
});
</script>
<p id = "sky">sky</p>

3. window.addEventListener의 'DOMContentLoaded'

제이쿼리의 document.ready와 크게 다를 바 없는 성능을 구현할 수 있다.
ie8이하에서는 지원하지 않는다.

window.addEventListener('DOMContentLoaded', function()
{
    // func();
});

출처:
https://itun.tistory.com/510
https://velog.io/@leyuri/javaScript-window.onload%EB%9E%80