usa CSS text-transform
costoso en términos de procesamiento? Me parece que el navegador se ve obligado a hacer un trabajo que normalmente no necesitaría (si no se transformó), pero ¿es una cantidad significativa de procesamiento? ¿Afecta el rendimiento en absoluto?usa CSS text-transform "cara"
Respuesta
Puede tomar un poco más de procesamiento desde el navegador del cliente, pero esto será totalmente insignificante a menos que esté transformando páginas y páginas de texto (y si lo hace, está haciendo algo mal).
También tienen la sobrecarga de tener la propiedad CSS escrito en la hoja de estilos (archivo más pesado), pero una vez más que es sólo unos pocos caracteres y no debe hacer ninguna diferencia.
Me puse muy curioso, así que ejecuté algunos puntos de referencia básicos. En Firefox 3 mostré una página con 200 párrafos de Lorem Lipsum.
representación se tardará entre 0.150s a 0.175s
Al añadir text-transform:none
no veo ninguna diferencia significativa.
Al añadir text-transform:uppercase
ahora tarda entre 0.350s y 0.380s
Al añadir text-transform:capitalize
ahora tarda entre 0.320s y 0.350s
Al añadir text-transform:lowercase
ahora tarda entre 0.320s y 0.350s
Así que al parecer tenemos algunos gastos generales de procesamiento de esto, pero una vez más estoy capitalizando cientos de líneas y solo cuesta 0.2s. Por lo tanto, si yo fuera tú, lo usaría sin pensar demasiado en el rendimiento a menos que quieras transformar textos en grandes cantidades de texto.
Bueno, eso * es * significativo. Un buen ejemplo de por qué el rendimiento también importa en las hojas de estilo (si se tiene en cuenta el aspecto acumulativo). – Boldewyn
@boldewyn Es significativo si intentas escribir en mayúsculas todo el texto, pero si solo lo usas para propósitos "clásicos", no deberías preocuparte por ello – marcgg
@marcgg: Lo que quiero decir es que se resumirá. Muchas personas sonríen a los artículos que hablan sobre el mal estilo de selector, pero como puede ver, una sola línea de CSS puede duplicar la velocidad de representación. – Boldewyn
No veo ninguna razón por la que debería ser más 'cara' que cualquier otro estilo CSS. Todo lo que hace es convertir una cadena en mayúscula/minúscula, que no es el proceso más exigente que se le puede pedir a una computadora.
Me comparo con la visualización en cursiva o negrita; Ambos estilos cambian de manera efectiva la fuente de toda la cadena, pero no considerarías no usarlos en caso de que sea un procesador intensivo para el navegador, ¿o sí?
El único momento en el que podría pensar que text-transform
es difícil sería si está utilizando un conjunto de caracteres no latinos, en cuyo caso la conversión a mayúsculas/minúsculas puede no tener sentido. Pero puede estar bastante seguro de que los fabricantes de navegadores lo han cubierto. (y en cualquier caso, si estás en esa posición, ¿por qué querrías usar text-transform
?)
La diferencia entre 'font-style: italic' y' text-transform-uppercase' es que este último debe * cambiar * los datos de caracteres reales que se mostrarán. No es solo seleccionar una fuente diferente y dejar que el renderizador de fuentes haga su trabajo. – Boldewyn
@Boldewyn Quizás conozca algunos detalles de implementación de navegadores. No conozco detalles relevantes, así que habría supuesto que cambiar el código de un personaje es más barato que cambiar la fuente. Cambiar la fuente tendría que introducir algún tipo de cambio de fuente, probablemente asignando memoria, en primer lugar. Sobrescribir un código de un solo carácter parece más económico a priori para mí. –
Si estás diseñando para dispositivos móviles, todo ayuda. Si no es dinámica, a continuación, escriba a cabo en mayúsculas
- 1. CSS font-cara con las fuentes árabes
- 2. cara de fuente de Internet Explorer ssl
- 3. Reconstrucción cara 3D
- 4. ¿Cómo se usa menos css con django?
- 5. Detección de cara de ActionScript
- 6. Girar cara en la imagen
- 7. c reconocimiento de la cara #
- 8. Ray y cara 3D Intersección
- 9. Eliminación de cara posterior + GL_TRIANGLE_STRIP?
- 10. de saltos de página para la impresión a doble cara en HTML y CSS
- 11. ¿Por qué AppHarbor + RequireHttpsAttribute igual frowny cara :(
- 12. ¿Detección de la cara en Android?
- 13. @ problema de fuentes cara con font-weight en Safari
- 14. ¿Hay una visibilidad de la cara posterior equivalente para three.js?
- 15. ¿Para qué se usa la alineación vertical en CSS?
- 16. ¿Por qué Google usa JavaScript y CSS en línea?
- 17. ¿Qué CSS de restablecimiento de HTML5 usa y por qué?
- 18. Ancho mínimo, ancho máximo css usa el ancho más pequeño
- 19. CSS-Redundancia cuando se usa LESS y su @import
- 20. CSS: ¿Cómo eliminar adecuadamente el borde usando CSS cuando se usa border-radius?
- 21. Cómo cambiar el color de la cara en Three.js
- 22. ¿Hay una clase de pila de doble cara en .net?
- 23. Obtener cara de fuente bajo el cursor en Emacs
- 24. android: apague la pantalla cuando está cerca de la cara
- 25. C# - Detectar imagen de la cara y el recorte
- 26. ¿Por qué la paginación es tan cara a los recursos?
- 27. (¿Por qué) la reflexión es tan cara en .Net?
- 28. Cómo incluir JavaScript en un sitio web de cara pública?
- 29. Manera rápida de seleccionar la cara cubmap en GLSL
- 30. Problema de detección de la cara con CIDetector
¿Por qué cree text-transform es caro? ¿Cómo lo midiste? –
No lo dije * era * caro - Acabo de hacer la pregunta ... – Hogsmill