DOMContentLoaded와 load 이벤트의 차이점

DOMContentLoaded와 load이벤트 의 차이점은 무엇입니까 ?

로부터 모질라 개발자 센터 :

DOMContentLoaded 이벤트는 스타일 시트, 이미지 및 서브 프레임이로드를 완료 할 때까지 기다리지 않고 문서가 완전히로드되고 구문 분석 될 때 시작됩니다 (로드 이벤트는 완전히로드 된 페이지를 감지하는 데 사용될 수 있음).

DOMContentLoaded이벤트는 즉시 DOM 계층이 완전히 구축 된 바와 같이, 발광하는 load모든 이미지와 서브 프레임이 완성 로딩이있을 때 이벤트가 그것을 할 것입니다.

DOMContentLoaded 대부분의 최신 브라우저에서 작동합니다. 하지만 IE9 이상을 포함한 IE 하지 않습니다 . jQuery 라이브러리에서 사용되는 것과 같이 이전 버전의 IE에서는이 이벤트를 모방 하는 몇 가지 해결 방법 이 있으며 IE 관련 onreadystatechange 이벤트를 첨부합니다 .

차이점을 직접 확인하십시오.

데모

에서 마이크로 소프트 IE

현재 페이지의 구문 분석이 완료되면 DOMContentLoaded 이벤트가 발생합니다. 광고 및 이미지를 포함한 모든 리소스에서 모든 파일의로드가 완료되면 load 이벤트가 발생합니다. DOMContentLoaded는 UI 기능을 복잡한 웹 페이지에 연결하는 데 사용할 수있는 훌륭한 이벤트입니다.

에서 모질라 개발자 네트워크

DOMContentLoaded 이벤트는 스타일 시트, 이미지 및 서브 프레임이로드를 완료 할 때까지 기다리지 않고 문서가 완전히로드되고 구문 분석 될 때 시작됩니다 (로드 이벤트는 완전히로드 된 페이지를 감지하는 데 사용될 수 있음).

DOMContentLoaded==window.onDomReady()

Load==window.onLoad()

문서가 "준비"될 때까지 페이지를 안전하게 조작 할 수 없습니다. jQuery는 이러한 준비 상태를 감지합니다. $ (document) .ready () 안에 포함 된 코드는 DOM (Document Object Model) 페이지가 JavaScript 코드를 실행할 준비가 된 후에 만 ​​실행됩니다. $ (window) .load (function () {...}) 안에 포함 된 코드는 DOM뿐만 아니라 전체 페이지 (이미지 또는 iframe)가 준비되면 실행됩니다.

참조 : http://learn.jquery.com/using-jquery-core/document-ready/

• domContentLoaded : DOM이 모두 준비되었고 JavaScript 실행을 차단하는 스타일 시트가없는 시점을 표시합니다. 즉, 이제 (잠재적으로) 렌더 트리를 구성 할 수 있습니다. 많은 JavaScript 프레임 워크는 자체 로직 실행을 시작하기 전에이 이벤트를 기다립니다. 이러한 이유로 브라우저는 EventStart 및 EventEnd 타임 스탬프를 캡처하여이 실행 시간을 추적 할 수 있습니다.

• loadEvent : 모든 페이지로드의 마지막 단계에서 브라우저는 "onload"이벤트를 발생시켜 추가 응용 프로그램 논리를 트리거 할 수 있습니다.

출처

우리에게 맞는 코드가 있습니다. 우리는 MSIE에 치명적이며 누락 된 DomContentLoaded것으로 나타 났으며 추가 리소스가 캐시되지 않으면 (콘솔 로깅을 기준으로 최대 300ms) 지연되고 캐시 될 때 너무 빨리 트리거됩니다. 그래서 우리는 MISE의 대체품에 의지했습니다. 또한 외부 JS 파일 전후에 트리거 doStuff()되는지 여부에 따라 함수 를 트리거하려고 DomContentLoaded합니다.

// detect MSIE 9,10,11, but not Edge
ua=navigator.userAgent.toLowerCase();isIE=/msie/.test(ua);

function doStuff(){
    //
}
if(isIE){
    // play it safe, very few users, exec ur JS when all resources are loaded
    window.onload=function(){doStuff();}
} else {
    // add event listener to trigger your function when DOMContentLoaded
    if(document.readyState==='loading'){
        document.addEventListener('DOMContentLoaded',doStuff);
    } else {
        // DOMContentLoaded already loaded, so better trigger your function
        doStuff();
    }
}