Performance bei unterschiedlichem HTML-Code

Mit HTML kann man ja das gleiche Aussehen einer Seite auf unterschiedlichste Art und Weise erreichen. Früher gab es Tables zur Positionierung, heute Divs. Man kann Dinge semantisch korrekt lösen (z.B. für Überschriften <h1> verwenden) oder man regelt einfach alles über CSS. Es gibt viele Wege, die nach Rom führen – doch welche Auswirkungen haben die verschiedenen Varianten auf die Geschwindigkeit der Darstellung?

Da ich gar nicht wüsste, wie ich das objektiv testen soll, überlasse ich das einfach einem anderen Blog 😉
Nee, Spaß beiseite, ich möchte euch einfach den Artikel The Browsers Performance in Dependence of HTML Coding im Blog AJAXLine empfehlen.

Hier nur kurz die Ergebnisse:

  • Es ist schneller position:absolute zu verwenden als position:relative. Ist auch logisch, denn bei absoluter Positionierung sagt man dem Browser genau, wohin das Element soll, während es bei allen anderen Positionierungsarten erst berechnet werden muss.
  • Sehr viele HTML-Elemente auf einer Seite können das Rendering bremsen., aber man sollte erst nachdenken, bevor man irgendwelche Elemente streicht (auch in Richtung Validität). Test erfolgte mit 942 HTML-Elementen (zum Vergleich: die Suchergebnisse bei Google haben 384)
  • Sehr tiefe HTML-Verschachtelungen bremsen ebenfalls. Test erfolgte mit 30 ineinander verschachtelten Elementen.
  • Bilder sollten nicht mit HTML skaliert werden. Die width- und height-Attribute des img-Tags helfen zwar beim Skalieren, aber leider kommen oft auch unschöne Effekte dabei heraus und bremsen tut das ganze auch noch. Besser: Mit PHP skalieren.
  • Das img-Element wird schneller gerendert als die CSS-Eigenschaft background-image.

Wie gesagt, die Erkenntnisse stammen nicht von mir. Wer genaueres zu den Tests lesen möchte, klickt hier.

Jan hat 152 BeitrÀge geschrieben

4 Kommentare zu “Performance bei unterschiedlichem HTML-Code

  1. Marc sagt:

    „Es ist schneller position:absolute zu verwenden als position:relative.“

    Ja, aber wenn man fest stellt, dass auf einmal in anderen Browsern die Positionen anders interpretiert werden oder man durch eine kleine Layout-Änderung _alles_ verschieben muss, oder wenn man merkt, dass ein Text über ein Element hinausfließt, dann ist das nicht mehr so schnell und toll

    „Das img-Element wird schneller gerendert als die CSS-Eigenschaft background-image.“
    Wenn Du damit sagen willst, dass man also statt Backgrounds lieber imgs nehmen soll, dann widerspricht das in vielen Fällen (Aufzählungszeichen, Image-Replacement, etc.) aber der Semantik..

    „an kann Dinge semantisch korrekt lösen (z.B. für Überschriften verwenden) oder man regelt einfach alles über CSS.“
    Cola schmeckt besser als aus dem Glas?!

  2. Buergermaster sagt:

    Bilder sollten nicht mit HTML skaliert werden. Die width- und height-Attribute des img-Tags helfen zwar beim Skalieren, aber leider kommen oft auch unschöne Effekte dabei heraus und bremsen tut das ganze auch noch. Besser: Mit PHP skalieren.

    Mit PHP skalieren?
    Dann geht das über den PHP-Interpreter, und es könnte sogar länger dauern, oder?

    MfG Buergermaster

  3. Jan sagt:

    Sicherlich kostet die Skalierung mit PHP Power, allerdings braucht man ja nur ein einziges mal skalieren und speichert da sskalierte Bild dann einfach auf der Festplatte ab. Später liefert man bei allen folgenden Zugriffen einfach das skalierte Bild aus.

Eine Antwort schreiben

Ihre E-Mail-Adresse wird nicht veröffentlicht. Benötigte Felder sind markiert mit *

You may use these HTML tags and attributes: <a href=""> <blockquote cite=""> <pre lang=""> <b> <strong> <i> <em>