Beschreibung der HTML-Parsing-Prinzipien

Standard-Web-Frontend-Ingenieure müssen Folgendes kennen: ◎Das Rendering-/Neuzeichnungsprinzip des Browsers (oder des entsprechenden Players)

Daran muss ich noch härter arbeiten. Ich habe es wirklich nicht sehr klar erklärt, also habe ich es einfach G-ed, und es gab nicht viele Ergebnisse. Als ich eines fand, schrieb ich es auf. . .

Der folgende Teil stammt aus dem Blog von handawei-javaeye:

Webseiten werden in verschiedenen Browsern ausgeführt und die Geschwindigkeit, mit der der Browser die Seite lädt und rendert, wirkt sich direkt auf die Benutzererfahrung aus
Einfach ausgedrückt ist Seitenrendering der Prozess, bei dem der Browser den HTML-Code gemäß den von CSS definierten Regeln im Browserfenster anzeigt. Lassen Sie uns zunächst ein allgemeines Verständnis der Funktionsweise des Browsers erlangen:
1. Der Benutzer gibt die URL ein (vorausgesetzt, es handelt sich um eine HTML-Seite und es handelt sich um den ersten Besuch), der Browser sendet 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 sich im Tag

Der Browser sendet erneut eine Anfrage nach einer CSS-Datei und der Server gibt die CSS-Datei zurück.
4. Der Browser lädt weiterhin den Code des und die Seite kann gerendert werden;
5. Der Browser findet ein im Code. Das Tag verweist auf ein Bild und stellt eine Anfrage an den Server. Zu diesem Zeitpunkt wartet der Browser nicht, bis das Bild heruntergeladen wurde, sondern rendert weiterhin den folgenden Code. 6. Der Server gibt die Bilddatei zurück, die einen bestimmten Bereich einnimmt Nach den Absätzen muss der Browser diesen Teil des Codes erneut rendern.
7. Der Browser hat ein <script>-Tag gefunden, das eine Zeile Javascript-Code enthält. Führen Sie es schnell aus. Das Javascript-Skript führte diese Anweisung aus und befahl dem Browser, ein <div> im Code auszublenden (style.display=“none“). Ups, plötzlich fehlt so ein Element und der Browser muss diesen Teil des Codes neu rendern <br/> 9. Als schließlich ankommt, bricht der Browser in Tränen aus... <br/> 10 . Warten Sie, es ist noch nicht vorbei. Der Benutzer hat auf die Schaltfläche „Skin ändern“ in der Benutzeroberfläche geklickt, und Javascript hat den Browser aufgefordert, den CSS-Pfad des <br/> zu ändern ;div&gt ;<span><ul><li>Wir, „Alle packen ihre Koffer, wir müssen von vorne anfangen…“, der Browser hat <br/> eine neue CSS-Datei vom Server angefordert und neu gerendert die Seite. <br/><br/> <br/> <p> Browser laufen jeden Tag auf diese Weise hin und her. Sie müssen wissen, dass die Qualität der von verschiedenen Leuten geschriebenen HTML- und CSS-Codes ungleichmäßig ist Ich bin beim Laufen gestorben. Glücklicherweise gibt es immer noch eine solche Gruppe von Menschen – Seitenrekonstruktionsingenieure. Sie helfen visuellen Designern nur dabei, Bilder zu schneiden und Wörter zu ändern. <p>Apropos warum ist die Seite langsam? Das liegt daran, dass das Rendern des Browsers Zeit und Energie benötigt, insbesondere wenn er feststellt, dass sich ein bestimmter Teil geringfügig geändert hat und sich auf das Layout auswirkt, und dass er zurückgehen und erneut rendern muss. Experten nennen diesen Rollback-Prozess Reflow. <p><p><p style="max-width:90%"> Reflow ist fast unvermeidlich. Einige der beliebten Effekte auf der Benutzeroberfläche, wie das Falten und Erweitern baumartiger Verzeichnisse (im Wesentlichen das Anzeigen und Ausblenden von Elementen) usw., führen zu einem Reflow des Browsers. Bewegen der Maus, Klicken ... Solange diese Aktionen zu Änderungen im Bereich, der Positionierung, den Rändern und anderen Attributen bestimmter Elemente auf der Seite führen, führen sie zu einer Neudarstellung innerhalb, um sie herum oder sogar auf der gesamten Seite. Normalerweise können wir nicht vorhersagen, welchen Teil des Codes der Browser umfließen wird, da sich alle gegenseitig beeinflussen. <img src="/static/imghw/default1.png" data-src="https://img.php.cn//upload/image/963/493/887/1488959472280777.jpg" class="lazy" title="Beschreibung der HTML-Parsing-Prinzipien" alt="Beschreibung der HTML-Parsing-Prinzipien" style="max-width:90%" style="max-width:90%"/><p><p style="text-align: center;"> Das Reflow-Problem kann optimiert werden und wir können unnötiges Reflow minimieren. Das Problem beim Laden von <img src="/static/imghw/default1.png" data-src="https://img.php.cn//upload/image/435/481/759/1488959491648314.jpg" class="lazy" alt="Beschreibung der HTML-Parsing-Prinzipien" >-Bildern im Beispiel am Anfang ist tatsächlich ein Reflow, der vermieden werden kann – legen Sie einfach die Breite und Höhe des Bildes fest. Auf diese Weise kennt der Browser den vom Bild eingenommenen Bereich und reserviert den Platz, bevor er das Bild lädt. <img src="/static/imghw/default1.png" data-src="https://img.php.cn//upload/image/435/481/759/1488959491648314.jpg" class="lazy" title="Beschreibung der HTML-Parsing-Prinzipien" alt="Beschreibung der HTML-Parsing-Prinzipien" style="max-width:90%" style="max-width:90%"/>Darüber hinaus gibt es einen Begriff, der dem Reflow ähnelt: Repaint, der auf Chinesisch Redraw heißt. Wenn Sie lediglich die Hintergrundfarbe, Textfarbe, Rahmenfarbe usw. eines Elements ändern, ohne die Umgebung oder das interne Layout zu beeinflussen, führt dies nur dazu, dass der Browser neu gezeichnet wird. Die Geschwindigkeit von Repaint ist deutlich schneller als Reflow (im IE müssen Sie den Begriff ändern, Reflow ist langsamer als Reflow). Das nächste Mal werden wir anhand einer Reihe von Experimenten die Optimierung des Reflows unter Browsern wie Firefox und IE veranschaulichen. <p><p></script>

Das obige ist der detaillierte Inhalt vonBeschreibung der HTML-Parsing-Prinzipien. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!