2011-01-31 2 views
7

ли CSS text-transform дорого в плане обработки? Мне кажется, что браузер вынужден выполнять некоторую работу, которую обычно не нужно (, если вы не преобразовали), но является ли это значительным количеством обработки? Это вообще влияет на производительность?ли CSS текст-преобразование «дорогой»

+0

почему вы думаете, текст-преобразование дорого? Как вы это измерили? –

+7

Я не говорил, что это было * дорого - я просто задал вопрос ... – Hogsmill

ответ

15

Это может потребоваться немного больше обработки из браузера клиента, но это будет совершенно незначительно, если вы не трансформируете страницы и страницы текста (и если вы это делаете, вы делаете что-то не так).

Вы также накладные расходы, имеющие CSS свойство, написанное на таблице стилей (тяжелый файл), но опять же это только несколько символов и не должны иметь никакого значения.


Мне стало любопытно, поэтому я провел несколько базовых тестов. На Firefox 3 я отобразил страницу с 200 параграфами Lorem Lipsum.

Rendering это займет от 0.150s до 0.175s

При добавлении text-transform:none я не вижу существенной разницы.

При добавлении text-transform:uppercase теперь занимает от 0.350s и 0.380s

При добавлении text-transform:capitalize теперь занимает от 0.320s и 0.350s

При добавлении text-transform:lowercase теперь занимает от 0.320s и 0.350s

Таким образом, очевидно у нас есть некоторые накладные расходы по переработке, но еще раз я спекулируя сотни линий, и это стоит всего 0,2 с. Поэтому, если бы я был вами, я бы использовал его, не задумываясь о производительности слишком много, если вы не хотите, чтобы текст преобразовывал огромные куски текста.

+0

Ну, это * * *. Хорошим примером того, почему производительность имеет значение в таблицах стилей, тоже (если вы учитываете кумулятивный аспект). – Boldewyn

+0

@boldewyn Это важно, если вы попытаетесь заглавничать весь текст, но если вы используете его только для «классических» целей, вы не должны беспокоиться об этом – marcgg

+0

@marcgg: Я имею в виду, что он подведет итоги. Многие люди улыбаются в статьях, рассказывающих о неправильном стиле селектора, но, как вы можете видеть, одна строка CSS может удвоить скорость рендеринга. – Boldewyn

2

Я не вижу никаких причин, почему это должно быть больше «дороже», чем любой другой стиль CSS. Все, что он делает, это преобразовать строку в верхний/нижний регистр, что вряд ли является самым налоговым процессом, который компьютер может попросить сделать.

Я бы сравнил его с отображением курсивом или жирным шрифтом; оба эти стили эффективно изменяют шрифт для всей строки, но вы не считаете, что не используете их в случае, если это интенсивный процессор для браузера, не так ли?

Единственный раз, когда вы могли подумать о text-transform, было бы трудно, если вы используете нелатинский набор символов, и в этом случае преобразование в верхний/нижний регистр может не иметь смысла. Но вы можете быть уверены, что производители броузеров покрыли это. (и в любом случае, если вы находитесь в этом положении, зачем вы хотите использовать text-transform?)

+1

Разница между «font-style: italic» и «text-transform-uppercase» заключается в том, что последний должен * изменять * фактические данные символов для отображения. Это не просто выбор другого шрифта, позволяющий рендереру шрифтов выполнять свою работу. – Boldewyn

+2

@Boldewyn Возможно, вы знаете некоторые детали реализации браузеров. Я не знаю релевантных деталей, и я бы предположил, что изменение кода символа будет дешевле, чем изменение шрифта. Изменение шрифта должно было бы ввести какое-то изменение шрифта, возможно, выделяя память. Перезаписывание одного символьного кода выглядит дешевле априори для меня. –

4

Если вы разрабатываете для мобильных устройств, каждый бит помогает. Если это не динамическое, а затем введите его в верхнем регистре

Смежные вопросы