大小单位之间的速度测试:rem、em 和 px

Tim*_*Kay 6 css performance paint font-size

是否有任何证据表明特定尺寸单位需要更长时间来处理?例如,如果您要调整rem整个网站的大小,是否会比给所有内容都指定一个特定px值需要更长的时间来计算/绘制页面?

max-width: 16rem超过有什么好处max-width: 250px吗?

我的印象是rem需要更长的时间,因为它必须恢复到根并计算 whileem就像一个稳定的处理流,并且px是最快的,因为没有什么可计算的。

请让我知道是否有人有任何证据表明哪种方法更快

Mar*_*tin 5

编辑:我一开始几乎忽略了这个讨论,因为,嗯,抛光卡车的车顶,但我没有考虑过 css 动画,它们是相当重的处理器用户,并且 CSS 不是一个图形优化的过程(非常低效)。我认为,如果一个网站有大量的 CSS 动画,那么这个问题的合理性就稍高一些。

引用问题:

我的印象是,它rem需要更长的时间,因为它必须恢复到根并计算em,而就像一个稳定的处理流,而 px 将是最快的,因为没有什么可计算的。

不。Rem 只是取 的因数root em value,而不是 的因数parent em value(由于根没有改变,我希望CSS的结构处理不需要继续调用它,而可以简单地从内存中重新获得它)

remem这是我们在 2016 年编写 CSS 的方式。它比一两个影响值的父元素更胜一筹,em例如[从开发人员的角度来看是什么1.2em of 1.4 em of 1.2 em of 14px,为什么不直接使用1.2 of 14pxas 1.2rem] 。

至于px,这也不是直接到屏幕的结果,就像许多现代显示设备一样,像素不是像素,这可能是您阅读的一个有趣的主题

如果您关心处理速度,rem那么px我个人认为您实际上是在尝试通过抛光车顶以减少空气阻力来提高卡车的燃油效率,您的工作可能会产生微小的影响,但还有其他远大的影响GPU、CPU 内存和操作能力的更大消费者,等等。

您可能还想阅读:CSS 像素大小是如何计算的?

因为我想让您开心,您可能想知道您现在可以生成完全通过 CSS 开发的完整 3D 计算机游戏关卡。这是2013年做的!我还是觉得不可思议!!

在这款游戏中,开发者px自始至终都使用了。您也许可以采用他的代码并应用em和/或rem,如果页面确实明显更快,则会显示页面的重量。