Html5-boilerplate: Agregue `white-space: nowrap` a .visuallyhidden para una representación más rápida

Creado en 6 jul. 2016 · 5Comentarios · Fuente: h5bp/html5-boilerplate

Antes:

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

Después:

.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 (depuración): https://s.codepen.io/tomasz86/debug/pbwQqV

Agregar white-space: no-wrap hace una gran diferencia positiva en la velocidad de renderizado.

Probé el código en IE11, las versiones más recientes de Firefox y Chrome, y también el antiguo Opera 12 (el único navegador con un generador de perfiles CSS adecuado). El código se ejecuta más rápido en todos ellos. Hay una diferencia notable tanto en IE11 como en Firefox. Opera 12 muestra una diferencia de 400 ms entre los dos. Chrome en realidad se cuelga al intentar renderizar la versión sin white-space en mi PC con Windows 7, pero renderiza la otra muy rápidamente.

help wanted

Fuente

tomasz1986

❤2

Todos 5 comentarios

Esta es una mirada muy interesante a la clase visualmente oculta, gracias, Tomasz.

También miré el bolígrafo de James Curd en el clip recto siendo obsoleto y
Posibilidad de reemplazar con clip-path: inset (0 1px 1px 0)
https://codepen.io/aminimalanimal/pen/wMedpo

Los resultados de mi prueba (solo probados en Chrome)

Prueba

Representación

Total:

Línea de base con clip rect

3912ms

2521 m AVG 3027

2649ms

4.85 segundos

3,33 segundos AVG 3,87

3,44 segundos

Agregar espacio en blanco

2590ms

2207ms AVG 2450

2554ms

3,79 segundos

2,98 segundos AVG 3,35

3,29 segundos

Agregue espacios en blanco, elimine el clip rect

2820ms

2424 ms AVG 2520

2317ms

4,32 segundos

3.65 segundos AVG 3.83

3,53

Agregar espacio en blanco, eliminar clip rect, agregar clip-path

* ¡Necesito prefijo de proveedor!

2820ms

1845ms _AVG 2241_

2057ms

4,32 segundos

3.20 segundos _AVG 3.63_

3,37 segundos

Resumen: Hubo un rango bastante amplio dentro de las pruebas individuales. los
La cuarta prueba parecía mejor en Chrome, pero los ahorros para una producción "real"
página que tiene solo un par de elementos ocultos puede que no valga la pena el costo de
cambiando la clase css.

* (¡Encontré que clip-path necesita prefijos del proveedor!)

--Scott Davis--

El miércoles 6 de julio de 2016 a las 4:20 a. M., Tomasz W. [email protected] escribió:

Antes:
.visuallyhidden {
borde: 0;
clip: rect (0 0 0 0);
altura: 1px;
margen: -1px;
desbordamiento: oculto;
acolchado: 0;
posición: absoluta;
ancho: 1px;
}
Después:
.visuallyhidden {
borde: 0;
clip: rect (0 0 0 0);
altura: 1px;
margen: -1px;
desbordamiento: oculto;
acolchado: 0;
posición: absoluta;
espacio en blanco: sin envoltura;
ancho: 1px;
}
Codepen: https://codepen.io/tomasz86/pen/pbwQqV
Codepen (depuración): https://s.codepen.io/tomasz86/debug/pbwQqV
Adición de espacios en blanco: no ajustar hace una gran diferencia positiva en el renderizado
velocidad.
Probé el código en IE11, las últimas versiones de Firefox y Chrome,
y también el antiguo Opera 12 (el único navegador con un generador de perfiles CSS adecuado).
El código se ejecuta más rápido en todos ellos. Hay una diferencia notable tanto
en IE11 y Firefox. Opera 12 muestra una diferencia de 400 ms entre los dos.
Chrome realmente se cuelga al intentar renderizar la versión sin
espacio en blanco en mi PC con Windows 7 pero procesa el otro muy rápidamente.
-
Estás recibiendo esto porque estás suscrito a este hilo.
Responda a este correo electrónico directamente, véalo en GitHub
https://github.com/h5bp/html5-boilerplate/issues/1874 , o silenciar el
hilo
https://github.com/notifications/unsubscribe/ACKY8sYNxXJ6f9HLoTgQIKGkVDcHcnzDks5qS3NOgaJpZM4JF5XK
.

avprod1 en 6 jul. 2016

👍1

Gracias por realizar pruebas adicionales :)

No he considerado clip-path en absoluto simplemente debido a la gran compatibilidad del navegador de clip (¡hasta IE 4!). Puede que esté obsoleto, pero funciona perfectamente en todos los navegadores, lo que no es algo común.

De vuelta al grano: en mis pruebas locales en Opera 12, la diferencia es siempre de alrededor de 400 ms. De hecho, descubrí esto por accidente al probar un ejemplo más de la vida real con 400 pseudo-elementos agregados de esta manera. La representación de los pseudo-elementos en sí es lenta en general, así que me preguntaba si se podría hacer algo al respecto, y me sorprendió gratamente que simplemente agregar white-space: nowrap redujera el tiempo de representación en 40 ms. Puede que no parezca una gran diferencia, pero se nota fácilmente cuando todo el sitio se visualiza en 360 ms (y 320 ms con white-space ).

Es probable que la diferencia sea insignificante en la mayoría de los casos cuando solo estén presentes unos pocos elementos, pero ayudará a personas como yo con cientos de ellos. Tampoco creo que haya desventajas o riesgos al agregar white-space: nowrap . Si el rendimiento se puede mejorar de esta manera sin costos adicionales, ¿por qué no hacerlo?

Creo que deberían realizarse más pruebas, tanto en diferentes navegadores como en sistemas operativos.

tomasz1986 en 7 jul. 2016

👍1

Apoyo este cambio. quieres hacer un PR?