페이지가 로드될 때 트리거되는 이벤트 및 시퀀스

머리말

페이지가 로드되면 대략 다음 단계로 나눌 수 있습니다.

1. HTML 문서 구조 구문 분석 시작

2. 외부 스타일 시트 및 JavaScript 스크립트 로드

3. JavaScript 스크립트 구문 분석 및 실행

4. DOM 트리 렌더링 완료

5. 완료되지 않은 외부 리소스(예: 그림) 로드

6. 페이지가 성공적으로 로드되었습니다.

그렇다면 이 전체 프로세스 중에 일반적으로 사용되는 이벤트가 트리거됩니까?

document readystatechange 이벤트

　

readyState 속성은 문서의 로딩 상태를 설명합니다. 전체 로딩 프로세스 동안 document.readyState는 계속 변경되며 각 변경 사항은 Readystatechange 이벤트를 트리거합니다.

　

readyState 의 상태는

　 로드 중 / 로드 중 문서가 아직 로드 중입니다.

document 仍在加载。

　　　　interactive / 互动文档已经完成加载，文档已被解析，但是诸如图像，样式表和框架之类的子资源仍在加载。

　　　　complete / 完成T文档和所有子资源已完成加载。状态表示 load　 Interactive / 대화형 문서 로드가 완료되고 문서 구문 분석이 완료되었지만 이미지, 스타일시트, 프레임과 같은 하위 리소스는 여전히 로드 중입니다.

　　완전/완전 T 문서 및 모든 하위 리소스가 로드되었습니다. 상태는 load 이벤트가 곧 트리거될 것임을 나타냅니다.

　예를 들어 2단계에서 Interactive에 해당하고 5단계 이후에 완료되면 ReadyStateChange 이벤트가 트리거됩니다.

　 PS: 문서, 이미지 등을 로드할 때의 ReadyState와 XMLHttpRequest.readyState는 다릅니다.

document DOMContentLoaded 이벤트

　를 구별하는 데 주의하세요. DOMContentLoaded 이벤트는 DOM 트리 렌더링이 완료되면 트리거됩니다. 이때 외부 리소스는 여전히 로드 중일 수 있습니다. jquery의 Ready 이벤트도 같은 효과를 가집니다

window load event

　모든 리소스가 로드되면 창의 로드 이벤트가 트리거됩니다.

　문서 로드 이벤트가 발생하지 않는데 MDN에 이런 이벤트가 있나요? 하나님께 인도를 구하십시오! ! !

Instance

  <h1>测试页面加载时，事件触发次序</h1>
  <img src="http://c.hiphotos.baidu.com/image/pic/item/09fa513d269759eea79bc50abbfb43166c22df2c.jpg" alt="">
  <h1>测试页面加载时，事件触发次序</h1>
  <img src="http://h.hiphotos.baidu.com/image/pic/item/279759ee3d6d55fb75ed26e764224f4a21a4ddcc.jpg" alt="">
  <h1>测试页面加载时，事件触发次序</h1>
  <script type="text/javascript">
    console.log(&#39;resolve body JavaScript&#39;);
   
    window.addEventListener(&#39;load&#39;,function(){
      console.log(&#39;window load&#39;);
    })

    document.addEventListener(&#39;readystatechange&#39;,function(){
      console.log(&#39;document &#39; + document.readyState);
    })

    document.addEventListener(&#39;DOMContentLoaded&#39;,function(){
      console.log(&#39;document DOMContentLoaded&#39;);
    })    //document 没有load事件??    document.addEventListener(&#39;load&#39;,function(){
      console.log(&#39;document load&#39;);
    })  </script>

크롬의 로그 출력은 다음과 같습니다:

해결 본문 JavaScript --> 문서 대화형 --> 문서 완료 --> 일관된 기대는 없습니다. 따라서 실행되기 전에 문서 구조만 로드해야 하는 스크립트는 DOMContentLoaded를 모니터링할 수 있습니다. 실행하기 전에 모든 콘텐츠를 로드해야 하는 스크립트는 window.onload 또는 document.readyState === 'complete'를 모니터링해야 합니다. ​

위 내용은 페이지가 로드될 때 트리거되는 이벤트 및 시퀀스의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!