Externer Leistungsunterschied zwischen CSS und Inline-Stil?

85

Ein Freund von mir sagte, dass die Verwendung <div style=""></div>einer komprimierten CSS-Datei, die wie link hrefim Kopfbereich abgelegt wird, eine gewisse Leistungssteigerung bringt. Ist das wahr?

css performance inline-styles George
quelle
1
Soweit ich weiß, sind sie (ungefähr) gleich, aber ich kann das nicht überprüfen.
Nightfirecat
3
Dies könnte etwas Licht ins Dunkel bringen
Sudhir Bastakoti
1
Es müsste eine erhebliche Leistungssteigerung sein, um mit den Albträumen der Instandhaltung fertig zu werden. Bisher habe ich keine Beweise dafür gesehen.
Steveax
1
Für ältere Versionen von IE ist die Leistungssteigerung SEHR signifikant. Ich habe gesehen, dass sich HTML-Tabellen mit CSS-Stil wie Klebstoff verhalten.
Jonathan

Antworten:

87

Die von Ihrem Freund erwähnte Leistungssteigerung ist wahrscheinlich zu trivial im Vergleich zur Leistungssteigerung (durch andere Faktoren) bei Verwendung einer CSS-Datei.

Mit dem style-Attribut malt der Browser nur die Regel für das jeweilige Element, in diesem Fall das <div>Element. Dies reduziert die Suchzeit für die CSS-Engine, um herauszufinden, welche Elemente mit dem CSS-Selektor übereinstimmen (z . B. a.hoveroder #someContainer li).

Wenn Sie das Styling jedoch auf Elementebene setzen, können Sie die CSS-Stilregeln nicht separat zwischenspeichern. Normalerweise ermöglicht das Einfügen von Stilen in CSS-Dateien das Zwischenspeichern, wodurch die Belastung des Servers bei jedem Laden einer Seite verringert wird.

Wenn Sie Stilregeln auf Elementebene einfügen, verlieren Sie auch den Überblick darüber, welche Elemente auf welche Weise gestaltet wurden. Dies kann auch zu einer Leistungssteigerung beim Malen eines bestimmten Elements führen, bei dem Sie mehrere Elemente zusammen neu streichen können. Durch die Verwendung von CSS-Dateien wird das CSS von HTML getrennt, sodass Sie sicherstellen können, dass Ihre Stile korrekt sind und später leichter geändert werden können.

Wenn Sie sich den Vergleich ansehen, werden Sie feststellen, dass die Verwendung einer CSS-Datei viel mehr Vorteile bietet als das Stylen auf Elementebene.

Nicht zu vergessen, wenn Sie eine externe CSS-Stylesheet-Datei haben, kann Ihr Browser die Datei zwischenspeichern, was Ihre Anwendungseffizienz erhöht!

Mauris
quelle
3
Können Sie Statistiken mit Chrome Profiler bereitstellen? CPU und GPU sind auf Mobilgeräten und Tablets teuer, wo der Batterieverbrauch enorme Kosten verursacht. Ich denke, es gibt einen Kompromiss. Und was ist der Vorteil von Cache? Der Browser muss den Stil für das aktuelle Element berechnen, und das Auflösen von Stilen ist teurer, wenn viele Regeln vorhanden sind.
Akash Kava
27
Beachten Sie, dass alle Nachteile im Zusammenhang mit der Wartung verschwinden, wenn es eine Engine gibt, die die Stile vor dem Senden an Kunden
inline
5
Die mit der Wartung verbundenen Nachteile verschwinden auch bei Verwendung von React + Radium.
AjaxLeung
1
@ AjaxLeung Kein Zweifel, was Sie und Shaham gesagt haben, ist wahr. Diese Antwort wurde 2011 geschrieben, als die meisten modernen Tools noch nicht verfügbar waren.
Mauris
2
Ja. Ich habe einfach den Kommentar für diejenigen hinzugefügt, die diese Antwort heute und darüber hinaus sehen.
AjaxLeung
7

Die Seite wird schneller geladen, wenn Sie Inline-Stile im Vergleich zu Stylesheets verwenden. In einigen Fällen muss schneller.

Wenn Sie ein Stylesheet mit href verwenden, ist eine weitere Anforderung an den Server erforderlich, und das Parsen der Datei nach der Antwort. Bei Inline-Stilen gibt es nichts davon, nur direktes Parsen.

Wenn ein Client über ein langsames Internet verfügt, kann diese einzelne Anforderung sehr langsam sein und die Seite ohne Stil lassen, bis das Stylesheet geliefert wird. Wenn es inline wäre, würde es überhaupt keine Verzögerung geben.

Der einzige Grund, warum wir Stylesheets verwenden, ist die Organisation. Es gibt Zeiten, in denen sie nicht benötigt werden, sodass Inline-Stile oder In-Document-Stylesheets ausreichen.

Sebjwallace
quelle
7
Diese Antwort ignoriert das Browser-Caching vollständig. Stylesheets ermöglichen es, die Styles nur einmal anzufordern und zwischenzuspeichern, wodurch die Menge des über die Leitung gesendeten Inhalts verringert wird.
GeekOnCoffee
Diese Antwort ignoriert auch die Tatsache, dass Inline-Stile die HTML-Datei größer machen. Potenziell, insbesondere bei wiederholtem Inline-Styling, mehrmals größer als eine CSS-Datei. Übrigens können Browser mehrere Dateien parallel laden (und wie oben erwähnt zwischenspeichern).
Jan Van der Haegen
3

Die Beantwortung dieser Frage ist nicht einfach, da die Leistung in diesem Fall von vielen Faktoren abhängt (Komplexität der CSS-Selektoren, Dokumentgröße usw.). Wenn wir jedoch einen Einzelfall betrachten, können wir sehen, dass die CSS-Klasse im Allgemeinen schneller ist als der Inline-Stil:
Inline-Stil vs. CSS-Klasse

s.ermakovich
quelle
4
Ziemlich sicher, dass dies die Geschwindigkeit testet, mit der die Knotenklasse oder das Stilattribut geändert wird, und nicht die Geschwindigkeit, mit der der Stil angewendet wird, was die Frage stellt
Sam
@Sam Was meinst du mit der "Geschwindigkeit, mit der der Stil angewendet wird"? Können Sie einen Test bereitstellen, der diese Geschwindigkeit misst? Wenn Sie sich den Testcode ansehen, werden Sie feststellen, dass bei jeder Iteration ein Seitenrückfluss auftritt. Dies bedeutet, dass der Test nicht nur die Änderung von Klassen / Attributen, sondern auch die tatsächlichen Auswirkungen auf die Seite abdeckt.
s.ermakovich
Es enthält möglicherweise die Zeit zum Hinzufügen des Stils, aber auch die Zeit. Was wäre, wenn das Dokument bereits den Klassentest oder einen Inline-Stil hätte, ohne dass JS ihn hinzufügen müsste? Ich komme in beiden Fällen auf die Geschwindigkeit, mit der das CSS gelöst werden kann, und (ich könnte mich irren), aber ich glaube nicht, dass dieser Test genau das tut, ich denke, dass er zusätzliche Arbeit leistet.
Sam
@Sam Bei diesem Test wird der mögliche Fußabdruck beim Laden und Verarbeiten von CSS durch den Browser ignoriert. Ich erwähnte in meiner Antwort, dass dies ein Einzelfall ist. Es misst lediglich die Leistung beim Anwenden von Stilen auf unterschiedliche Weise (Inline vs. Extern). Dies ist, was typische Webanwendungen heute tun - HTML-Dokument von JavaScript ändern, ohne die Seite neu zu laden.
s.ermakovich
Ah OK, ich bezog mich auf nicht dynamisch hinzugefügte Stile
Sam
3

Nun, es kann, aber der Grund für das verknüpfte oder externe Stylesheet ist, dass es im Browser zwischengespeichert werden kann, insbesondere wenn Sie dasselbe div auf mehreren Seiten für die Site verwenden. Dies bedeutet, dass der Browser das Stylesheet nur einmal laden muss, anstatt den Code jedes Mal neu laden zu müssen, wenn der Browser die Seite neu lädt. Es sorgt auch für saubereren Code, der Änderungen oder das Debuggen erleichtert.

eciusr
quelle
3
Es ist die Essenz des Caching-Mechanismus. Es braucht keine Beweise.
Stroncium
5
Es kann "eingelöst" werden, was nicht bedeutet, dass es "eingelöst" ist. und "Essenzen" sind keine Fakten.
Ivan Castellanos
6
Leute, es ist keine Herzog-Nukem-Ära mehr, wir kassieren keine Leute mehr. Cache auf der anderen Seite ...
Sebas
3
Das Caching-Argument gilt nicht für Anwendungen mit nur einer Seite, bei denen im Allgemeinen alles einmal im Voraus geladen wird und Seiten im laufenden Betrieb generiert werden.
MindJuice
1

Die Wahrheit ist "Ja"

Es gibt einen großen Unterschied. Besonders wenn Sie die Benutzeroberfläche automatisieren. Versuchen Sie den folgenden Code. Ich benutze IE10 und Notepad, um zu entwickeln. Ich lerne, während ich Tests mache. Dies ist ein verkürzter Versionstest. (Es gibt möglicherweise Fehler, da ich den Code reduziert habe, um Ihre Antwort anzuzeigen.)

Klicken Sie auf das Bild, auf das Sie verweisen, und lesen Sie die Warnmeldungen. TIPP: Speichern Sie diese Datei und speichern Sie sie erneut als Bearbeitung, bevor Sie sie bearbeiten (testen).

Beste Wünsche, Don

<!DOCTYPE html>
  <head>
    <style>
      div.grid
        {
        width:180px;
        height:42px;
        border:none;
        }
      img
        {
        width:50px;
        height:50px;
        margin:2px;
        float:left;
        border: 1px solid red;
        }
    </style>
    <script>
      function handleSelect(xId)
        {
        //
        // TESTPOINT
        alert("TESTPOINT\r>Grid: " + xId);
        //
        // GET BORDER COLOR
        // NOTE: An empty or blank value when you can see a border means the tag itself does not
        //            have 'border properties' (style="border: 2px{width} solid{style} green{color}").
        //            although there can be a border detailed via css local or external or via code (script).
        //            If the 'border properties' are returned then they were setup at the tag as
        //            above or the 'border properties' were updated by script code not css code.
        //            If the 'border properties' are NOT returned then they were setup via css.
        //            Thus, since everything seems to be heading toward edit on the fly (live) then css is NOT the way to go (learning).
        // HINT: Margin property is also not readable if set via css. Most likely all the properties values are the same way.
        //           Thus, setting the property values of a tag should be set at the tag control.
        // (works) cBorder=document.getElementById(xId).style.borderWidth;
        // (works) cBorder=document.getElementById(xId).style.borderStyle;
        // (works) cBorder=document.getElementById(xId).style.borderColor;
        // (works) cBorder=document.getElementById(xId).style.border;
        //cBorder=document.getElementById(xId).style.border;
        cBorder=document.getElementById(xId).style.margin;
        alert("TESTPOINT\r>Grid: " + xId + "\r>Border: " + cBorder);
        //
        // SELECT IMAGE
        document.getElementById(xId).style.margin="1px";
        document.getElementById(xId).style.border="2px solid gold";
        document.getElementById(xId).innerHTML=xId;
        alert("TESTPOINT\r>Grid: " + xId + "\r>Border: " + cBorder + "\r>[set border color gold]");
        //
        // GET BORDER COLOR
        //var cBorder=document.getElementById(xId).style.border-Color;  //Error
        //var cBorder=document.getElementById(xId).style.border-color;  //Error
        //var cBorder=document.getElementById(xId).style.borderColor;   //Error
        //var cBorder=document.getElementById(xId).style.bordercolor;   //Undefined
        cBorder=document.getElementById(xId).style.border;      //Empty
        alert("TESTPOINT\r>Grid: " + xId + "\r>Border: " + cBorder + "\r>[set border color gold]" + "\r>Border: " + cBorder);
        }
    </script>
  </head>

  <body>
    <div class="grid">
      <img style="border: 2px solid green" id="R0C0" src="someimage.bmp" onclick="handleSelect(id)">
      <img style="border: 2px solid blue" id="R0C1" src="someimage.bmp" onclick="handleSelect(id)">
      <img style="border: 2px solid purple" id="R0C2" src="someimage.bmp" onclick="handleSelect(id)">
    </div>
    <div class="grid">
      <img id="R1C0" src="someimage.bmp" onclick="handleSelect(id)">
      <img id="R1C1" src="someimage.bmp" onclick="handleSelect(id)">
      <img id="R1C2" src="someimage.bmp" onclick="handleSelect(id)">
    </div>
    <div class="grid">
      <img id="R2C0" src="someimage.bmp" onclick="handleSelect(id)">
      <img id="R2C1" src="someimage.bmp" onclick="handleSelect(id)">
      <img id="R2C2" src="someimage.bmp" onclick="handleSelect(id)">
    </div>
  </body>
</html>
Don
quelle
26
Ich benutze IE10 und Notepad, um zu entwickeln. ?
Xanderiel
0

Meiner Meinung nach gibt es keine feste Antwort.

A inline CSSwird schneller geladen, wenn die Größe des CSS-Inhalts schneller heruntergeladen wird, als Ihr Server auf eine external CSS fileAnfrage antworten würde (unter Berücksichtigung der DNS-Zeit, der Serverlatenz usw.).

Bei normalem CSS würde ich sie in die Seite einbinden, bei etwas über 15-20 KB würde ich sie wahrscheinlich in eine externe Datei einfügen und sicherstellen, dass sie zwischengespeichert werden kann.

Ich bin mir sicher, dass mir noch viele andere Überlegungen fehlen, aber es gibt keine feste Antwort für Inline oder Extern.

adrianTNT
quelle
-1

Die Verwendung externer Stylesheets ist definitiv eine bessere Option, da Sie sich so besser an den Stil erinnern können, den Sie auf die Divs angewendet haben. Dies verkürzt die Ladezeit der Seite, da sie umso schneller geladen wird, je geringer der HTML-Code ist.

In einigen Fällen müssen Sie jedoch möglicherweise eine Eigenschaft eines bestimmten Div ändern, dann ist der Inline-Stil die beste Option. Und wirklich, ein oder zwei Inline-Stile ändern nichts an der Zeit, zu der die Seite geladen wird.

Es gibt eine andere Option für das interne Stylesheet, die jedoch nur verwendet wird, wenn Sie eine einzelne Seitenwebsite haben, z. B. wenn Sie eine Vorlage erstellen. Dies liegt daran, dass Sie in jede HTML-Seite CSS schreiben müssen

vicky
quelle
-3

Ich bevorzuge die Verwendung von Inline-CSS gegenüber externem CSS, bei dem für jedes andere Element oder Bild mehrere kleine CSS-Dateien vorhanden sind. Es macht keinen Sinn, mehrere CSS-Dateien mit jeweils nur 5-10 Codezeilen herunterzuladen. Wenn Ihr Element Eigenschaften wie Hover, Aktiv, Aktiviert usw. enthält, sollten Sie eine externe CSS-Datei verwenden, um Ihren Entwicklungsprozess nicht zu komplizieren.

atuls1396
quelle
Das macht die Wartung extrem schwierig. CSS- und JS-Dateien sollten standardmäßig im Browser Ihres Benutzers zwischengespeichert werden.
Dave2118