2011-01-31 10 views
7

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"

+0

¿Por qué cree text-transform es caro? ¿Cómo lo midiste? –

+7

No lo dije * era * caro - Acabo de hacer la pregunta ... – Hogsmill

Respuesta

15

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.

+0

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

+0

@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

+0

@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

2

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?)

+1

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

+2

@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í. –

4

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

Cuestiones relacionadas