Der Prozess, mit dem Browser HTML laden und rendern (durch Standards definierter und für moderne Browser optimierter Prozess)

Werfen Sie zunächst einen Blick auf den durch den Standard definierten Browser-Rendering-Prozess (online zu finden):

Der Prozess, bei dem der Browser eine Webseite öffnet

1. Der erste Wenn ein Benutzer eine Website besucht, sendet der Browser eine Anfrage an den Server und der Server gibt eine HTML-Datei zurück.

2. Der Browser beginnt mit dem Laden des HTML-Codes und stellt fest, dass ein Link vorhanden ist Tag im Head-Tag, das auf eine externe CSS- oder JS-Datei verweist; 🎜>

3. Der Browser lädt weiterhin den Textteil des HTML-Codes, CSS- und JS-Dateien wurden abgerufen, und Sie können mit dem Rendern der Seite beginnen;

   Der Browser hat im Code ein IMG-Tag gefunden, das auf ein Bild verweist, und hat eine Anfrage an den Server gestellt.

   Zu diesem Zeitpunkt wartet der Browser nicht, bis das Bild heruntergeladen wurde, sondern rendert weiterhin den folgenden Code

4. Der Server gibt die Bilddatei zurück Das Bild nimmt einen bestimmten Bereich ein, die Auswirkungen Das Seitenlayout wird geändert, daher muss der Browser zurückgehen und diesen Teil des Codes neu rendern

5. Der Browser findet ein Skript-Tag enthält eine Zeile Javascript-Code und führt diese schnell aus.

6. Das Javascript-Skript führt diese Anweisung aus, die den Browser anweist, ein bestimmtes p im Code auszublenden (style.display=”none&rdquo ;). Ups, plötzlich fehlt so ein Element und der Browser muss diesen Teil des Codes neu rendern

7. Als HTML schließlich ankommt, bricht der Browser in Tränen aus...

8. Die Reihenfolge, in der Browser HTML laden und rendern

9. Die Reihenfolge, in der der IE-Browser herunterlädt, ist von oben nach unten und die Reihenfolge, in der Es wird ebenfalls von oben gerendert. Anschließend werden das Herunterladen und das Rendern gleichzeitig durchgeführt.

Beim Rendern in einem bestimmten Teil der Seite wurden alle darüber liegenden Teile heruntergeladen

(dies bedeutet nicht, dass alle zugehörigen Elemente heruntergeladen wurden)

1. Wenn Sie auf eine semantisch interpretierbare Tag-eingebettete Datei (JS-Skript, CSS-Stil) stoßen, aktiviert der IE-Downloadvorgang eine separate Verbindung zum Herunterladen.

2. und analysieren Sie es nach dem Herunterladen Stoppen Sie während des Analysevorgangs das Herunterladen aller nach unten gerichteten Elemente der Seite und blockieren Sie das Laden

   .

3. Nachdem das Stylesheet heruntergeladen wurde, wird es zusammen mit allen zuvor heruntergeladenen Stylesheets analysiert. Nach Abschluss der Analyse werden alle vorherigen Elemente (einschließlich derjenigen, die zuvor gerendert wurden) analysiert neu gerendert werden.

4. Bei einer Neudefinition in JS oder CSS überschreibt die später definierte Funktion die zuvor definierte Funktion.

5. JS wird geladen

6. Kann nicht parallel heruntergeladen und analysiert werden (Download blockiert)

Der Webmodus ist synchron, um das Skript sofort zu analysieren und auszuführen, wenn ein Skript-Tag analysiert wird, und das Parsen des Dokuments zu blockieren, bis das Skript von außen zitiert wird Wenn JS in Anführungszeichen gesetzt ist, wartet der Browser auf die Rückgabe der Anforderung

. Dieser Prozess ist ebenfalls synchron und blockiert die Analyse des Dokuments, bis die Ressource angefordert wird. Da der Browser eine stabile DOM-Baumstruktur benötigt und es sehr wahrscheinlich Code in JS gibt, der die DOM-Baumstruktur direkt ändert, z. B. die Verwendung von document.write oder appendChild oder sogar die direkte Verwendung von location.href zum Springen, springt der Browser Um dies zu verhindern, muss der DOM-Baum neu erstellt werden, wenn JS den DOM-Baum ändert, wodurch andere Downloads und Präsentationen blockiert werden. Dieses Muster wird seit vielen Jahren beibehalten und ist speziell in HTML4 und HTML5 spezifiziert. Entwickler können das Skript als „Verzögert“ markieren, damit es die Dokumentanalyse nicht blockiert und ausgeführt wird, nachdem die Dokumentanalyse abgeschlossen ist. Html5 fügt die Option hinzu, ein Skript als asynchron zu markieren, sodass die Parsing-Ausführung des Skripts einen anderen Thread verwendet.

• Es gibt einige Punkte, die erklärt werden müssen: 　1. Wir wissen, dass der Verarbeitungsprozess des Browsers das Parsen von HTML ist um einen DOM-Baum zu generieren->Render-Baum basierend auf DOM-Baum und Stylesheet generieren->Render-Render-Baum-Anzeige. Damit Benutzer die Seite schneller sehen können, generiert der Browser beim Parsen des HTML einen partiellen DOM-Baum, und der Browser generiert einen partiellen Render-Baum und zeigt ihn an.

　2. In diesem Prozess gibt es zwei externe Ressourcen, die die Skriptausführung und damit das Rendern blockieren, nämlich externes JS und externes CSS. Externes js blockiert die Generierung des DOM-Baums, da der Browser einen stabilen DOM-Baum benötigt und js diese Struktur möglicherweise zerstören kann (natürlich kann es auch den Stil ändern [beachten Sie, dass es sich um einen Stil handelt, nicht um einen Stil). sheet], aber dies blockiert nicht und hat keine Auswirkungen); externe CSS-Stylesheets blockieren auch die Ausführung des Skripts Theoretisch, da das Stylesheet den Dom-Baum nicht ändert Es besteht keine Notwendigkeit, das Dokument zu stoppen. Es liegt jedoch ein Problem vor. Das Skript fordert möglicherweise die Stilinformationen während des Analysevorgangs an wird den falschen Wert erhalten. Dies scheint ein Edge-Fall zu sein, ist aber wirklich üblich. Firefox blockiert alle Skripte, während ein Stylesheet geladen und analysiert wird, während Chrome Skripte nur blockiert, wenn sie versuchen, auf bestimmte Stileigenschaften zuzugreifen, die möglicherweise von einem entladenen Stylesheet betroffen sind.

　3. Andere andere externe Ressourcen blockieren das Rendern nicht, wie zum Beispiel Bilder. Wir können sehen, dass oft der allgemeine Rahmen der Seite angezeigt wird . Das heißt, die Position des Bildes wird nicht angezeigt und nach dem Herunterladen des Bildes neu gerendert.

Optimierung für moderne Browser:

Gemäß Standards Browser-Rendering- und Download-Prozess. Der folgende Code lädt externe Ressourcen in derselben Reihenfolge wie die Ressourcen in HTML. Eine externe Ressourcenanforderung http://hm.baidu.com/hm.js?a041a0f4ff93aef6aa83f34134331a1d sollte vor allen Stilen geladen werden

...百度统计代码-->
<script>var _hmt = _hmt || [];
    (function() {var host=document.location.hostname;if(/lcfarm.com$/ig.test(host)){          
    var hm = document.createElement("script");
          hm.src = "//hm.baidu.com/hm.js?a041a0f4ff93aef6aa83f34134331a1d";          
          var s = document.getElementsByTagName("script")[0]; 
          s.parentNode.insertBefore(hm, s);
        }
    })();script>
    <link rel="stylesheet"
     type="text/css" href="//static.lcfarm.com/pc-dist/pkg/index.html_aio_f9db6a6.css?1.1.2">
     <link rel="stylesheet" 
     type="text/css" href="//static.lcfarm.com/pc-dist/common/css/common_530eedd.css?1.1.2">
     <link rel="stylesheet" type="text/css" href="//static.lcfarm.com/pc-dist/css/index_8b620da.css?1.1.2">
     <link rel="stylesheet" 
     type="text/css" href="//static.lcfarm.com/pc-dist/pkg/index.html_aio_2_2379650.css?1.1.2">head>
     <body>...
     <script type="text/javascript" data-loader="" 
     src="//static.lcfarm.com/pc-dist/common/dep/mod_36ad799.js?1.1.2">script>
     <script type="text/javascript" data-loader="" 
     src="//static.lcfarm.com/pc-dist/common/dep/jquery_c07f226.js?1.1.2">script>
     <script type="text/javascript" 
     src="//static.lcfarm.com/pc-dist/common/js/jquery/jquery.cookie_546183c.js?1.1.2">script>
     <script type="text/javascript" src="//static.lcfarm.com/pc-dist/pkg/common_85ea494.js?1.1.2">script>
     <script type="text/javascript" 
     src="//static.lcfarm.com/pc-dist/pkg/index.html_aio_350303c.js?1.1.2">script>body>html></script>

　Aber eigentlich in Chrom. Der folgende Effekt wurde in Firefox, ie8 und anderen Browsern gefunden (getestet mit https://www.webpagetest.org/)

　

Warum? Dies ist Spekulatives Parsen

　Sowohl Webkit als auch Firefox haben diese Optimierung durchgeführt. Wenn das Skript ausgeführt wird, analysiert ein anderer Thread das verbleibende Dokument und lädt Ressourcen die später über das Netzwerk geladen werden müssen. Dieser Ansatz ermöglicht das parallele Laden von Ressourcen, wodurch die Gesamtgeschwindigkeit erhöht wird. Es ist zu beachten, dass das Pre-Parsing den Dom-Baum nicht verändert. Diese Arbeit wird dem Haupt-Parsing-Prozess überlassen, der nur Verweise auf externe Ressourcen wie externe Skripte, Stylesheets und Bilder analysiert.

Wie im Bild oben zu sehen ist, werden beim Ausführen des Skripts viele externe Ressourcenreferenzen analysiert und der Thread gestartet, um sie herunterzuladen. Der Hauptthread wartet immer noch auf die Rückkehr hm.js.

Das Obige ist der Inhalt des Prozesses des Ladens und Renderns von HTML durch den Browser (der Standarddefinitionsprozess und die Optimierung moderner Browser). Weitere verwandte Inhalte finden Sie hier Achten Sie auf die chinesische PHP-Website (www.php.cn)!