尺寸单位之间的速度测试：rem、em 和 px答案

【问题标题】：Speed test between size units: rem, em and px尺寸单位之间的速度测试：rem、em 和 px
【发布时间】：2016-07-24 17:18:49
【问题描述】：

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

max-width: 16rem 比 max-width: 250px 有什么好处吗？

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

如果有人有任何证据证明哪种方法更快，请告诉我

【问题讨论】：

差异绝对可以忽略不计。为什么关心？在 CPU、GPU、浏览器/服务器操作系统、RAM、带宽和一般网站使用方面还有很多紧迫的问题。
创建一个使用rem / % 和一个专门使用px 的重页。使用 Chrome 的检查器。我敢打赌，对于 px 来说，计算 painting 过程可能会更快 :)
感谢@RokoC.Buljan，我已经尝试过了，但结果不一致。猜它不够重或元素嵌套不够深。
@TimMcKay 这是一个非常棒的问题，老实说，我从来没有在喝过咖啡的时候想到过这个问题...但是从常识来看，我相信使用响应式单位可能会花费更多的计算、像素、亚像素等......随着时间的推移，我会尝试更深入地研究它。
@Martin 我创建了大量使用rem 的网站，它减慢了创建的css 动画，这让我认为rem 需要更长的处理时间。

标签： css performance paint font-size

【解决方案1】：

编辑：我一开始几乎不理会这个讨论，因为，抛光卡车的车顶，但我没有考虑过 css 动画这是相当重的处理器用户，并且 CSS 不是图形优化的过程（-非常低效）然后我认为对于这样的问题，略更高的警告，如果有大量的 css 动画。

引用问题：

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

没有。 Rem 只取root em value 的一个因子，而不是parent em value。 （由于根没有改变，我希望CSS的结构处理不需要一直调用它，而可以简单地从内存中恢复它）。

rem 是我们应该在 2016 年编写 CSS 的方式。它击败了 em 中的灯光，除了有一个或两个影响 em 值的父元素之外，例如 [从解决问题的角度来看作为开发人员，1.2em of 1.4 em of 1.2 em of 14px 是什么，为什么不将1.2 of 14px 用作1.2rem]。

至于px，这也不是直接显示在屏幕上的结果，就像许多现代显示设备一样，像素不是像素，this may be an interesting topic for you to read。

如果您关心 rem 与 px 的处理速度，那么我个人认为您实际上是在尝试通过抛光车顶以降低空气阻力来提高卡车的燃油效率，您的工作可能有微小的影响，但还有其他更大的 GPU、CPU 内存和运行能力消费者，而且还有更多。

您可能还想阅读以下内容：How a CSS pixel size is calculated?

因为我想娱乐你，你可能想知道you can now generate full 3D computer game levels developed entirely through CSS。这是2013年制作的！ 我还是觉得不可思议！！

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

【讨论】：

感谢@Martin，这很有帮助。特别喜欢你的燃油效率类比。哈哈。你对Chris Coyier's modular font-sizing 有什么看法？您的root em value 解释清楚地说明了问题。感谢像素大小计算链接。感觉会很有趣。我想这更多的是关于编写更好的 css 并想知道这会对页面的大小产生影响，但我对 css 动画的评论可能更多地是关于如何处理 css 过渡/动画而不是计算 rems。再次感谢
@TimMcKay Keith Clark 的游戏令人难以置信。我真的建议检查一下。并意识到您正在查看的是与 StackOverflow 运行时使用的相同或更简单的技术！
@TimMcKay 回复：您的 Chris Coyier 链接，我认为您应该仅使用 em 作为字体，如果您知道父大小（以 px 为单位）并且您确切知道你想要的那个尺寸的百分比。在我看来，font-size 是rem 独树一帜的领域之一。至于他的想法，我接受它们作为想法，但老实说，我会更容易调整（已经准备好的）媒体查询中的大小/比例，这些查询无论如何都位于 CSS 中以实现移动兼容性。