It might take a bit more processing from the client's browser, but this will be totally insignificant unless you're transforming pages and pages of text (and if you're doing that, you're doing something wrong).
You also have the overhead of having the CSS property written in your stylesheet (heavier file), but once again it's only a few characters and shouldn't make any difference.
I got curious so I ran some basic benchmarks. On Firefox 3 I displayed a page with 200 paragraphs of Lorem Lipsum.
Rendering it will take between 0.150s to 0.175s
When adding text-transform:none I don't see any significant difference.
When adding text-transform:uppercase it now takes between 0.350s and 0.380s
When adding text-transform:capitalize it now takes between 0.320s and 0.350s
When adding text-transform:lowercase it now takes between 0.320s and 0.350s
So apparently we do have some overheads processing this, but once again I'm capitalizing hundreds of lines and it only costs 0.2s. Therefore if I were you I'd use it without thinking about performance too much unless you want to text-transform huge chunks of text.
I don't see any reason why it should be any more 'expensive' than any other CSS style. All it does is convert a string to upper/lower case, which is hardly the most taxing process a computer can be asked to do.
I'd compare it with displaying in italics or bold; both these styles effectively change the font for the entire string, but you wouldn't consider not using them in case it's processor intensive for the browser, would you?
The only time you could even conceivably think of text-transform as having a hard time would be if you're using a non-latin character set, in which case converting to upper/lower case may not make sense. But you can be pretty sure the brower makers have got that covered. (and in any case, if you're in that position, why would you even want to use text-transform?)
发布评论
评论(3)
客户端浏览器可能需要更多的处理,但这完全是微不足道的,除非您正在转换页面和文本页面(如果您这样做,那么您就做错了)。
您还需要将 CSS 属性写入样式表(较重的文件)中,但同样,它只是几个字符,应该没有任何区别。
我很好奇,所以我运行了一些基本的基准测试。在 Firefox 3 上,我显示了一个包含 200 段 Lorem Lipsum 段落的页面。
渲染将需要 0.150 秒到 0.175 秒
当添加
text-transform:none
时,我没有看到任何显着差异。添加
text-transform:uppercase
时,现在需要在 0.350s 到 0.380s 之间添加
text-transform:capitalize
时,现在需要在 0.350s 到 0.380s 之间>0.320s 和 0.350s当添加
text-transform:lowercase
时,它现在需要 0.320s 和 0.350s 之间所以显然我们确实有一些开销处理这个,但我再次利用了数百行代码,并且只花费了 0.2 秒。因此,如果我是你,我会使用它而不会过多考虑性能,除非你想对大量文本进行文本转换。
It might take a bit more processing from the client's browser, but this will be totally insignificant unless you're transforming pages and pages of text (and if you're doing that, you're doing something wrong).
You also have the overhead of having the CSS property written in your stylesheet (heavier file), but once again it's only a few characters and shouldn't make any difference.
I got curious so I ran some basic benchmarks. On Firefox 3 I displayed a page with 200 paragraphs of Lorem Lipsum.
Rendering it will take between 0.150s to 0.175s
When adding
text-transform:none
I don't see any significant difference.When adding
text-transform:uppercase
it now takes between 0.350s and 0.380sWhen adding
text-transform:capitalize
it now takes between 0.320s and 0.350sWhen adding
text-transform:lowercase
it now takes between 0.320s and 0.350sSo apparently we do have some overheads processing this, but once again I'm capitalizing hundreds of lines and it only costs 0.2s. Therefore if I were you I'd use it without thinking about performance too much unless you want to text-transform huge chunks of text.
如果您正在为移动设备进行设计,那么每一点都会有所帮助。如果不是动态的,则以大写形式输入
If you're designing for mobile, every little bit helps. If it's not dynamic, then type it out in uppercase
我不明白为什么它比任何其他 CSS 样式更“昂贵”。它所做的只是将字符串转换为大写/小写,这几乎不是计算机可以执行的最费力的过程。
我会将其与以斜体或粗体显示进行比较;这两种样式都会有效地更改整个字符串的字体,但是您不会考虑不使用它们,以防它对浏览器来说是处理器密集型的,不是吗?
唯一一次您可能认为文本转换遇到困难的情况是您使用非拉丁字符集,在这种情况下,转换为大写/小写可能不会使感觉。但你可以非常确定浏览器制造商已经解决了这个问题。 (无论如何,如果您处于这种情况,为什么还要使用
text-transform
?)I don't see any reason why it should be any more 'expensive' than any other CSS style. All it does is convert a string to upper/lower case, which is hardly the most taxing process a computer can be asked to do.
I'd compare it with displaying in italics or bold; both these styles effectively change the font for the entire string, but you wouldn't consider not using them in case it's processor intensive for the browser, would you?
The only time you could even conceivably think of
text-transform
as having a hard time would be if you're using a non-latin character set, in which case converting to upper/lower case may not make sense. But you can be pretty sure the brower makers have got that covered. (and in any case, if you're in that position, why would you even want to usetext-transform
?)