Was rendert schneller?
// Just HTML
<div id="holder">
<div style="float:left;">test1</div>
<div style="float:left;">test2</div>
<div style="float:left;">test3</div>
</div>O
// CSS
#holder div{
float:left;
}
// HTML
<div id="holder">
<div>test1</div>
<div>test2</div>
<div>test3</div>
</div>Was die tatsächliche Anzeige von Inhalten betrifft, so sind die Geschwindigkeitsunterschiede zwischen den beiden Codeabschnitten vernachlässigbar. Unterschiedliche Browser haben höchstwahrscheinlich unterschiedliche Implementierungen für das Rendering einer Webseite, so dass der winzige Geschwindigkeitszuwachs, den Sie mit einem Browser erhalten, sich nicht unbedingt in einem anderen widerspiegeln wird.
Was die Ladezeiten betrifft, so sieht es anders aus. Ja, Inline-Stile sind technisch gesehen schneller als ein externes Stylesheet, weil Sie eine Anfrage weniger auf der Seite stellen, aber die Verwendung eines externen Stylesheets ist aus Gründen der Wartbarkeit des Codes viel besser. Erst wenn Sie mehrere Stylesheets laden, wird die Leistung zum Problem, da der Browser jedes Mal, wenn Sie auf ein neues Stylesheet verweisen, eine weitere Anfrage stellen muss. Die Lösung? Verketten Sie Stylesheets einfach zu einem einzigen.
Wenn es sich um Hunderte von Kb (oder Mb) HTML mit Inline-Styling handeln würde, wäre das eine andere Sache.
Ich könnte mir vorstellen, dass (aufgrund der involvierten HTTP-Anfrage) externes CSS langsamer sein würde sondern Inline-Stile sind schrecklich für die Wartbarkeit und negieren den ganzen Sinn von CSS, der darin besteht, Werte für Farbe und Layout zu zentralisieren, damit man nicht jedes Element durchgehen muss, um einen Stil zu ändern.
Siehe auch este
@WaqasRaja Ich glaube nicht, mehrere http-Streams profitieren nur von Subdomains/Cookie-losen Domains - da wir nicht wissen, welche Bilder usw. auf der Seite sind, ist es sicherer anzunehmen, dass externe Streams geringfügig (wenn auch vernachlässigbar) langsamer sind. Ich glaube, dass die gesamte Seite vom Browser gerendert wird (vom Layout her, dann wird sowieso CSS angewendet)
@Myles, haben Sie bemerkt, warum der Download-Beschleuniger schneller ist. Nur wegen der mehreren Streams
Selbst wenn Sie davon ausgehen, dass Sie kein externes Stylesheet verwenden wollen, wird die Verwendung eines Style-Tags im <head> mit Klassen für die Elemente später eine automatische Einbindung mit einer serverseitigen Programmiersprache erleichtern, anstatt Dutzende von Inline-Styles zu haben. Sofern Sie nicht eine triviale Anzahl von Stilen haben, wird auch die Gesamtanzahl der Bytes geringer sein.
Schauen Sie sich die neue 404-Seite von Google an: Sie haben sogar die Bilder im Style-Tag:
Beim Browsen sollte es keine Unterschiede geben. Sie können dies mit den Entwickler-Tools der Browser testen. Abgesehen von der bereits in anderen Antworten erwähnten Wartbarkeit des Codes stellt sich auch die Frage der Spezifität von Inline-Regeln. Da sie die höchste Spezifität haben (1,0,0,0), würden sie alle anderen Kaskaden außer Kraft setzen. Sie sollten also Ihren Anwendungsfall sorgfältig prüfen, anstatt die Entscheidung auf der Grundlage von Leistungskriterien zu treffen.
CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.
2 Stimmen
Beide werden ziemlich schnell sein. Wenn Sie wegen der Optimierung fragen, sollten Sie irgendwo anders optimieren.
0 Stimmen
Ich denke, der Code mit den Inline-Styles sollte ein paar Mikrosekunden schneller rendern...
0 Stimmen
Die winzigen Sekundenbruchteile, die Sie durch die Verwendung von Inline-Stilen gewinnen können, werden durch die Zeit, die Sie verlieren, wenn Sie Stiländerungen an mehreren Stellen vornehmen müssen, um ein Vielfaches (viel, viel, viel...) übertroffen. Tun Sie sich das nicht an.
0 Stimmen
@galador Nur um das klarzustellen, ich war sarkastisch
:). Mikrosekunden-Intervalle können von Menschen nicht registriert werden = es gibt keinen Gewinn.0 Stimmen
@Sime Hmm, ich habe mich nicht speziell an Sie gewandt, sondern eine allgemeine Aussage gemacht. Obwohl ich sehe, dass es leicht ist, es so zu interpretieren :-)
0 Stimmen
Glauben Sie mir, wenn Sie genug Mikrosekunden stapeln, werden Sie es merken.