Moderne Browser sind wesentlich effizienter, um komplexe HTML-, CSS- und JavaScript -Code von Webseiten zu rendern und Code in nur wenigen Millisekunden in verfügbare Seiten zu konvertieren.

Wie k?nnen Front-End-Entwickler die Browser-Rendering-Geschwindigkeit weiter verbessern? Zus?tzlich zu den Best Practices, die leicht vergessen werden (insbesondere wenn wir nur eine begrenzte Kontrolle über den contain Code haben), wie z.

Mit contain Eigenschaft k?nnen Entwickler angeben, inwieweit ein Element und sein Inhalt vom Rest des Dokumentbaums unabh?ngig sind. Auf diese Weise kann der Browser Layouts, Stile, Zeichnungen, Gr??en oder eine beliebige Kombination nur für einen begrenzten Bereich des DOM (und nicht auf der gesamten Seite) neu berechnen, was zu einer erheblichen Leistungsverbesserung führt.

Einfach ausgedrückt kann contain Attribut eine Aufforderung zum Browser über die Beziehung zwischen den Elementen auf der Seite liefern, bei denen es sich normalerweise um Containerelemente handelt, die Inhalte enthalten, auch wenn der Inhalt dynamisch ist. Beispielsweise wird in einzelnen Seiten Anwendungen (SPA) dynamischer Inhalte h?ufig auf der Seite eingefügt und gel?scht, h?ufig unabh?ngig von anderen Inhalten auf der Seite.

Der Browser kann zukünftige Layout?nderungen nicht vorhersagen, die sich aus der Einfügung von JavaScript und dem L?schen von Seiteninhalten ergeben k?nnen. Selbst einfache Operationen, wie das Hinzufügen von Klassennamen zu Elementen, animierten DOM -Elementen oder das Erhalten von Elementgr??en k?nnen zu einer Umlagerung und Neubildung von Seiten führen, die teuer sind und so weit wie m?glich vermieden oder reduziert werden sollten.

Entwickler k?nnen m?gliche zukünftige ?nderungen auf der Grundlage der Benutzererfahrung des Seitendesigns vorhersagen. Wenn ein Benutzer beispielsweise auf eine Schaltfl?che klickt, werden die Anrufdaten in der aktuellen Ansicht in ein DIV -Element eingefügt. Wir wissen, dass dies m?glich ist, aber der Browser nicht. Wir wissen auch, dass das Einfügen von Daten in das DIV -Element die visuellen Effekte oder andere Aspekte anderer Elemente auf der Seite h?chstwahrscheinlich nicht ver?ndert.

Browser -Entwickler haben viel Zeit damit verbracht, ihre Browser zu optimieren, um diese Situation zu bew?ltigen. W?hrend es verschiedene M?glichkeiten gibt, um dem Browser mit dieser Situation effizienter umzugehen, k?nnen direktere Tipps hilfreicher sein. contain Enthaltungseigenschaft bietet uns eine M?glichkeit, diese Hinweise zu liefern.

Verschiedene Verwendungen des contain Attributs

contain Attribut hat drei Werte, die allein oder in Kombination verwendet werden k?nnen: size , layout und paint . Es hat auch zwei Abkürzungswerte für gemeinsame Kombinationen: strict und content . Lassen Sie uns verstehen, was jeder Wert bedeutet.

Es ist zu beachten, dass in der Spezifikation viele Regeln und Kantenf?lle für jeden Wert behandelt werden. In den meisten F?llen k?nnen diese Regeln nicht viel Aufmerksamkeit erregen. Wenn Sie jedoch unerwartete Ergebnisse erzielen, kann ein kurzer Blick auf die Spezifikation hilfreich sein.

Es gibt auch einen Stil, der Typen in der Spezifikation enth?lt, die in diesem Artikel nicht eingeführt werden. Der Grund dafür ist, dass die aktuellen Typeneinschlussarten als geringfügig angesehen werden und derzeit das Risiko ausgesetzt sind, aus der Spezifikation entfernt zu werden.

size enth?lt

size enth?lt leicht zu erkl?ren. Wenn der diesbezügliche Container an Layoutberechnungen teilnimmt, kann der Browser einen betr?chtlichen Teil der Berechnungen überspringen, da er die untergeordneten Elemente des Containers ignoriert. Es wird erwartet, dass der Beh?lter eine festgelegte H?he und Breite hat. Andernfalls wird es zusammenbricht, und das ist der einzige Faktor, der im Seitenlayout berücksichtigt werden muss. Es wird als nichts angesehen.

Beachten Sie, dass Kinderelemente je nach Stil des Beh?lters die Gr??e ihres Beh?lters beeinflussen k?nnen. Dies muss bei der Berechnung des Layouts berücksichtigt werden. Unter Verwendung size ist es wahrscheinlich nicht berücksichtigt. Sobald der Container relativ zur Seitengr??e bestimmt wurde, wird das Layout seiner untergeordneten Elemente berechnet.

size selbst liefert nicht viel Optimierung. Es wird normalerweise in Kombination mit anderen Werten verwendet.

Ein Vorteil, den es bieten kann, besteht jedoch darin, mit JavaScript umzugehen, die die unter Containergr??e basierenden Containerelemente wie Container -Abfragetyp ?ndert. In einigen F?llen kann das ?ndern des untergeordneten Elements gem?? der Gr??e des Beh?lters dazu führen, dass der Beh?lter die Gr??e ?ndert, nachdem ?nderungen am untergeordneten Element vorgenommen wurden. Da die ?nderung der Containergr??e eine weitere ?nderung des untergeordneten Elements ausl?sen kann, k?nnen Sie eine ?nderungsschleife haben. size kann dazu beitragen, diese Schleife zu verhindern.

Hier ist ein v?llig künstliches Beispiel zu diesem Schleifenkonzept für die Gr??e der Gr??e: (Ein Code -Beispiel sollte hier eingefügt werden, aus denen hervorgeht, wie size enth?lt, wie die Gr??e der Gr??e der Gr??e verhindern kann.)

layout enth?lt

layout enth?lt ein Layout, das dem Browser mitteilt, dass externe Elemente weder das interne Layout des Containerelements beeinflussen noch das interne Layout des Containerelements beeinflussen die externen Elemente. Wenn der Browser Layout -Berechnungen durchführt, kann davon ausgegangen werden, dass die verschiedenen im layout enthaltenen Elemente andere Elemente nicht beeinflussen. Dies kann die Anzahl der Berechnungen verringern, die durchgeführt werden müssen.

Ein weiterer Vorteil ist, dass die entsprechenden Berechnungen, wenn der Beh?lter au?erhalb des Bildschirms ist oder blockiert ist, die Priorit?t verz?gern oder verringern k?nnen. Ein Beispiel, das durch die Spezifikation bereitgestellt wird, lautet:

[…] Wenn sich die Include -Box beispielsweise am Ende des Blockbeh?lters befindet und Sie den Beginn des Blockbeh?lters betrachten

Ein Container mit layout wird zu einem enthaltenden Block aus absoluten oder festen Positionselementen. Dies entspricht der Anwendung der relativen Position auf den Container. Denken Sie also daran, wie Sie die untergeordneten Elemente des Containers beeinflussen, wenn Sie diese Art von Inklusion anwenden.

Ebenso erh?lt der Container einen neuen Stapelkontext, sodass z-index genauso verwendet wird, wie die Anwendung relativ, absolut oder fest ist. Das Einstellen top , right , bottom oder left Attribute hat jedoch keinen Einfluss auf den Container.

Hier ist ein einfaches Beispiel: (Ein Code -Beispiel sollte hier angezeigt werden, wie layout das Layout- und Stapelkontext enth?lt)

paint enth?lt

paint enth?lt mit dem Browser, dass die untergeordneten Elemente des Beh?lters niemals au?erhalb der Grenze der Gr??e der Beh?lterkasten gezogen werden. Dies ?hnelt dem Einstellen overflow: hidden; auf einem Beh?lter, aber mit einigen Unterschieden.

Erstens wird der Container genauso behandelt wie unter layout -Einschluss: Er wird zu einem Block mit seinem eigenen Stapelkontext. Daher respektieren die in paint positionierten untergeordneten Kinderelemente den Beh?lter in Bezug auf die Position. Wenn wir das obige layout enthalten m?chten, aber stattdessen paint verwenden, ist das Ergebnis ungef?hr das gleiche. Der Unterschied besteht darin, dass die lila Linie, wenn die Anwendung enth?lt, den Container nicht überfüllt, sondern am Rand des Beh?lters abgeschnitten wird.

Ein weiterer interessanter Vorteil von paint ist, dass der Browser, wenn der Container selbst im Ansichtsfenster nicht sichtbar ist, die Zeichnungsberechnung der untergeordneten Elemente dieses Elements überspringen kann. Wenn sich der Beh?lter nicht im Ansichtsfenster befindet oder in irgendeiner Weise verstopft ist, ist es garantiert unsichtbar. Betrachten Sie beispielsweise ein Navigationsmenü, das sich normalerweise auf der linken Seite der Seite befindet, die beim Klicken der Schaltfl?che einflutet. Wenn sich das Menü in seinem normalen Status au?erhalb des Bildschirms befindet, überspringt der Browser einfach, um seinen Inhalt zu zeichnen.

Verschiedene Kombinationen von eingeschlossenen

Diese drei enthalten verschiedene Methoden, die die vom Browser durchgeführten Rendering -Berechnungen beeinflussen. size enth?lt den Browser, dass dieser Container auf der Seite keinen Positionsversatz verursachen sollte, wenn sich sein Inhalt ?ndert. layout enth?lt mit der Aussage des Browsers, dass untergeordnete Elemente dieses Containers keine Layout?nderungen in Elementen au?erhalb seines Beh?lters verursachen und umgekehrt. paint enth?lt den Browser, dass der Inhalt dieses Beh?lters niemals au?erhalb der Beh?ltergr??e gezogen wird und dass der Inhalt, wenn der Beh?lter blockiert ist, überhaupt nicht gezogen wird.

Da jeder Einschlüsse unterschiedliche Optimierungen bietet, ist es sinnvoll, einige der Zusammenh?nge zusammen zu kombinieren. Die Spezifikation erlaubt dies tats?chlich. Zum Beispiel k?nnen wir layout und paint als Wert contain Eigenschaft wie folgt verwenden:

 .el {
  Enth?lt: Layoutfarbe;
}

Da dies eine sehr offensichtliche Sache ist, liefert die Spezifikation tats?chlich zwei Abkürzungswerte:

content ist der am h?ufigsten verwendete Wert in einem Webprojekt, das viele dynamische Elemente enth?lt, z.

strict Wert ist für Container mit definierten Gr??en nützlich, die sich niemals ?ndern (auch wenn sich der Inhalt ?ndert). Sobald es an Ort war, wird die erwartete Gr??e beibehalten. Ein einfaches Beispiel ist ein DIV, das externe Werbeinhalte von Drittanbietern enth?lt, deren Dimensionen von der Branche definiert werden und nichts mit anderen DOM-Elementen auf der Seite zu tun haben.

Leistungsvorteile

Dieser Teil des Artikels ist schwer zu erkl?ren. Das Problem ist, dass es nicht viele visuelle Auswirkungen auf die Leistungsvorteile gibt. Die meisten Vorteile sind Optimierungen hinter den Kulissen und helfen dem Browser, zu entscheiden, was zu tun ist, wenn sie sich ver?ndert oder zeichnet.

Um die Leistungsvorteile des contain anzuzeigen, habe ich ein einfaches Beispiel gemacht, das die Schriftgr??e eines Elements mit mehreren untergeordneten Elementen ver?nderte. Diese ?nderung l?st normalerweise ein Relais aus, wodurch auch die Seite neu gezeichnet wird. Dieses Beispiel deckt contain Werte von none , content und strict . (Code -Beispiele und Leistungstestergebnisse sollten hier eingefügt werden)

Layout einmal, zweimal zeichnen

Bitte h?ren Sie meine Erkl?rung geduldig an. Ich verspreche, es wird Sinn machen.

Ich werde die obige Demonstration als Grundlage für die folgende Beschreibung verwenden. Wenn Sie weiter lernen m?chten, besuchen Sie die Vollversion der Demo und ?ffnen Sie Devtools. Beachten Sie, dass Sie nach dem Ausführen des Performance -Tools die Details des "Frame" anstelle der "Haupt" -Pension einschalten müssen, um zu sehen, was ich beschreiben werde.

Ich mache tats?chlich Screenshots aus der "FullPage" -Version, da Devtools in dieser Version besser funktioniert. Die regul?re Version von "Full" sollte jedoch ungef?hr die gleiche Idee liefern.

Im Ereignisprotokoll der Aufgabe, die nicht enthalten ist, wird das Zeichnungsereignis nur einmal ausgel?st. In der Regel dauern die Ereignisse nicht zu lang und reichen von 0,2 Millisekunden und 3,6 Millisekunden. Die tieferen Details sind dort, wo es interessant wird. In diesen Details hei?t es, dass der Zeichenbereich die gesamte Seite ist. Im Ereignisprotokoll unterstreicht Devtools sogar den gezogenen Seitenbereich, wenn Sie über das Draw -Event schweben. In diesem Fall ist die Gr??e die Gr??e des Browser -Ansichtsfensters. Es wird auch die gezogene Ebenenwurzel bemerken.

Beachten Sie, dass der Seitenbereich links vom Bild hervorgehoben ist, auch au?erhalb der lila Box. Auf der rechten Seite ist die auf dem Bildschirm gezogene Gr??e. In diesem Fall ist es ungef?hr die Gr??e des Ansichtsfensters. Für zukünftige Vergleiche beachten Sie bitte #Dokument als Ebenenwurzel.

Denken Sie daran, dass der Browser Schichtkonzepte für bestimmte Elemente hat, um zu zeichnen. Schichten werden h?ufig für Elemente verwendet, die sich aufgrund des neuen Stapelkontextes überschneiden k?nnen. Ein Beispiel ist die Anwendung von position: relative; und z-index: 1; In einem Element erstellt der Browser das Element als neue Ebene. contain Eigenschaft hat den gleichen Effekt.

Es gibt einen Abschnitt in Devtools mit dem Namen "Rendering", der verschiedene Tools bietet, um zu sehen, wie der Browser die Seite rendert. Bei der Auswahl eines Kontrollfelds "Layer Borders" k?nnen wir je nach Einschluss unterschiedliche Inhalte sehen. Wenn none enthalten ist, sollten Sie keine Ebenen über die typische statische Webseitenebene hinaus sehen. W?hlen Sie content oder strict aus und Sie k?nnen sehen, dass sich das lila Feld in seine eigene Ebene umwandelt und der Rest der Seite entsprechend ?ndert. (Screenshots sollten hier eingefügt werden, um Schichten unter verschiedenen Einschlussarten anzuzeigen.)

Wie ich bereits erw?hnt habe, führen sowohl content als auch strict dazu, dass das Draw -Ereignis zweimal abgefeuert wird. Dies liegt daran, dass zwei verschiedene Zeichnungsprozesse aus zwei verschiedenen Gründen durchgeführt werden. In meiner Demo ist das erste Ereignis für die lila Box und das zweite Ereignis für den Inhalt der lila Box.

In der Regel zeichnet das erste Ereignis eine lila Box und meldet die Abmessungen dieser Box als Teil des Ereignisses. Die Box ist jetzt ihre eigene Ebene und genie?t die Vorteile, die sie anbietet.

Das zweite Ereignis wird für den Inhalt der Box verwendet, da sie Elemente scrollen. Wie die Spezifikation erkl?rt; Da der Stapelkontext garantiert ist, kann das Bildlaufelement in eine einzelne GPU -Ebene gezogen werden. Die im zweite Ereignis angegebene h?here Gr??e ist die H?he des Bildlaufelements. Wahrscheinlich sogar schmaler, um Platz für Scrollstangen zu schaffen.

Beachten Sie den Unterschied in den Abmessungen rechts von diesen beiden Bildern. Zus?tzlich sind die Schichtwurzeln beider Ereignisse ma?geblich anstelle des oben angezeigten #Documents. Die lila Box ist ein Hauptelement, daher wird nur dieses Element anstelle des gesamten Dokuments gezeichnet. Sie k?nnen das hervorgehobene Feld anstelle der gesamten Seite sehen.

Der Vorteil davon ist, dass beim Scrollen von Elementen normalerweise zum Eingeben des Sichtfelds hergestellt werden. Die Bildlaufelemente in der Eind?mmung wurden gezogen, sodass sie beim Eintritt in das Sichtfeld nicht erneut gezeichnet werden müssen. Wir bekommen also auch einige rollende Optimierungen.

Auch dies ist in der Demo zu sehen. (Screenshots sollten hier eingefügt werden, um die Bildlaufleistung unter verschiedenen Einschlussarten anzuzeigen.)

Eine interessante zuf?llige Entdeckung

Ich hatte ein interessantes Problem, als ich die Demo oben ausprobierte und verstand, wie die Zeichnungs- und Scroll -Leistungsaspekte funktionieren. In einem Test habe ich eine einfache Box in der Mitte der Seite, jedoch mit minimalem Stil. Es ist im Wesentlichen ein Bildlaufelement mit vielen Textinhalten. Ich habe den Inhalt auf die Containerelemente angewendet, aber die oben beschriebenen Scrolling -Leistungsvorteile sahen jedoch nicht.

Der Container ist mit einem "Repaints on Scroll" -Plüfy gekennzeichnet und das Zeichnungsflacker ist der gleiche, als ob das enthaltene nicht angewendet werden, auch wenn ich wei?, dass der Inhalt tats?chlich auf den Container angewendet wird. Also begann ich meine einfachen Tests mit der oben diskutierten stylingreicheren Version zu vergleichen.

Am Ende stellte ich fest, dass wenn background-color des Beh?lters transparent ist, es keinen Einschluss-Scroll-Leistungsvorteil gibt.

Ich habe einen ?hnlichen Leistungstest durchgeführt, bei dem ich die Schriftgr??e des Inhalts ?ndern werde, um das Relayout und die Neuausrichtung auszul?sen. Die Ergebnisse der beiden Tests sind ungef?hr gleich. Der einzige Unterschied besteht darin, dass background-color des ersten Tests transparent ist und background-color des zweiten Tests die entsprechende Farbe ist. Aus den Zahlen sind die Berechnungen hinter den Kulissen noch effizienter; Nur die Plotting -Ereignisse sind unterschiedlich. Es scheint, dass Elemente in der Zeichnungsberechnung mit transparenter background-color nicht zu ihrer eigenen Schicht werden.

Der erste Testlauf hat im Ereignisprotokoll nur ein Ereignis. Der zweite Testlauf hat wie erwartet zwei Handlungsereignisse. Ohne diese Hintergrundfarbe scheint der Browser zu entscheiden, die enthaltenen Ebenenaspekte zu überspringen. Ich fand sogar, dass das Schmieden von Transparenz durch die gleiche Farbe wie die hinter dem Element verwendet wird. Ich vermute, wenn der Hintergrund des Containers transparent ist, muss er nach unten abh?ngen, was es unm?glich macht, den Container in seine eigene Zeichenschicht zu trennen. (Screenshots sollten hier eingefügt werden, um unter transparenten Hintergrundfarben und undurchsichtigen Hintergrundfarben unterschiedliche Ergebnisse anzuzeigen.)

Ich habe eine weitere Version der Testdemo erstellt, die background-color des Containerelements von transparent zu der gleichen Farbe wie die K?rperhintergrundfarbe ver?nderte. Hier sind zwei Screenshots mit den verschiedenen Optionen im "Rendering" -Panel in Devtools. (Screenshots sollten hier eingefügt werden, um unter transparenten Hintergrundfarben und undurchsichtigen Hintergrundfarben unterschiedliche Ergebnisse anzuzeigen.)

Zusammenfassen

In diesem Artikel werden die Grundlagen von CSS contain , einschlie?lich ihrer Werte, Vorteile und potenziellen Leistungsverbesserungen. Die Anwendung dieses Attributs auf bestimmte Elemente in HTML bietet einige Vorteile. Welche Elemente dieses Attribut anwenden müssen, liegt bei Ihnen. Zumindest verstehe ich das, weil ich keine spezifische Anleitung kenne. Die allgemeine Idee besteht darin, es auf Beh?lter anderer Elemente anzuwenden, insbesondere auf dynamische Aspekte.

Einige m?gliche Szenarien: Gitterbereiche des CSS-Netzes, Elemente, die Inhalte von Drittanbietern enthalten, und Container mit dynamischen Inhalten basierend auf der Benutzerinteraktion. In diesen F?llen sollte es keinen Schaden zufügen, diese Eigenschaft zu verwenden, vorausgesetzt, Sie versuchen nicht, ein Element aufzunehmen, das tats?chlich von einem anderen Element au?erhalb davon abh?ngt.

Die Browserunterstützung ist sehr m?chtig. Safari ist der einzige Browser, der derzeit nicht unterstützt wird. Wie auch immer, Sie k?nnen die Eigenschaft weiterhin verwenden, denn wenn der Browser die Eigenschaft oder ihren Wert nicht versteht, überspringt er den Code einfach ohne Fehler.

Fühlen Sie sich also frei, Ihre Inhalte aufzunehmen!

Das obige ist der detaillierte Inhalt vonLassen Sie einen tiefen Eintauchen in die CSS enthalten, die Eigentum enthalten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!