Kennen Sie als qualifizierter Front-End-Entwicklungsingenieur mehrere Leistungsindikatoren, auf die Sie achten müssen? Heute werde ich Ihnen eine gute Einführung in die drei Indikatoren geben, auf die Sie als Front-End-Ingenieur achten müssen
1. Bezüglich der Seitenantwortzeit gibt es ein berühmtes „2-5-8-Prinzip“ . Wenn ein Benutzer eine Seite besucht:
erhält eine Antwort innerhalb von 2 Sekunden, wenn
eine Antwort zwischen 2 und 5 Sekunden erhält, ist es in Ordnung
Wenn die Antwort innerhalb von 5–8 Sekunden eingeht, fühlt sich die Reaktionsgeschwindigkeit des Systems sehr langsam an, aber das ist akzeptabel.
Wenn der Benutzer die Antwort nach mehr als 8 Sekunden immer noch nicht erhält, Der Benutzer wird das Gefühl haben, dass das System schrecklich ist, und sich dafür entscheiden, die Website zu verlassen oder eine zweite Anfrage zu stellen.
Wenn eine Website Nutzer anlocken möchte, stehen Geschwindigkeit und Stabilität der Website an erster Stelle.
Von verschiedenen Front-End-Überwachungsplattformen können Sie viele Leistungsindikatoren der Seite abrufen. In diesem Artikel werden mehrere Schlüsselindikatoren vorgestellt und entsprechende Optimierungsideen gegeben.
2. Beginn der Renderzeit
Dieser Zeitpunkt zeigt an, dass der Browser mit dem Zeichnen der Seite beginnt, daher wird er auch als weiße Bildschirmzeit bezeichnet.
Dieser Zeitpunkt kann durch die Formel Time To Start Render = TTFB (Time To First Byte) + TTDD (Time To Document Download) + TTHE (Time To Head End) dargestellt werden. TTFB stellt die Zeit von der Initiierung einer Anfrage durch den Browser bis zur Rückgabe des ersten Bytes durch den Server dar, TTDD stellt die Zeit dar, zu der das HTML-Dokument vom Server geladen wird, und TTHE stellt die Zeit dar, die zum vollständigen Parsen erforderlich ist der Dokumentkopf. In erweiterten Browsern gibt es ein entsprechendes -Attribut , um den Zeitpunkt zu ermitteln. Chrome kann über chrome.loadTimes().firstPaintTime und IE9+ über performance.timing.msFirstPaint abgerufen werden. In nicht unterstützten Browsern kann der ungefähre Wert simuliert werden, indem der Zeitpunkt des Ladens der Header-Ressource gemäß der obigen Formel ermittelt wird . Je kürzer die Start-Rendering-Zeit ist, desto schneller können Benutzer die Seite sehen.
Optimierungen zu diesem Zeitpunkt umfassen:
1) Optimierung der Serverantwortzeit, Serverausgabe so früh wie möglich
2) Reduzierung der HTML-Dateigröße
3 ) Reduzieren Sie die Header-Ressourcen und platzieren Sie das Skript so weit wie möglich im Textkörper
DOM Ready
Dieser Zeitpunkt zeigt an, dass die DOM-Analyse abgeschlossen wurde und die Ressourcen vorhanden sind wurde nicht geladen. Zu diesem Zeitpunkt ist die Beziehung zwischen dem Benutzer und der Seiteninteraktion bereits verfügbar. Es kann durch die Formel TimeTo Dom Ready = TTSR(Time To Start Render) + TTDC(Time To Dom Created) + TTST(Time To Script) ausgedrückt werden. TTSR wurde oben eingeführt, und TTDC stellt die Zeit dar, die zum Erstellen des DOM-Baums benötigt wird. TTST stellt die Lade- und Ausführungszeit aller statischen Skripte in BODY dar. In erweiterten Browsern gibt es ein entsprechendes DOMContentLoaded-Ereignis . Das Dokument auf MDN, das das DOMContentLoaded-Ereignis beschreibt, lautet wie folgt:
Das DOMContentLoaded-Ereignis wird ausgelöst, wenn das Dokument vollständig geladen und analysiert wurde , ohne darauf warten zu müssen, dass Stylesheets, Bilder und Subframes vollständig geladen sind (das Ladeereignis kann verwendet werden, um eine vollständig geladene Seite zu erkennen).
Detaillierte Spezifikationen finden Sie in der HTML5-Spezifikation des W3C. Aus dem MDN-Dokument geht hervor, dass sich dieses Ereignis hauptsächlich auf den Abschluss des Ladens und Parsens des DOM-Dokuments bezieht. Es scheint sehr einfach zu sein, aber das Auslösen des DOMContentLoaded-Ereignisses hängt eng mit CSS und JS zusammen Der Begriff „Kritischer Rendering-Pfad“ (kritischer Rendering-Pfad) beschreibt die Auswirkungen des kritischen Rendering-Pfads auf DOMContentLoaded ausführlich im Artikel [Kritischer Rendering-Pfad].
In Browsern, die das DOMContentLoaded-Ereignis nicht unterstützen, können Sie durch Simulation ungefähre Werte erhalten. Die wichtigsten Simulationsmethoden sind:
1) Webkit-Kernel-Browser mit niedriger Version können dies Fragen Sie das Dokument ab. readyState zur Implementierung
2) Im IE kann die doScroll-Methode von documentElement kontinuierlich über setTimeout aufgerufen werden, bis sie zur Implementierung von
verwendet werden kann zur Implementierung von Mainstream-Frameworks (JQuery usw.). Der DOM-Ready-Zeitpunkt bedeutet, dass der Benutzer mit der Seite interagieren kann. Je früher, desto besser sind Optimierungen für diesen Zeitpunkt:
1) Reduzieren Sie die Komplexität der DOM-Struktur mit so wenigen Knoten wie möglich , und Verschachtelung Gehen Sie nicht zu tief
2) Optimieren Sie den kritischen Präsentationspfad
3. Erster Bildschirmzeitpunkt
Dieser Zeitpunkt stellt den Zeitpunkt dar, an dem die Der Benutzer sieht die erste Bildschirmseite. Der Zeitpunkt ist wichtig, aber im Allgemeinen kann eine ungefähre Zeit nur durch Simulation ermittelt werden. Allgemeine Simulationsmethoden sind:
1) Erhalten Sie kontinuierlich Screenshots. Wenn sich die Screenshots nicht mehr ändern, kann dies als erste Bildschirmzeit angesehen werden. Sie können sich auf den Geschwindigkeitsindex-Algorithmus von webPagetest beziehen.
2) Im Allgemeinen ist der Hauptfaktor, der den ersten Bildschirm beeinflusst, das Laden des
Bildes ob sich das Bild auf dem ersten Bildschirm befindet und herausfinden, ob sich das Bild auf dem ersten Bildschirm befindet. Die langsamste Zeit kann als erste Bildschirmzeit angesehen werden. Natürlich müssen auch andere Details berücksichtigt werden. Weitere Informationen finden Sie unter [Aufbau eines Front-End-Leistungsüberwachungssystems in 7 Tagen]
Die Optimierungen für diesen Zeitpunkt sind:
1 ) Versuchen Sie, sich nicht auf die Anzeige des ersten Bildschirms der Seite zu verlassen. JS sollte so oft wie möglich nach domReady ausgeführt oder geladen werden
2) Verzögertes Laden von Bildern außerhalb des ersten Bildschirms
3) Halten Sie die Struktur des ersten Bildschirms so einfach wie möglich, und CSS außerhalb des ersten Bildschirms kann verzögert geladen werden
beim Laden
Zu diesem Zeitpunkt wird das window.onload-Ereignis ausgelöst, das anzeigt, dass das Originaldokument und alle referenzierten Inhalte geladen wurden. Das offensichtlichste Gefühl für den Benutzer ist der Ladestatus im Browser Die Registerkarte ist beendet.
Die Optimierungsmethoden zu diesem Zeitpunkt sind:
1) Reduzieren Sie die Anzahl der Ressourcenanforderungen und die Dateigröße
2) Platzieren Sie das Nicht-Initialisierungsskript nach onLoad und Führe es aus
3) Asynchrones Laden von Skripten ohne Synchronisierung
Um die Leistung der gesamten Website zu optimieren, können Sie in Betracht ziehen, beim Laden der Seite einiges vorab zu laden und beim anderen die Ressourcen vorab zu laden Seiten müssen verwendet werden.
Ich hoffe, dass die Lektüre des obigen Artikels Ihnen auf Ihrem Weg zur Front-End-Entwicklung hilfreich sein wird.
Verwandte Lektüre:
Front-End-JS-Interviewfragen
Einführung in praktische Web-Front-End-JS- und UI-Frameworks
Zusammenfassung des Web-Front-End-Wissenssystems
Das obige ist der detaillierte Inhalt vonAls Front-End-Entwicklungsingenieur müssen Sie auf drei Leistungsindikatoren achten:. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
