Html5-boilerplate: Fügen Sie `white-space: nowrap` zu .visuallyhidden hinzu, um das Rendern zu beschleunigen

Erstellt am 6. Juli 2016 · 5Kommentare · Quelle: h5bp/html5-boilerplate

Vor:

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

Nach:

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: no-wrap;
    width: 1px;
}

Codepen: https://codepen.io/tomasz86/pen/pbwQqV
Codepen (Debug): https://s.codepen.io/tomasz86/debug/pbwQqV

Das Hinzufügen von white-space: no-wrap macht einen großen positiven Unterschied in der Rendering-Geschwindigkeit.

Ich habe den Code in IE11, den neuesten Versionen von Firefox und Chrome sowie dem alten Opera 12 (dem einzigen Browser mit einem richtigen CSS-Profiler) getestet. Der Code läuft in allen schneller. Es gibt einen deutlichen Unterschied sowohl in IE11 als auch in Firefox. Opera 12 zeigt einen Unterschied von 400 ms zwischen den beiden. Chrome hängt tatsächlich beim Versuch, die Version ohne white-space auf meinem Windows 7-PC zu rendern, rendert die andere jedoch sehr schnell.

help wanted

Quelle

tomasz1986

❤2

Alle 5 Kommentare

Dies ist ein sehr interessanter Blick auf die visuell versteckte Klasse, danke, Tomasz.

Ich habe mir auch James Curds Stift auf Clip-Rect angesehen, der veraltet ist, und
eventuell durch Clip-Pfad ersetzen: inset(0 1px 1px 0)
https://codepen.io/aminimalanimal/pen/wMedpo

Meine Testergebnisse (nur in Chrome getestet)

Prüfen

Rendering

Gesamt:

Grundlinie mit Clip-Rechteck

3912ms

2521m AVG 3027

2649ms

4,85 Sek.

3,33 Sek. AVG 3,87

3,44 Sek.

Leerraum hinzufügen:nowrap

2590ms

2207 ms AVG 2450

2554ms

3,79 Sek.

2,98 Sek. AVG 3,35

3,29 Sek.

Leerraum hinzufügen, Clip-Rechteck entfernen

2820ms

2424ms AVG 2520

2317ms

4,32 Sek.

3,65 Sek. AVG 3,83

3,53

Leerraum hinzufügen, Clip-Rechteck entfernen, Clip-Pfad hinzufügen

*Herstellerpräfix erforderlich!

2820ms

1845ms _AVG 2241_

2057ms

4,32 Sek.

3,20 Sek. _AVG 3,63_

3,37 Sek.

Fazit: Innerhalb der einzelnen Tests gab es eine recht große Spanne. Die
Der vierte Test schien in Chrome am besten zu sein, aber die Einsparungen für eine „echte“ Produktion
Seite, die nur ein paar versteckte Elemente enthält, ist die Kosten möglicherweise nicht wert
CSS-Klasse ändern.

*(Ich habe festgestellt, dass der Clip-Pfad ein Herstellerpräfix benötigt!)

--Scott Davis--

Am Mittwoch, den 6. Juli 2016 um 4:20 Uhr schrieb Tomasz W. [email protected] :

Vor:
.visuell versteckt {
Rand: 0;
Clip: Rechteck(0 0 0 0);
Höhe: 1px;
Rand: -1px;
Überlauf versteckt;
Polsterung: 0;
Position: absolut;
Breite: 1px;
}
Nach:
.visuell versteckt {
Rand: 0;
Clip: Rechteck(0 0 0 0);
Höhe: 1px;
Rand: -1px;
Überlauf versteckt;
Polsterung: 0;
Position: absolut;
Leerzeichen: kein Umbruch;
Breite: 1px;
}
Codepen: https://codepen.io/tomasz86/pen/pbwQqV
Codepen (Debug): https://s.codepen.io/tomasz86/debug/pbwQqV
Hinzufügen von Leerräumen: No-Wrap macht einen großen positiven Unterschied beim Rendering
Geschwindigkeit.
Ich habe den Code in IE11, den neuesten Versionen von Firefox und Chrome, getestet,
und auch das alte Opera 12 (der einzige Browser mit einem richtigen CSS-Profiler).
Der Code läuft in allen schneller. Es gibt einen deutlichen Unterschied bei beiden
im IE11 und Firefox. Opera 12 zeigt einen Unterschied von 400 ms zwischen den beiden.
Chrome hängt tatsächlich, wenn versucht wird, die Version ohne zu rendern
Leerraum auf meinem Windows 7-PC, rendert den anderen jedoch sehr schnell.
—
Sie erhalten dies, weil Sie diesen Thread abonniert haben.
Antworten Sie direkt auf diese E-Mail und zeigen Sie sie auf GitHub an
https://github.com/h5bp/html5-boilerplate/issues/1874 oder stummschalten
Gewinde
https://github.com/notifications/unsubscribe/ACKY8sYNxXJ6f9HLoTgQIKGkVDcHcnzDks5qS3NOgaJpZM4JF5XK
.

avprod1 am 6. Juli 2016

👍1

Vielen Dank für die Durchführung zusätzlicher Tests :)

Ich habe clip-path einfach wegen der großartigen Browserkompatibilität von clip (bis zu IE 4!) überhaupt nicht in Betracht gezogen. Es ist möglicherweise veraltet, funktioniert jedoch in allen Browsern einwandfrei, was nicht üblich ist.

Zurück zum Punkt - in meinen lokalen Tests in Opera 12 beträgt der Unterschied immer etwa 400 ms. Ich habe dies zufällig herausgefunden, als ich ein realistischeres Beispiel mit 400 auf diese Weise hinzugefügten Pseudoelementen getestet habe. Das Rendern von Pseudoelementen selbst ist im Allgemeinen langsam, daher habe ich mich gefragt, ob man etwas dagegen tun kann, und war angenehm überrascht, dass das einfache Hinzufügen von white-space: nowrap die Renderzeit um 40 ms reduzierte. Es mag nicht wie ein großer Unterschied erscheinen, ist aber leicht zu erkennen, wenn die gesamte Site in 360 ms gerendert wird (und 320 ms mit white-space ).

Der Unterschied wird in den meisten Fällen wahrscheinlich unbedeutend sein, wenn nur wenige Elemente vorhanden sind, aber er wird Leuten wie mir mit Hunderten von ihnen helfen. Ich glaube auch nicht, dass das Hinzufügen von white-space: nowrap Nachteile oder Risiken mit sich bringt. Wenn die Leistung auf diese Weise ohne zusätzliche Kosten verbessert werden kann, warum nicht?

Ich denke, dass mehr Tests durchgeführt werden sollten, sowohl in verschiedenen Browsern als auch in verschiedenen Betriebssystemen.

tomasz1986 am 7. Juli 2016

👍1

Ich unterstütze diese Änderung. willst du eine PR machen?