CSS calc 中的数学是否比 JS 中的数学快？答案

【问题标题】：Is math in CSS' calc faster than math in JS?CSS calc 中的数学是否比 JS 中的数学快？
【发布时间】：2019-02-01 19:34:20
【问题描述】：

例如，如果我想以 60fps 更新 CSS 值，在 JS 中执行 setCSS(i * 10 + 'px') 或 cssproperty: calc(10px * var(--i)) 之类的操作会更快吗？

【问题讨论】：

差异可能微不足道，以至于您可能会因编写此问题所花费的时间而失去找到答案的任何好处。因为您提到了 60fps，所以听起来您关心的动画性能不是很好。如果是这种情况，请查看使用 css translate 属性。某些东西的动画效果不佳 - 例如高度、宽度、使用 absolute 值（上、左、右、下）的任何定位等等。
什么是setCSS()？
@isherwood loops like OP 只是使用 setCSS 作为示例的理论 js 函数
您应该使用 requestAnimationFrame 和时序逻辑来获得 60 fps 的流畅动画。这是一个与 react 组件一起使用以执行流畅动画的装饰器，是的，您可以一次运行多个并且它不会窒息。 gist.github.com/r3wt/172f61842c5d2a98cc3e49b336b6e988 这假设您知道属性的开始和结束位置，如果您不知道，您可以将其修改为不确定。
Are CSS animations faster than JS animations?的可能重复

【解决方案1】：

我不认为速度是您用来确定使用哪个的问题。任何支持calc() 的客户端都会很快，而且速度的具体实现取决于具体实现。

选择其中之一的原因不是速度，而是灵活性和您的用例。 calc() 将您限制为硬编码值，这在某些情况下是完美的，而 JavaScript 允许您引用值。当然 CSS 变量即将到来，但它们还没有出现，即使它们出现了，拥有 JS 语言的全部功能和完整的 DOM API 也很重要。

【讨论】：

【解决方案2】：

这在很大程度上取决于您的 DOM 树和标记，而不是 JS 与 CSS。如果您计划更改的元素确实有子元素，那么更改的成本将会很高。

如果您更改“布局”属性，即更改元素的几何形状，例如其宽度、高度或左侧或顶部的位置，浏览器将不得不检查所有其他元素并“重排”页。任何受影响的区域都需要重新绘制，并且最终绘制的元素需要重新组合在一起。

还有关于带变量的 css cals vs js 的信息和一些测试 https://lisilinhart.info/posts/css-variables-performance/

【讨论】：