Vor kurzem lerne ich die Leistungsoptimierung des Front-Ends. Es ist notwendig, den Rendering -Prozess der Seite zu verstehen, um die richtige Medizin zu verschreiben und den Engpass der Leistung herauszufinden. Das Folgende sind einige Dinge, die ich gesehen habe, und ich werde sie mit Ihnen teilen.
Referenz: Verständnis des Renderers
Das Rendering der Seite hat die folgenden Eigenschaften :• Einstiegs-Ereignisabfragen
• Klar definiert, kontinuierlich und geordnet (HTML5)
• Trenn- und Bauen von Dombäumen
• Fordern Sie Ressourcen und Vorspannungen an
• Bauen Sie Renderbäume und zeichnen Sie Seiten
Speziell :Wenn wir die entsprechenden Bytes von HTML aus dem Netzwerk erhalten, wird der DOM -Baum gebaut. Der Thread, der die Benutzeroberfläche aktualisiert, ist für den Browser verantwortlich. Der Aufbau des Dombaums wird blockiert, wenn:
• Der HTML -Antwortstrom ist im Netzwerk blockiert
• Es gibt entladene Skripte
• Der Skriptknoten wurde angetroffen, aber zu diesem Zeitpunkt gab es noch eine entladene Style -Datei
Der Rendering -Baum ist aus dem DOM -Baum erstellt und wird durch die Stildatei blockiert.
Da es auf Einfragen mit einem Thread-Ereignis basiert, wird auch wenn es keine Blockierung von Skripten und Stilen blockiert, die Darstellung der Seite blockiert, wenn diese Skripte oder Stile analysiert, ausgeführt und angewendet werden.
In einigen Fällen, in denen das Rendering von Seitenrendern nicht blockiert wird :• Definierte Defer -Attribute und asynchronisierte Attribute
• Die Style -Datei ohne passende Medientyp
• Kein Skriptknoten oder Stilknoten wird über Parser eingefügt
Lassen Sie uns dies hier mit einem Beispiel (Vollcode) veranschaulichen :Kopieren Sie den Code