document.ready vs window.onload

1. $(document).ready()

   document.addEventListener("DOMContentLoaded", function() {
     // code...
   });

   // alternative to DOMContentLoaded
   document.onreadystatechange = function () {
       if (document.readyState == "interactive") {
           // Initialize your application or run some code. (I)
       }
   }

• 외부 리소스, 이미지와 상관없이 브라우저가 DOM Tree를 생성한 직후 실행

• window.onload() 보다 빠르게 실행되고 중복 사용해도 선언 순서대로 실행됨.

2. window.onload

   $(window).load(function(){
       // code...
   })

   • DOM의 표준 이벤트

   • html의 로딩이 끝난 후에 시작됨

   • 화면에 필요한 요소들이 웹 브라우저 메모리에 올려진 다음에 실행됨.

   • 외부 리소스, 이미지 등이 브라우저에 로딩된 후 작동하게 되므로 그만큼 딜레이가 발생할 수 있음.

   • 중복이 불가능, 중복 시 둘 중 하나만 실행됨.

   • body에서 onload 이벤트를 쓰게되면 window.load()는 실행되지 않음.

이벤트 순서

document.ready() > window.onload() > body onload

$(function(){}); 대신 $(document).ready() 를 권장하는 이유

$(function(){}); 을 쓰나 $(document).ready() 를 쓰나 같은 함수임에는 틀림이 없으나

$(window).load() 함수와 확실하게 구분지어주기 위해 $(document).ready() 를 사용하는 것을 권장한다.

출처 : https://diaryofgreen.tistory.com/96