Ereignisse und Sequenzen, die beim Laden der Seite ausgelöst werden

Vorwort

Wenn die Seite geladen ist, kann sie grob in die folgenden Schritte unterteilt werden:

1. Mit dem Parsen der HTML-Dokumentstruktur beginnen

2. Laden externer Stylesheets und JavaScript-Skripte

3. Parsen und Ausführen von JavaScript-Skripten

4. DOM-Baum-Rendering abgeschlossen

5. Laden unfertiger externer Ressourcen (z. B. Bilder)

6. Seite erfolgreich geladen

Was wurde also ausgelöst? den gesamten ProzessWas ist mit häufig verwendeten Ereignissen?

document readystatechange event

　readyState Attribut beschreibt den Ladestatus des Dokuments.readyState ändert sich während des gesamten Ladevorgangs weiter und jede Änderung löst das aus readystatechange-Ereignis.

　readyState hat folgenden Status:

　 Loading / Loading document wird noch geladen.

　 interaktiv / Das interaktive Dokument wurde vollständig geladen und das Dokument wurde analysiert, aber Unterressourcen wie Bilder, Stylesheets und Frames werden noch geladen.

Vollständiges / Komplettes T-Dokument und alle Unterressourcen wurden geladen. Der Status zeigt an, dass das load-Ereignis bald ausgelöst wird.

Wenn es beispielsweise in Schritt 2 interaktiv entspricht und nach Schritt 5 abgeschlossen ist, wird das Ereignis „readystatechange“ ausgelöst.

PS: readyState und XMLHttpRequest.readyState beim Laden von Dokumenten, Bildern usw. sind unterschiedlich. Achten Sie auf die Unterscheidung zwischen

Dokument-DOMContentLoaded-Ereignis

Das DOMContentLoaded-Ereignis wird ausgelöst, wenn das Rendern des DOM-Baums abgeschlossen ist. Zu diesem Zeitpunkt werden möglicherweise noch externe Ressourcen geladen. Das Ready-Ereignis in JQuery hat den gleichen Effekt

Fensterladeereignis

Wenn alle Ressourcen geladen sind, wird das Ladeereignis des Fensters ausgelöst.

Das Dokumentladeereignis kann nicht ausgelöst werden, aber gibt es dieses Ereignis auf MDN? Bitten Sie Gott um Führung! ! !

Instanz

  <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>

Die Protokollausgabe in Chrome lautet wie folgt:

Textkörper auflösen, Dokument interaktiv --> - > Dokument DOMContentLoaded --> Fenster geladen

Genau wie erwartet. Daher können Skripte, bei denen nur die Dokumentstruktur geladen werden muss, bevor sie ausgeführt werden können, DOMContentLoaded überwachen; Skripte, bei denen der gesamte Inhalt geladen werden muss, bevor sie ausgeführt werden können, sollten window.onload oder document.readyState === 'complete' überwachen. ​

Das obige ist der detaillierte Inhalt vonEreignisse und Sequenzen, die beim Laden der Seite ausgelöst werden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!