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

Question

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

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

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

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

Answer 1

Edit: I started off pretty much dismissing this discussion as, well, polishing the roof of a truck, but I had not considered css-animations which are quite heavy pocessor users and with CSS not being a graphically optimized process (-very inefficient) then I think there is a slightly higher warrent for such a question, if a website has a large number of css-animations.

引自问题:

I'm under the impression that rem takes longer since it has to revert back to the root and calculate while em is like a steady stream of processing, and px would be the fastest because there's nothing to calculate.

没有。 Rem 只是采用root em value 的一个因子，而不是parent em value。 (因为根没有改变，我希望 CSS 的结构处理不需要一直调用它，而是可以简单地从内存中重新获得它)。

rem 是我们应该在 2016 年编写 CSS 的方式。除了让一个或两个父元素影响 em 值，例如 [从开发人员的 Angular 来看，1.2em of 1.4 em of 1.2 em of 14px 是什么，为什么不只是 1.2 of 14px code> 为 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，如果确实明显更快，页面的重量就会显示出来。