Frontend-Entwickler müssen wissen, wie Webseiten gerendert werden

[Anmerkung des Herausgebers] Tatsächlich gibt es viele Artikel zum Rendern von Webseiten, aber die relevanten Informationen sind verstreut und die Diskussion ist nicht vollständig. Wenn wir dieses Thema allgemein verstehen wollen, müssen wir noch viel lernen. Daher beschloss der Webentwickler Alexander Skutin, einen Artikel zu schreiben. Er glaubt, dass dieser Artikel nicht nur Anfängern helfen kann, sondern auch für fortgeschrittene Front-End-Entwickler von Vorteil sein kann, die ihre Wissensstruktur auffrischen möchten. Die ursprüngliche Adresse

Die Übersetzung lautet wie folgt:

Das Rendern der Webseite muss in einem sehr frühen Stadium erfolgen, das bereits in der Fertigstellung des Seitenlayouts erfolgen kann. Denn Stile und Skripte haben einen entscheidenden Einfluss auf die Darstellung von Webseiten. Daher müssen professionelle Entwickler einige Techniken kennen, um in der Praxis nicht auf Leistungsprobleme zu stoßen.

In diesem Artikel wird nicht der detaillierte Mechanismus im Browser untersucht, sondern einige allgemeine Regeln vorgeschlagen. Schließlich funktionieren verschiedene Browser-Engines unterschiedlich, was die Recherche der Entwickler zu Browserfunktionen zweifellos komplizierter machen wird.

Wie führt der Browser das Rendern von Webseiten durch?

Betrachten wir zunächst die Aktionen des Browsers beim Rendern einer Webseite:

Bilden Sie das Document Object Model (DOM) basierend auf dem HTML-Code von der Serverseite.

Laden und Parse-Stile, Bilden Sie das CSS-Objektmodell.

Erstellen Sie zusätzlich zum Dokumentobjektmodell und CSS-Objektmodell einen Rendering-Baum, der aus einer Reihe von Objekten besteht, die gerendert werden sollen (in Webkit werden diese Objekte Renderer oder Rendering-Objekte genannt, und in Gecko (genannt „ Frame“ in ).) Der Rendering-Baum spiegelt die Struktur des Dokumentobjektmodells wider, enthält jedoch keine unsichtbaren Elemente wie Tags oder mit dem Attribut display:none. Im Renderbaum erscheint jede Textzeichenfolge als unabhängiger Renderer. Jedes Renderobjekt enthält sein entsprechendes DOM-Objekt oder Textblock sowie berechnete Stile. Mit anderen Worten: Der Renderbaum ist eine visuelle Darstellung des Dokumentobjektmodells.

Berechnen Sie für jedes Element im Rendering-Baum seine Koordinaten, was als Layout bezeichnet wird. Browser verwenden einen Flow-Ansatz, bei dem ein Element in einem Durchgang angeordnet wird, Tabellenelemente erfordern jedoch mehrere Durchgänge.

Abschließend werden die Elemente im Rendering-Baum endgültig im Browser angezeigt. Dieser Vorgang wird als „Malen“ bezeichnet.

Wenn der Benutzer mit der Webseite interagiert oder das Skriptprogramm die Webseite ändert und modifiziert, werden einige der oben genannten Vorgänge wiederholt ausgeführt, da sich die interne Struktur der Webseite geändert hat.

Neu zeichnen

Beim Ändern des Stils von Elementen, die keinen Einfluss auf die Position des Elements auf der Webseite haben, z. B. Hintergrundfarbe (Hintergrundfarbe), Rahmenfarbe (Rahmenfarbe) , Sichtbarkeit( Sichtbarkeit), der Browser zeichnet das Element nur einmal mit dem neuen Stil neu (dies ist ein Neuzeichnen oder Umstrukturieren des Stils).

Umfließen

Umfließen oder Neuanordnung erfolgt, wenn Änderungen den Textinhalt oder die Textstruktur oder die Elementpositionierung beeinflussen. Diese Änderungen werden normalerweise durch die folgenden Ereignisse ausgelöst:

DOM-Operationen (Hinzufügen, Löschen, Ändern oder Ändern der Elementreihenfolge);

Inhaltsänderungen, einschließlich Textänderungen innerhalb von Formularfeldern

Berechnung oder Änderung von CSS-Eigenschaften;

Stylesheets hinzufügen oder löschen;

Eigenschaften von „Klassen“ ändern;

Operationen von Browserfenstern (Zoomen, scrollen );

Pseudoklassenaktivierung(:hover).

Wie optimiert der Browser das Rendering?

Browser versuchen ihr Bestes, das Neuzeichnen/Rekonstruieren auf den Bereich des geänderten Elements zu beschränken. Bei einem Element mit fester oder absoluter Position wirkt sich die Größenänderung beispielsweise nur auf das Element selbst und seine Unterelemente aus. Die Größenänderung eines statisch positionierten Elements löst jedoch den Reflow aller nachfolgenden Elemente aus.

Eine weitere Optimierungstechnik besteht darin, den Browser die Änderungen zwischenspeichern zu lassen, wenn mehrere Teile des JavaScript-Codes ausgeführt werden, und die Änderungen dann in einem einzigen Durchgang anzuwenden, nachdem die Ausführung des Codes abgeschlossen ist. Der folgende Code löst beispielsweise nur ein Refactoring und ein Repaint aus:

var $body = $('body');
$body.css('padding', '1px'); // reflow, repaint
$body.css('color', 'red'); // repaint
$body.css('margin', '2px'); // reflow, repaint
// only 1 reflow and repaint will actually happen

Wie bereits erwähnt, löst die Änderung der Eigenschaften eines Elements jedoch einen erzwungenen Reflow aus. Dieses Verhalten tritt auf, wenn wir dem obigen Codeblock eine Codezeile hinzufügen, um auf die Eigenschaften des Elements zuzugreifen.

var $body = $('body'); $body.css('padding', '1px'); eine Eigenschaft, ein erzwungener Reflow $body.css('color', 'red'); $body.css('margin', '2px');

Das Ergebnis ist, dass der Reflow zweimal erfolgt. Daher sollten Sie Vorgänge, die auf Elementattribute zugreifen, gruppieren, um die Webseitenleistung zu optimieren. (Ausführlichere Beispiele finden Sie auf JSBin)

Manchmal muss man einen erzwungenen Reflow auslösen. Beispielsweise müssen wir demselben Element zweimal dasselbe Attribut (z. B. linken Rand) zuweisen. Zunächst sollte es auf 100 Pixel ohne Animation eingestellt sein. Als nächstes muss es über eine Übergangsanimation auf 50 Pixel geändert werden. Sie können diesem Beispiel jetzt auf JSbin folgen, aber ich werde es hier ausführlicher behandeln.

Zuerst erstellen wir eine CSS-Klasse mit Übergangseffekt: .has-transition { -webkit-transition: margin-left 1s EASY-OUT; -moz-Transition: Margin-Left 1S EASE-OUT; -transition: margin-left 1s EASY-OUT; Transition: Margin-Left 1S Easy-Out; $('#targetElemId');

Diese Ausführung funktioniert jedoch nicht. Alle Änderungen werden zwischengespeichert und erst am Ende des Codeblocks ausgeführt. Was wir brauchen, ist eine erzwungene Neuordnung, die wir mit den folgenden Änderungen erreichen können:

// remove the transition class
$targetElem.removeClass('has-transition');
// change the property expecting the transition to be   off, as the class is not there
// anymore
$targetElem.css('margin-left', 100);
// put the transition class back
$targetElem.addClass('has-transition');
// change the property
$targetElem.css('margin-left', 50);

// entferne die Übergangsklasse $(this).removeClass('has-transition');

Jetzt wird der Code wie erwartet ausgeführt.

// change the property
$(this).css('margin-left', 100);
// trigger a forced reflow, so that changes in a    class/property get applied immediately
$(this)[0].offsetHeight; // an example, other   properties would work, too
// put the transition class back
$(this).addClass('has-transition');
// change the property
$(this).css('margin-left', 50);

Praktische Vorschläge zur Leistungsoptimierung

Ich fasse die verfügbaren Informationen zusammen und mache folgende Vorschläge:

Erstellen Sie gültige HTML- und CSS-Dateien und vergessen Sie nicht anzugeben, wie die Dokument ist verschlüsselt. Im Tag sollten Stile enthalten sein und am Ende des Tags sollte Skriptcode hinzugefügt werden.

Vereinfachen und optimieren Sie CSS-Selektoren so weit wie möglich (diese Optimierung wird von Entwicklern, die CSS-Präprozessoren verwenden, fast durchgängig ignoriert) und beschränken Sie die Verschachtelung auf ein Minimum. Hier ist das Leistungsranking der CSS-Selektoren (beginnend mit den schnellsten)

Sie sollten bedenken, dass Browser Selektoren von rechts nach links verarbeiten, sodass der Selektor ganz rechts der schnellste sein sollte: #id oder .class: div * {...} // schlecht .list li {...} // schlecht .list-item {...} // gut #list .list -item {...} // gut * 1. Reduzieren Sie in Ihrem Skriptcode die DOM-Operationen so weit wie möglich. Speichern Sie alles zwischen, einschließlich Elementattributen und Objekten, wenn diese wiederverwendet werden. Bei der Durchführung komplexer Operationen ist es besser, „isolierte“ Elemente zu verwenden, die später zum DOM hinzugefügt werden können (die sogenannten „isolierten“ Elemente sind Elemente, die vom DOM getrennt und nur im Speicher gespeichert sind).

1. 识别器:#id
2. 类:.class
3. 标签：div
4. 相邻兄弟选择器：a + i
5. 父类选择器：ul> li
6. 通用选择器：*
7. 属性选择：input[type="text"]
8. 伪类和伪元素：a:hover

2. Wenn Sie jQuery zum Auswählen von Elementen verwenden, befolgen Sie bitte die Best Practices für die jQuery-Auswahl.

3. Um den Stil eines Elements zu ändern, ist die Änderung des Attributs „Klasse“ eine der effektivsten Methoden. Wenn Sie diese Änderung durchführen, ist es umso besser, je tiefer Sie sich im DOM-Rendering-Baum befinden (es hilft auch, die Logik von der Präsentation zu entkoppeln).

4. Versuchen Sie, Animationseffekte nur zu Elementen mit absoluten oder festen Positionen hinzuzufügen.

5. Deaktivieren Sie komplexe Hover-Animationen beim Scrollen (fügen Sie beispielsweise eine zusätzliche Nicht-Hover-Klasse hinzu). Leser können einen Artikel zu diesem Thema lesen.

Wenn Sie mehr Details erfahren möchten, können Sie auch diese beiden Artikel lesen:

1, Wie funktionieren Browser?

2,Rendering: Neulackieren, Reflow/Relayout, Neustil