Informieren Sie sich, wie HTML und Ressourcen geladen werden

Informieren Sie sich, wie HTML und Ressourcen geladen werden

Der gesamte Inhalt dieses Blogs ist unter Creative Commons-Lizenzen lizenziert. Wenn Sie diesen Inhalt zitieren, geben Sie bitte Zhu Tao als Quelle an und handeln Sie nicht kommerziell .

Einführung

Ich habe mehrere webbasierte Projekte abgeschlossen und gelernt, wie Front-End-JS, CSS, HTML und Back-End-Python/PHP miteinander interagieren und wie der Browser sie ausführt. Eine Frage blieb mir jedoch immer im Kopf:

Ein HTML verfügt über mehrere externe Ressourcen (JS, CSS, Flash, Bild usw.). Wann werden diese Anfragen heruntergeladen und ausgeführt?

Ich weiß nicht, wann das von mir geschriebene JS ausgeführt wird, und ich weiß nicht, warum viele Vorschläge zur Verbesserung der Leistung darin bestehen, JS vor das </body> am Ende des HTML zu setzen.

Wenn Sie sich nicht sicher sind, kommen Sie bitte und lernen Sie mit mir.

Spezifische Analyse

Sehen wir uns zunächst eine Beispiel-HTML-Seite an:

 <html>
  <Kopf>
   <script src= "/static/jquery.js" Typ= "text/javascript" ></script>
   <script src= "/static/abc.js" Typ= "text/javascript" >
   </Skript>
   <link rel= "Stylesheets" Typ= "Text/css" href= "/static/abc.css" ></link>
   <Skript>
    $( Dokument ).bereit( Funktion (){
     $( "#img" ).attr( "src" , "/static/kkk.png" );
   });
   </Skript>
  </Kopf>
  <Text>
  <div>
  <img id= "img" src= "/static/abc.jpg" style= "Breite: 400px; Höhe: 300px;" />
  <script src= "/static/kkk.js" Typ= "text/javascript" ></script>
  </body>
</html>

Es verfügt über die folgenden Ressourcen:

  1. 3 externe JS-Dateien, 1 Inline-JS-Code
  2. 1 externe CSS-Datei, 1 Inline-CSS-Code
  3. 1 Bilddatei und 1 von js angefordertes Bild

Das sind insgesamt 6 HTTP-Anfragen.

Schauen wir uns vor der Analyse das Ergebnis der Firefox-Anforderung für dieses HTML an, wie unten dargestellt:

/do/uploads/allimg/091203/2217550.png

Schauen wir uns das Ergebnis der Anforderung dieses HTML durch Chrome (Linux) an, wie in der folgenden Abbildung dargestellt (die Abbildung ist relativ klein und kann in einem neuen Tab geöffnet werden):

/do/uploads/allimg/091203/2217551.png

Lassen Sie uns dies zunächst analysieren und dann den Unterschied zwischen den Ergebnissen dieser beiden Anfragen erklären.

Analyse anfordern

Zunächst möchte ich darauf hinweisen, dass die folgenden Beschreibungen hauptsächlich auf meinen eigenen Google-Suchen, der Konsultation von Freunden und dem Abrufen dieser Informationen über SO und IRC basieren. Ich habe die relevanten Spezifikationen nicht gelesen (natürlich würde ich sie gerne lesen, wenn Sie relevante Spezifikationen kennen, hinterlassen Sie bitte eine Nachricht, danke) und kann deren Richtigkeit und Genauigkeit nicht garantieren. Sie sind für Ihre eigenen Risiken verantwortlich :D.

Auf Grundlage einschlägiger Untersuchungen gehe ich davon aus, dass der Browser bei einer URI-Anforderung die folgende Anforderungs- und Ausführungsreihenfolge befolgt:

  1. Ein Thread lädt das DOM herunter (also HTML, unabhängig von externen Ressourcen in HTML).
  2. Ein anderer Thread beginnt mit der Analyse des heruntergeladenen DOM und dem Herunterladen externer Ressourcen (wie JS, CSS, Bilder usw.).
  3. Der dritte Thread (sofern vorhanden) lädt externe Ressourcen herunter, mit Ausnahme derer, die von Thread 2 heruntergeladen werden.
  4. Wenn mehr Verbindungen zugelassen werden, laden mehr Threads weitere Ressourcen herunter.

Wie viele Verbindungen (Threads) eine Anfrage gleichzeitig haben kann, hängt vom jeweiligen Browser ab. Der http1.1-Standard legt fest, dass es nicht mehr als 2 Verbindungen zum selben Server/Proxy (also Hostnamen) geben darf, aber in tatsächlichen Browserimplementierungen lauten die Details wie folgt:

 Feuerfuchs 2: 2
Firefox 3: 6
Oper 9.26: 4
Opera 9.5 Beta: 4
Safari 3.0.4 Mac/Windows: 4
IE 7: 2
IE 8: 6

Überlegen Sie sich daher bitte die obige Download-Reihenfolge entsprechend dieser tatsächlichen Situation.

Schauen wir uns dann die Ausführungsreihenfolge an (JS-Ausführung, CSS-Anwendung usw.):

  1. Solange der Browser den JS-Code "sieht", wird er ausgeführt
  2. Der Browser führt die Arbeit von unten nach unten aus, Zeile für Zeile
  3. Wenn sich der JS-Code in einer Funktion oder einem Objekt befindet, wird er nur ausgeführt, wenn die Funktion oder das Objekt aufgerufen wird.
  4. Der sogenannte direkte Code (Code, der sich nicht in einer Funktion oder einem Objekt befindet) wird sequenziell von oben nach unten ausgeführt.
  5. Wenn die CSS-Datei heruntergeladen wird, wird der entsprechende Stil auch auf das DOM angewendet
  6. onload oder jQuerys $(document).ready() wird ausgeführt, nachdem das DOM heruntergeladen wurde.

Wenn in tatsächlichen Browsern ein <script>-Tag auftritt, wird automatisch der Download anderer Threads blockiert, z. B. von Firefox. Aus diesem Grund wird in der Webentwicklung häufig empfohlen, das <script>-Tag vor </body> zu setzen.

Aber nicht alle Browser blockieren, beispielsweise blockiert Chrome keine anderen Verbindungen. Die spezifische Belastung muss sich also immer noch auf die spezifische Browserimplementierung beziehen.

Es wird empfohlen , das Tag <script></script> vor </body> zu setzen, da dies in den meisten Fällen zu einer besseren Leistung führt.

Anfrageanalyse für Firefox und Chrome

Werfen wir noch einmal einen Blick auf die Anforderungs-Antwort-Diagramme in den beiden obigen Abbildungen.

Feuerfuchs

Es verfügt über die folgenden Funktionen:

  1. Laden Sie zuerst die html
  2. Nachdem der HTML-Download abgeschlossen ist, laden Sie externe Dateien (js, css, img) von oben nach unten herunter
  3. js blockiert den Download anderer externer Dateien
  4. Andere Dateien werden parallel heruntergeladen

Chrom

Es verfügt über die folgenden Funktionen:

  1. Laden Sie zuerst die html
  2. Externe Dateien (js, css, img) von oben nach unten herunterladen
  3. Die Download-Reihenfolge der einzelnen Ressourcen ist parallel

Sie fragen sich vielleicht, ob js parallel heruntergeladen werden können, dann wird der Code unterhalb des DOM zuerst ausgeführt. Zunächst einmal ist es sicher, dass selbst wenn das folgende js zuerst heruntergeladen wird, dies die allgemeine Ausführungsreihenfolge von oben nach unten nicht beeinflusst. Der Browser wird diese Reihenfolge beibehalten . Diese Methode von Chrome ist auch ein Trend zukünftiger Browser, und dies ist einer der Gründe, warum Chrome schneller sein kann.

Eine interessante Episode

Nachdem ich diese Frage gestellt hatte, begann ich, viel zu recherchieren. Ich befragte Freunde, stellte SO-Fragen und fragte sogar im Firefox IRC nach.

Die Freunde, die mir antworteten, waren alle sehr geduldig. Die meisten stellten mir jedoch eine Frage : Warum muss man diese Details bei der Webentwicklung kennen ?

Solche Fragen verwirren mich noch immer. Ich war schon immer der Meinung, dass ein guter Programmierer nicht nur wissen muss, wie, sondern auch, was und sogar warum .

„Wissen wie“ bedeutet lediglich, dass Sie ein qualifizierter Programmierer sind, der für die Entwicklung einfach das verwenden kann, was andere bereitstellen.

Wenn Sie wissen, was passiert, beginnen Sie, darauf zu achten, wie die Dinge hinter den Kulissen ablaufen. Mit der Zeit werden Sie nach und nach ein erfahrener Programmierer.

Wenn Sie wissen, warum, sind Sie auf dem Weg, ein Hacker zu werden, und bewegen sich allmählich in Richtung eines technischen Experten. Auf lange Sicht werden Sie viel erreichen. Lesen Sie „So werden Sie ein Hacker“.

Genießen wir die Einzelheiten und das wesentliche Glück, statt nur auf der oberflächlichen Ebene des Glücks zu bleiben.

abschließend

Alle großen Hersteller konkurrieren um den Markt der Browser, egal ob sie unabhängig sind (Firefox, Chrome, IE, Opera, Safari) oder auf bestimmten Kerneln basieren (Aoyou, Sogou, TT, 360 usw.). Sicher ist jedoch, dass die Browser leistungsfähiger werden, Standards einhalten, schneller reagieren usw. und dass unser Leben als Webprogrammierer deutlich angenehmer wird.

Einige Details in diesem Artikel sind noch vage und ich werde möglicherweise später einen weiteren Artikel schreiben, um eine ausführlichere und klarere Erklärung zu liefern.

Willkommen zur Diskussion.

Nachtrag

Diesmal habe ich keine Kosten gescheut. Ich hatte zuvor fast 400 SO-Reputationspunkte gesammelt und schickte sofort 150 Leute los, um die zufriedenstellendste Antwort zu finden.

Nähere Informationen finden Sie unter:

Lade- und Ausführungsreihenfolge einer Webseite?

Im Beitrag finden Sie eine ausführlichere Antwort, die Sie als Referenz verwenden können.

Verweise

  1. Lade- und Ausführungsreihenfolge einer Webseite?
  2. JavaScript DOM-Ladeereignisse, Ausführungsreihenfolge und $(document).ready()
  3. JavaScript-Ausführungsreihenfolge
  4. Neuling – wann wird das CSS angewendet?
PDF-Version des Pakets zum Download

<<:  Detaillierte Erklärung der JS-Array-Methoden

>>:  Über den Startfehler, der durch Inkompatibilität zwischen VMware-Workstations und Gerät/Anmeldeinformationen verursacht wird

Artikel empfehlen

So laden Sie Excel-Stream-Dateien herunter und legen den Download-Dateinamen in Vue fest

Inhaltsverzeichnis Überblick 1. Download über URL...

Implementierungsanweisungen zur Duplikatsprüfung und Deduplizierung von MySQL-Daten

Es gibt einen Tabellenbenutzer und die Felder sin...

Detaillierte Erläuterung der Installations- und Bereitstellungspraktiken von Zabbix

Vorwort Zabbix ist eine der gängigsten Open-Sourc...

Docker-Kern und spezifische Verwendung der Installation

1. Was ist Docker? (1) Docker ist ein Open-Source...

Lösung für leere Seite nach Vue-Verpackung

1. Lösung für das Problem, dass die Seite leer is...

MySQL 5.7.18 Installations- und Konfigurations-Tutorial unter Windows

In diesem Artikel finden Sie das Installations- u...

Ubuntu 18.04 fordert bei der Installation von MySQL nicht zur Eingabe eines Kennworts auf und wie man das Problem löst

Die Installation von MySQL 5.7 auf Ubuntu 1804 wi...

Docker installiert und führt den RabbitMQ-Beispielcode aus

Ziehen Sie das Bild: [mall@VM_0_7_centos ~]$ sudo...

Reiner CSS-Header, korrigierter Implementierungscode

Es gibt zwei Hauptgründe, warum es schwierig ist,...

So verwenden Sie async await elegant in JS

Inhaltsverzeichnis $.ajax von jQuery Der Beginn d...

Detaillierte Erläuterung des MySQL-Ausführungsprinzips, der logischen Schichtung und der Änderung der Datenbankverarbeitungs-Engine

Da ich MySQL schon so lange verwende, glaube ich,...

Docker verwendet Git, um den detaillierten Prozess der Jenkins-Release- und Testprojekte zu implementieren

Inhaltsverzeichnis 1. Docker installieren 2. Erst...

Eine kurze Diskussion zum Thema Ziehen und Sortieren von Elementen in Tabellen

In letzter Zeit stoße ich bei der Verwendung von ...

Detaillierte Erklärung zum Anzeigen der MySQL-Speichernutzung

Vorwort Dieser Artikel stellt hauptsächlich die r...

So implementieren Sie eine einzelne Dateikomponente in JS

Inhaltsverzeichnis Überblick Einzelne Dateikompon...