DOM이 로드되는 시기를 결정하는 JavaScript 기술_javascript 기술

HTML DOM 문서 작업의 한 가지 어려움은 DOM이 완전히 로드되기 전에 JavaScript가 실행될 수 있다는 것입니다. 이는 코드에 많은 잠재적인 문제를 일으킬 수 있습니다. 브라우저의 렌더링 및 작업 순서는 대략 다음과 같습니다.

HTML 구문 분석 완료
외부 스크립트 및 스타일 시트 로드
문서 내에서 스크립트 구문 분석 및 실행
HTML DOM이 완전히 구성되었습니다.
이미지 및 외부 콘텐츠 로드
웹 페이지 로드 완료

웹 페이지 헤드에 있는 스크립트와 외부 파일에서 로드된 스크립트는 HTML이 실제로 구성되기 전에 실행됩니다. 앞서 언급했듯이 이 두 곳에서 실행되는 스크립트는 아직 존재하지 않는 DOM에 접근할 수 없기 때문에 이는 중요한 문제입니다. 다행히도 몇 가지 해결책이 있습니다.
현재 가장 일반적으로 사용되는 수준은 DOM 작업을 수행하기 전에 전체 페이지가 로드될 때까지 완전히 기다리는 것입니다. 이 기술은 페이지가 로드된 후 트리거될 수 있는 함수를 바인딩하기 위해 창 개체의 로드 이벤트만 사용하면 됩니다.

코드 복사 코드는 다음과 같습니다.

addEvent(window, "load", function (){
// 뭔가를 하세요
})

가장 간단한 작업이 가장 느립니다. 로딩 프로세스의 순차적 목록에서 페이지 로딩 여부가 마지막 단계에 의해 완전히 제어된다는 것을 알 수 있습니다. 즉, 페이지에 사진, 동영상 등이 많으면 JavaScript가 실행되기 전에 사용자가 잠시 로그인해야 할 수도 있습니다.
또 다른 진행을 사용하여 DOM 로딩 상태를 수신할 수 있습니다. 이는 구현 측면에서 아마도 가장 복잡하지만 가장 효율적이기도 합니다.
브라우저 로딩을 차단하지 않고 HTML DOM 문서가 실행에 필요한 속성으로 로딩되었는지를 최대한 빠르게 확인하는 기술입니다. 다음은 HTML DOM이 사용 가능한지 확인하기 위한 몇 가지 핵심 사항입니다.

문서: DOM 문서가 로드되었는지 알아야 합니다. 충분히 빠르게 확인하면 운이 좋으면 정의되지 않음이 표시될 것입니다.
document.getElementsByTagName 및 document.getElementById: document.getElementsByTagName 및 document.getElementById 함수를 자주 사용하여 문서를 확인합니다. 이러한 함수가 있으면 DOM이 로드되었음을 나타냅니다.
document.body: 추가 보너스로 요소가 완전히 로드되었는지 확인합니다. 이론적으로 이전 점검은 이미 판단을 내릴 수 있어야 하지만 어떤 경우에는 아직 충분하지 않다는 것을 발견했습니다.
이러한 검사를 사용하면 DOM을 사용할 수 있는지 여부를 판단하기에 충분합니다(여기서 "충분하다"는 것은 특정 밀리초의 시간 차이가 있을 수 있음을 의미합니다). 이 방법에는 결함이 거의 없습니다. 앞서 언급한 검사만 사용하면 스크립트가 최신 브라우저에서 상대적으로 잘 실행됩니다. 그러나 최근(2008년?) Firefox에서는 스크립트가 DOM 사용 가능 여부를 확인하기 전에 창 로드 이벤트가 실제로 실행될 수 있도록 캐싱 개선 사항을 구현했습니다. 이를 활용하기 위해 더 빠른 실행 속도를 달성하기 위해 창 로딩 이벤트에 검사도 첨부했습니다.

마지막으로 domReady 함수는 DOM을 사용할 수 있을 때 실행해야 하는 모든 함수에 대한 참조를 수집합니다. DOM이 사용 가능한 것으로 간주되면 이러한 참조가 순서대로 하나씩 호출되고 실행됩니다.

코드 복사 코드는 다음과 같습니다.

// DOM 여부를 모니터링하는 함수 is available
function domReady(f) {
// DOM이 로드되면 Mashan은
if(domReady.done) return f(); 함수를 실행합니다. 함수를 추가했습니다
if(domReady.timer) {
// 실행할 함수 목록에 있다고 가정합니다
domReady.ready.push(f)
} else {
// 로딩 후 페이지 바인딩 먼저 완료되는 경우를 위한 이벤트입니다.
addEvent(window, "load", isDOMReady);
// 실행 함수 배열 초기화
domReady.ready = [f]
// DOM을 최대한 빨리 사용할 수 있는지 확인 가능
domReady.timer = setInterval(isDOMReady, 13);
}
}

// DOM이 작동하는지 확인
function isDOMReady() {
// DOM이 가능하다고 판단되면
if(domReady.done) return false

// 여러 함수와 요소가 가능한지 확인하세요
if(document && document. getElementsByTagName && document.getElementById && document.body) {
// 사용 가능한 경우 확인을 중지합니다
clearInterval(domReady.timer)
domReady.timer = null

// 실행 모든 대기 함수
for(var i = 0; i domReady.ready[i]()
// 여기서 완료했음을 기록하세요
domReady.ready = null;
domReady.done = true;
}
}
}


이제 HTML 문서에서 어떻게 수행되는지 살펴보겠습니다. domReady 함수가 domready.js라는 외부 파일에 작성되었다고 가정합니다.

코드 복사 코드는 다음과 같습니다. 🎜>

DOM 로딩 테스트


domReady(function(){
alert("DOM이 로드되었습니다!");
// 뭔가를 하세요
});

DOM 로딩 테스트