Verstehen Sie den Rendering-Prozess von HTML-Seiten als Vorbereitung für das Erlernen der Front-End-Leistungsoptimierung (Fortsetzung)_HTML/Xhtml_Webseitenproduktion

Gestern Abend habe ich einen Aufsatz über den Rendering-Prozess des Browsers geschrieben, der jedoch nur durch einen kleinen Codeabschnitt erklärt wurde. Er war nicht überzeugend genug und es gab viele Unvollkommenheiten Ich habe es im Browser getestet und die Testergebnisse mit allen geteilt. Der Testprozess kann etwas chaotisch sein, ich hoffe, dass jeder es versteht.

Testbrowser: Chrome v24.0.1312.52 m, Firefox v18.0, Opera v12.12.

Wenn im WebKit-Kernel eine Webseite angezeigt wird, gibt es einen Parser (Parser), der das HTML-Dokument analysiert, dann einen Rendering-Baum (Render Tree) generiert und schließlich die Seite rendert. Dies geschieht in einem Thread, sodass beides nicht gleichzeitig erfolgt.

Ich habe die folgenden zwei Situationen unterteilt und sie jeweils in verschiedenen Browsern getestet.

Die Stildatei befindet sich im Kopf, die anderen beiden Skriptdateien befinden sich am Anfang des Körpers und die andere am unteren Rand des Körpers. Die Stildatei befindet sich am Anfang des Hauptteils und der Speicherort der Skriptdatei ist derselbe wie oben.

Die Ergebnisse des Tests sind wie folgt: In Chrome wirkt sich der Speicherort der Stildatei auf die Downloadzeit des Bildes aus, in den anderen beiden Browsern besteht jedoch kein Unterschied zwischen den beiden Situationen. Im Folgenden finden Sie den detaillierten Testprozess.

Test 1: Die Stildatei befindet sich im Kopf und die anderen beiden Skriptdateien befinden sich am Anfang des Körpers und die andere am unteren Rand des Körpers.

Hallo!

document.write("

Hallo nochmal!

1. Testen in Chrome

Nachdem ich die Seite im Browser geöffnet hatte, machte ich schnell einen Screenshot der Webseite, wie unten gezeigt (klicken Sie, um das größere Bild anzuzeigen, dasselbe unten):

Wie aus dem Bild oben ersichtlich ist, wurde das test.htm-Dokument geladen und auf der Seite wird nichts angezeigt. example.css befindet sich im ausstehenden Zustand, aber die last.js unten wurde geladen. Dies zeigt, dass Chrome vorab geladen, heruntergeladen und im Cache des Browsers abgelegt wurde. Obwohl last.js geladen wurde, wurde es noch nicht ausgeführt, da die davor liegende Style-Datei die Ausführung des Skripts blockiert.

Als nächstes wird „Hallo!“ auf dem Bildschirm angezeigt, wenn example.css geladen wird, und der Screenshot des Browsers sieht wie folgt aus:

Aus der Netzwerkanfrage geht hervor, dass example.css geladen wurde und sich other.js im Status „Ausstehend“ befindet. Die drei Bilder unter dem Skript-Tag wurden jedoch zu diesem Zeitpunkt heruntergeladen Vorladefunktion. Da jedoch das Rendern des Browsers durch das other.js-Skript blockiert wird, werden diese drei Bilder und das „Hallo nochmal“ darauf nicht angezeigt. Außerdem wurde der Code in last.js noch nicht ausgeführt.

Als nächstes erstellt der Browser beim Laden von other.js einen Rendering-Baum, zeigt „Hallo nochmal“ und das Bild an. Da last.js zuvor heruntergeladen wurde, wird last.js sofort ausgeführt. Der gesamte Rendervorgang ist abgeschlossen. Wie unten gezeigt:

Daraus ist ersichtlich, dass Chrome die Skriptressourcen im Hauptteil vorab lädt (die vom JavaScript-Skript dynamisch geladene JS wirkt sich nicht auf den Download der Bilddatei aus). die Darstellung des Bildes darunter.

2. Testergebnisse in Firefox

Machen Sie nach dem Öffnen der Seite in Firefox schnell einen Screenshot, wie unten gezeigt:

Es unterscheidet sich offensichtlich von Chrome. „Hallo!“ wird bereits auf der Seite angezeigt, aber die Hintergrundfarbe ist weiß, was darauf hinweist, dass die Stildatei noch nicht heruntergeladen wurde. Allerdings wird es in Chrome erst angezeigt, wenn die Style-Datei geladen ist.

Wenn als nächstes die gesamte Seite geladen ist, sieht der Screenshot wie folgt aus:

Wie aus dem Wasserfallfluss der Anfragen ersichtlich ist, lädt der Browser, ähnlich wie bei Chrome, last.js vorab. Im Gegensatz zu Chrome lädt Firefox das Bild nicht vor, sondern wartet, bis andere Ladevorgänge abgeschlossen sind, nachdem .js geladen wurde .

In Firefox hat die Stildatei keinen Einfluss auf die Darstellung des Dokuments (das typischste Phänomen ist, dass die Webseite am Anfang unordentlich angezeigt wird und keinen Stil hat. Nachdem die Stildatei heruntergeladen wurde, wird sie angezeigt (normalerweise). Im Text blockieren dynamisch geladene JavaScript-Dateien den Download von Bildern dahinter.

3. Im Opera-Browser

Nach dem Testen in Opera habe ich festgestellt, dass der Opera-Browser „aufmerksamer“ ist und es kein sogenanntes Vorladen gibt:

In Opera blockieren Stildateien das Rendern der Seite, ähnlich wie in Chrome. Aus dem Anforderungswasserfallfluss von Opera ist jedoch ersichtlich, dass alle Ressourcen auf der Seite Schritt für Schritt geladen werden, und andere.js liegt vor dem Laden der letzten .js-Datei. Kein Vorladen.

Test 2. Die Stildatei befindet sich am Anfang des Hauptteils. Der Speicherort der Skriptdatei ist derselbe wie bei Test 1.

<br><div class="msgheader">
<div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode91'));"><u>复制代码</u></span></div>代码如下:</div><div class="msgborder" id="phpcode91">
<br><br> <br> <br>     <title>测试页面</title>
<br> <br> <br>     <link rel="stylesheet" type="text/css" href="example.aspx?sleep=3">
<br>     <div>
<br>         Hi, there!</div>
<br> <br>     <script type="text/javascript"><br />         document.write("<script src='other.aspx?sleep=5'>" + "ipt>");<br />     </script><br> <br>     <div>
<br>         Hi, again!</div>
<br>     <img src="/static/imghw/default1.png" data-src="images/marx.jpg" class="lazy" alt="Verstehen Sie den Rendering-Prozess von HTML-Seiten als Vorbereitung für das Erlernen der Front-End-Leistungsoptimierung (Fortsetzung)_HTML/Xhtml_Webseitenproduktion"><br>     <img src="/static/imghw/default1.png" data-src="images/engels.jpg" class="lazy" alt="Engels"><br>     <img src="/static/imghw/default1.png" data-src="images/Lenin.jpg" class="lazy" alt="Lenin"><br> <br>     <script src="last.aspx" type="text/javascript"></script><br> <br> <br> <br>
</div><br>经过测试，发现在火狐和Opera中，结果和测试一的一样，而在Chrome中稍微有些不同，在测试一中，图片要等到head中样式文件加载完之后才会下载，但是测试二中会和样式文件并行下载，如下图：

Zusammenfassung:

Das Vorladen ist zwar vorhanden, wird jedoch in Opera nicht gefunden. Chrome-Bilder können parallel zu den Stildateien im Hauptteil heruntergeladen werden, jedoch nicht parallel zu den Stildateien im Kopf. Das Skript wird ausgeführt, nachdem die davor liegende Style-Datei geladen wurde. In Chrome und Opera blockieren entladene Ressourcen das Rendern von Elementen dahinter, Firefox jedoch nicht. Testergebnisse können mit der Browserversion zusammenhängen.

Fühlen Sie sich nach dem Lesen etwas verwirrt? Ich möchte es so deutlich wie möglich ausdrücken, aber aufgrund meines begrenzten Niveaus kann ich nur darauf hinweisen, dass es unangemessen ist, und das können Sie auch Mach es selbst. Experimentiere und sieh.

(Ende)^_^