CSS 文本转换“昂贵”吗?

发布于 2024-10-15 02:47:16 字数 1436 浏览 3 评论 0原文

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

久随 2024-10-22 02:47:16

客户端浏览器可能需要更多的处理,但这完全是微不足道的,除非您正在转换页面和文本页面(如果您这样做,那么您就做错了)。

您还需要将 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.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.

时光匆匆的小流年 2024-10-22 02:47:16

如果您正在为移动设备进行设计,那么每一点都会有所帮助。如果不是动态的,则以大写形式输入

If you're designing for mobile, every little bit helps. If it's not dynamic, then type it out in uppercase

那支青花 2024-10-22 02:47:16

我不明白为什么它比任何其他 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 use text-transform?)

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文