it-swarm.com.de

Lade- und Ausführungsreihenfolge einer Webseite?

Ich habe einige webbasierte Projekte gemacht, denke aber nicht viel über die Last und die Ausführungsreihenfolge einer normalen Webseite nach. Aber jetzt muss ich das Detail kennen. Es ist schwer, Antworten von Google oder SO zu finden, daher habe ich diese Frage erstellt.

Eine Beispielseite sieht so aus:

<html>
 <head>
  <script src="jquery.js" type="text/javascript"></script>
  <script src="abc.js" type="text/javascript">
  </script>
  <link rel="stylesheets" type="text/css" href="abc.css"></link>
  <style>h2{font-wight:bold;}</style>
  <script>
  $(document).ready(function(){
     $("#img").attr("src", "kkk.png");
  });
 </script>
 </head>
 <body>
    <img id="img" src="abc.jpg" style="width:400px;height:300px;"/>
    <script src="kkk.js" type="text/javascript"></script>
 </body>
</html>

Hier sind meine Fragen:

  1. Wie lädt sich diese Seite?
  2. Wie ist die Reihenfolge des Ladens?
  3. Wann wird der JS-Code ausgeführt? (Inline und extern)
  4. Wann wird das CSS ausgeführt (angewendet)?
  5. Wann wird $ (document) .ready ausgeführt?
  6. Wird abc.jpg heruntergeladen? Oder lädt es einfach kkk.png herunter?

Ich habe folgendes Verständnis:

  1. Der Browser lädt zuerst das HTML (DOM).
  2. Der Browser beginnt, die externen Ressourcen Zeile für Zeile von oben nach unten zu laden.
  3. Wenn ein <script> erfüllt ist, wird das Laden blockiert. Warten Sie, bis die JS-Datei geladen und ausgeführt wurde. Fahren Sie dann fort.
  4. Andere Ressourcen (CSS/Bilder) werden parallel geladen und bei Bedarf ausgeführt (wie CSS).

Oder ist es so:

Der Browser analysiert das HTML (DOM) und ruft die externen Ressourcen in einem Array oder einer stapelartigen Struktur ab. Nach dem Laden der HTML-Datei beginnt der Browser, die externen Ressourcen parallel in die Struktur zu laden und auszuführen, bis alle Ressourcen geladen sind. Dann wird das DOM entsprechend dem Verhalten des Benutzers in Abhängigkeit von der JS geändert.

Kann jemand eine detaillierte Erklärung dazu geben, was passiert, wenn Sie die Antwort einer HTML-Seite erhalten? Ist dies in verschiedenen Browsern unterschiedlich? Irgendeine Referenz zu dieser Frage?

Vielen Dank.

BEARBEITEN:

Ich habe ein Experiment in Firefox mit Firebug gemacht. Und es zeigt folgendes Bild: alt text

231
Zhu Tao

Nach ihrer probe,

<html>
 <head>
  <script src="jquery.js" type="text/javascript"></script>
  <script src="abc.js" type="text/javascript">
  </script>
  <link rel="stylesheets" type="text/css" href="abc.css"></link>
  <style>h2{font-wight:bold;}</style>
  <script>
  $(document).ready(function(){
     $("#img").attr("src", "kkk.png");
  });
 </script>
 </head>
 <body>
    <img id="img" src="abc.jpg" style="width:400px;height:300px;"/>
    <script src="kkk.js" type="text/javascript"></script>
 </body>
</html>

in etwa ist der Ausführungsablauf ungefähr wie folgt:

  1. Das HTML-Dokument wird heruntergeladen
  2. Die Analyse des HTML-Dokuments beginnt
  3. HTML-Analyse erreicht <script src="jquery.js" ...
  4. jquery.js wird heruntergeladen und analysiert
  5. HTML-Analyse erreicht <script src="abc.js" ...
  6. abc.js wird heruntergeladen, analysiert und ausgeführt
  7. HTML-Analyse erreicht <link href="abc.css" ...
  8. abc.css wird heruntergeladen und analysiert
  9. HTML-Analyse erreicht <style>...</style>
  10. Interne CSS-Regeln werden analysiert und definiert
  11. HTML-Analyse erreicht <script>...</script>
  12. Internes Javascript wird analysiert und ausgeführt
  13. HTML-Analyse erreicht <img src="abc.jpg" ...
  14. abc.jpg wird heruntergeladen und angezeigt
  15. HTML-Analyse erreicht <script src="kkk.js" ...
  16. kkk.js wird heruntergeladen, analysiert und ausgeführt
  17. Die Analyse des HTML-Dokuments endet

Beachten Sie, dass der Download aufgrund des Verhaltens des Browsers möglicherweise asynchron ist und nicht blockiert. In Firefox gibt es beispielsweise diese Einstellung, die die Anzahl gleichzeitiger Anforderungen pro Domäne begrenzt.

Abhängig davon, ob die Komponente bereits zwischengespeichert wurde oder nicht, wird die Komponente möglicherweise nicht erneut in einer nahen Zukunft angefordert. Wenn die Komponente zwischengespeichert wurde, wird die Komponente anstelle der tatsächlichen URL aus dem Cache geladen.

Wenn die Analyse beendet und das Dokument fertig und geladen ist, werden die Ereignisse onload ausgelöst. Wenn also onload ausgelöst wird, wird $("#img").attr("src","kkk.png"); ausgeführt. So:

  1. Dokument ist bereit, Onload wird ausgelöst.
  2. Javascript-Ausführungstreffer $("#img").attr("src", "kkk.png");
  3. kkk.png wird heruntergeladen und in #img geladen.

Das $(document).ready()-Ereignis ist das Ereignis, das ausgelöst wird, wenn alle Seitenkomponenten geladen und bereit sind. Lesen Sie mehr darüber: http://docs.jquery.com/Tutorials:Einführungsmaterial (Dokument) .ready ()

Bearbeiten - In diesem Abschnitt wird näher auf den Parallel- oder Nicht-Part eingegangen:

Standardmäßig und nach meinem derzeitigen Verständnis führt der Browser jede Seite auf drei Arten aus: HTML-Parser, Javascript/DOM und CSS. 

Der HTML-Parser ist für die Analyse und Interpretation der Markup-Sprache verantwortlich und muss daher die beiden anderen Komponenten aufrufen können. 

Zum Beispiel, wenn der Parser auf diese Zeile stößt:

<a href="#" onclick="alert('test');return false;" style="font-weight:bold">a hypertext link</a>

Der Parser führt drei Aufrufe aus, zwei für Javascript und einen für CSS. Zunächst erstellt der Parser dieses Element und registriert es im DOM-Namespace zusammen mit allen Attributen, die sich auf dieses Element beziehen. Zweitens ruft der Parser auf, um das Ereignis onclick an dieses bestimmte Element zu binden. Zuletzt wird der CSS-Thread erneut aufgerufen, um den CSS-Stil auf dieses bestimmte Element anzuwenden.

Die Ausführung ist von oben nach unten und Singlethread. Javascript sieht möglicherweise multithreaded aus, aber Tatsache ist, dass Javascript Single-Threading ist. Daher wird beim Laden einer externen Javascript-Datei die Analyse der HTML-Hauptseite unterbrochen. 

Die CSS-Dateien können jedoch gleichzeitig heruntergeladen werden, da immer CSS-Regeln angewendet werden. Dies bedeutet, dass Elemente immer mit den neuesten definierten CSS-Regeln aktualisiert werden und somit die Blockierung aufheben.

Ein Element ist nur im DOM verfügbar, nachdem es analysiert wurde. Wenn Sie mit einem bestimmten Element arbeiten, wird das Skript daher immer nach oder innerhalb des Onload-Ereignisses des Fensters platziert.

Ein Skript wie dieses führt zu Fehlern (bei jQuery):

<script type="text/javascript">/* <![CDATA[ */
  alert($("#mydiv").html());
/* ]]> */</script>
<div id="mydiv">Hello World</div>

Wenn das Skript analysiert wird, ist das #mydiv-Element immer noch nicht definiert. Stattdessen würde dies funktionieren:

<div id="mydiv">Hello World</div>
<script type="text/javascript">/* <![CDATA[ */
  alert($("#mydiv").html());
/* ]]> */</script>

OR

<script type="text/javascript">/* <![CDATA[ */
  $(window).ready(function(){
                    alert($("#mydiv").html());
                  });
/* ]]> */</script>
<div id="mydiv">Hello World</div>
263
mauris

1) HTML wird heruntergeladen.

2) HTML wird schrittweise analysiert. Wenn eine Anforderung für ein Asset erreicht wird, versucht der Browser, das Asset herunterzuladen. Eine Standardkonfiguration für die meisten HTTP-Server und die meisten Browser besteht darin, nur zwei Anforderungen parallel zu verarbeiten. IE kann rekonfiguriert werden, um eine unbegrenzte Anzahl von Assets parallel herunterzuladen. Steve Souders konnte über 100 parallele Anfragen über den IE herunterladen. Die Ausnahme ist, dass Skriptanforderungen parallele Asset-Anforderungen im IE blockieren. Aus diesem Grund wird dringend empfohlen, alle JavaScript-Dateien in externen JavaScript-Dateien zu speichern und die Anforderung unmittelbar vor dem schließenden body-Tag im HTML-Code abzulegen.

3) Sobald der HTML-Code analysiert wurde, wird das DOM gerendert. CSS wird in fast allen Benutzeragenten parallel zum Rendern des DOMs gerendert. Aus diesem Grund wird dringend empfohlen, den gesamten CSS-Code in externe CSS-Dateien einzufügen, die im Abschnitt <head> </ head> des Dokuments so hoch wie möglich angefordert werden. Andernfalls wird die Seite bis zum Auftreten der CSS-Anforderungsposition im DOM gerendert, und das Rendern beginnt dann von oben.

4) Erst nachdem das DOM vollständig gerendert wurde und Anforderungen für alle Assets auf der Seite entweder aufgelöst wurden oder das Zeitlimit überschritten wurde, wird JavaScript vom Onload-Ereignis ausgeführt. IE7, und ich bin mir nicht sicher, was IE8 angeht, führt zu einem schnellen Timeout von Ressourcen, wenn keine HTTP-Antwort von der Asset-Anforderung empfangen wird. Dies bedeutet, dass ein von JavaScript inline auf der Seite angefordertes Asset, dh JavaScript in HTML-Tags geschrieben wird, das nicht in einer Funktion enthalten ist, die Ausführung des Onload-Ereignisses stundenlang verhindern kann. Dieses Problem kann ausgelöst werden, wenn ein solcher Inline-Code auf der Seite vorhanden ist und aufgrund einer Namensraumkollision, die einen Code-Absturz verursacht, nicht ausgeführt werden kann.

Der CPU-intensivste unter diesen Schritten ist das Parsen des DOM/CSS. Wenn Sie möchten, dass Ihre Seite schneller verarbeitet wird, schreiben Sie effizientes CSS, indem Sie überflüssige Anweisungen entfernen und CSS-Anweisungen in möglichst wenigen Elementreferenzen konsolidieren. Wenn Sie die Anzahl der Knoten in Ihrer DOM-Baumstruktur reduzieren, wird auch das Rendern beschleunigt.

Beachten Sie, dass jedes Asset, das Sie aus Ihrem HTML-Code oder sogar aus Ihren CSS/JavaScript-Assets anfordern, mit einem separaten HTTP-Header angefordert wird. Dies verbraucht Bandbreite und erfordert die Verarbeitung pro Anforderung. Wenn Sie Ihre Seite so schnell wie möglich laden möchten, reduzieren Sie die Anzahl der HTTP-Anforderungen und die Größe Ihres HTML-Codes. Sie tun Ihrer Benutzerfahrung keinen Gefallen, indem Sie das Seitengewicht von 180k allein aus HTML berechnen. Viele Entwickler unterschreiben einen Irrtum, der darin besteht, dass sich ein Benutzer innerhalb von 6 Nanosekunden über die Qualität des Inhalts auf der Seite entscheidet und anschließend die DNS-Abfrage von seinem Server löscht und seinen Computer verbrennt, falls dies nicht der Fall ist 250 KB HTML. Halten Sie Ihr HTML kurz und knapp, damit ein Benutzer Ihre Seiten schneller laden kann. Nichts verbessert das Benutzererlebnis wie eine schnelle und ansprechende Webseite.

33
austin cheney

Öffne deine Seite in Firefox und erhalte das HTTPFox-Addon. Es wird Ihnen alles erzählen, was Sie brauchen.

Fand das auf archivist.incuito:

http://archivist.incutio.com/viewlist/css-discuss/76444

Wenn Sie zum ersten Mal eine Seite anfordern, wird Ihr Browser sendet eine GET-Anfrage an die Server, der den HTML-Code an .__ zurückgibt. Browser. Der Browser startet dann Parsen der Seite (möglicherweise bevor alle von ihnen zurückgegeben wurden).

Wenn es einen Verweis auf eine .__ findet. externe Entität wie eine CSS-Datei, eine Bilddatei, Skriptdatei, Flash Datei oder etwas anderes außerhalb von die Seite (entweder auf demselben Server/derselben Domäne oder nicht), bereitet sie auf .__ vor. machen Sie eine weitere GET-Anfrage dafür Ressource.

Der HTTP-Standard gibt jedoch .__ an. dass der Browser nicht mehr machen soll als zwei gleichzeitige Anforderungen an die gleiche Domain. So stellt es jede Anfrage zu einer bestimmten Domäne in einer Warteschlange und Wenn jede Entität zurückgegeben wird, startet sie der nächste in der Warteschlange für diesen Domain.

Die Zeit, die eine Entität benötigt, um zurückgegeben wird abhängig von der Größe der Den Server laden ist derzeit Erleben und die Tätigkeit von jede einzelne Maschine zwischen dem Maschine, auf der der Browser ausgeführt wird, und Server. Die Liste dieser Maschinen kann grundsätzlich unterschiedlich sein für jede Anfrage, soweit eine Bild könnte aus den USA zu mir reisen in Großbritannien über dem Atlantik, während ein anderer vom selben Server kommt raus über den Pazifik, Asien und Europa, was länger dauert. So erhalten Sie möglicherweise eine Sequenz wie folgt, wobei a Seite hat (in dieser Reihenfolge) Referenzen auf drei Skriptdateien und fünf Bilder Dateien in verschiedenen Größen:

  1. GET script1 und script2; Warteschlangenanforderung für script3 und images1-5.
  2. script2 kommt an (es ist kleiner als script1): GET script3, Warteschlange images1-5.
  3. script1 kommt an; GET image1, Warteschlange images2-5.
  4. image1 kommt an, GET image2, Warteschlange images3-5.
  5. script3 kommt wegen eines Netzwerkproblems nicht an - GET script3 erneut (automatischer Neuversuch).
  6. image2 kommt an, script3 noch immer nicht hier; GET image3, Warteschlange images4-5.
  7. bild 3 kommt an; GET image4, queue image5, script3 ist noch unterwegs.
  8. image4 kommt an, GET image5;
  9. image5 kommt an.
  10. script3 kommt an.

Kurz: jede alte Bestellung, abhängig von was der Server macht, was der der Rest des Internets tut und ob etwas fehlerhaft ist oder nicht und muss erneut abgerufen werden. Das vielleicht scheinen eine seltsame Art und Weise zu sein. Dinge, aber es würde ganz wörtlich für das Internet (nicht nur das WWW) ist es unmöglich, mit einem beliebigen Grad zu arbeiten der Zuverlässigkeit, wenn dies nicht getan wurde Weg.

Die interne Warteschlange des Browsers holt Entitäten möglicherweise nicht in der Reihenfolge Sie erscheinen auf der Seite - es ist nicht von jedem Standard gefordert.

(Oh, und vergessen Sie nicht die Zwischenspeicherung, sowohl im Des Browsers als auch beim Zwischenspeichern von Proxies , Die von ISPs verwendet werden, um die Belastung des -Netzwerks zu verringern.)

12
tahdhaze09

Wenn Sie dies fragen, weil Sie Ihre Website beschleunigen möchten, besuchen Sie die Yahoo-Seite unter Best Practices für die Beschleunigung Ihrer Website . Es gibt viele bewährte Methoden, um Ihre Website zu beschleunigen.

6
a paid nerd

Dynatrace AJAX Edition zeigt Ihnen die genaue Reihenfolge beim Laden, Analysieren und Ausführen von Seiten.

1
Chetan Sastry

AFAIK, der Browser (zumindest Firefox), fordert jede Ressource an, sobald sie analysiert wird. Wenn es auf ein img-Tag stößt, fordert es dieses Bild an, sobald das img-Tag analysiert wurde. Und das kann sogar sein, bevor es die Gesamtheit des HTML-Dokuments erhalten hat. Das heißt, es könnte immer noch das HTML-Dokument heruntergeladen werden, wenn dies geschieht.

Für Firefox gibt es Browser-Warteschlangen, die davon abhängig sind, wie sie in about: config festgelegt sind. Es wird beispielsweise nicht versucht, mehr als 8 Dateien gleichzeitig vom selben Server herunterzuladen. Die zusätzlichen Anforderungen werden in die Warteschlange gestellt. Ich denke, es gibt Begrenzungen pro Domäne, Proxylimits und anderes, was auf der Mozilla-Website dokumentiert ist und in about: config festgelegt werden kann. Ich habe irgendwo gelesen, dass IE keine solchen Grenzen hat.

Das Ereignis jQuery ready wird ausgelöst, sobald das Haupt-HTML-Dokument heruntergeladen und das DOM analysiert wurde. Das Ladeereignis wird dann ausgelöst, wenn alle verknüpften Ressourcen (CSS, Bilder usw.) heruntergeladen und ebenfalls analysiert wurden. Es wird in der jQuery-Dokumentation deutlich gemacht.

Wenn Sie die Reihenfolge, in der alles geladen wird, steuern möchten, glaube ich, dass der zuverlässigste Weg dies ist, durch JavaScript.

1
Rolf

Die gewählte Antwort scheint für moderne Browser nicht zu gelten, zumindest für Firefox 52. Was ich festgestellt habe, ist, dass die Anforderungen zum Laden von Ressourcen wie css, javascript ausgegeben werden, bevor der HTML-Parser das Element erreicht, z. B.

<html>
  <head>
    <!-- prints the date before parsing and blocks HTMP parsering -->
    <script>
      console.log("start: " + (new Date()).toISOString());
      for(var i=0; i<1000000000; i++) {};
    </script>

    <script src="jquery.js" type="text/javascript"></script>
    <script src="abc.js" type="text/javascript"></script>
    <link rel="stylesheets" type="text/css" href="abc.css"></link>
    <style>h2{font-wight:bold;}</style>
    <script>
      $(document).ready(function(){
      $("#img").attr("src", "kkk.png");
     });
   </script>
 </head>
 <body>
   <img id="img" src="abc.jpg" style="width:400px;height:300px;"/>
   <script src="kkk.js" type="text/javascript"></script>
   </body>
</html>

Was ich fand, dass die Startzeit von Anfragen zum Laden von CSS- und Javascript-Ressourcen nicht blockiert wurde. Es sieht so aus, als hätte Firefox einen HTML-Scan und identifiziert die Schlüsselressourcen (img-Ressource ist nicht enthalten), bevor mit dem Parsen des HTML-Codes begonnen wird.

0
Xiaoming