相对CSS定位是否比JS定位快？

Question

我想知道JS确定某些值是否比CSS慢，因为JS和CSS必须进行相同的计算。

换句话说，如果我为元素设置以%为单位的边距，它将使用其父元素的宽度作为基数。 例如， margin: 50% = margin: 0.5 * parent.width 。 然后，在内部，浏览器必须根据父级的宽度计算正确的边距，对吗？ 那么，这与JS中的计算有何不同？ 为什么CSS更快？ 哪些内部CSS渲染使这些计算过程比JS快？

这是一个小提琴 。 两个子div都相同，但是一个div的边距是在CSS中计算的（ margin: 20% ），另一个在JS中是：

var $cont = $("#container");
$("#js").css("margin", $cont.width() * 0.2);

考虑调整大小：CSS引擎也必须在调整大小时重新计算边距，对吗？

考虑加载时间：我只在谈论实际的执行时间。 换一种说法：

var $cont = $("#container");
    $("#js").css("margin", $cont.width() * 0.2);

与

#css {margin: 20%;}

不包括任何其他（库）加载时间。 答案中不应包含jQuery和香草JS之间的区别。 我知道两者之间的性能差异。

Answer 1

由于该问题与浏览器极为相关，因此该问题的答案有些含糊。 但是，可以肯定地说CSS通常在这里会更快。

首先要注意的是，我们本身并未将CSS作为语言与JavaScript的速度进行比较。 从这个意义上讲，不一定要重复executed CSS。 它的重点是指定对于浏览器核心非常原生的属性。 浏览器可以解析一次，然后使用该规范执行所需的任何操作。 实际上，如果它反复地反复检查/执行相同的不变CSS代码，通常这将是一个相当糟糕的浏览器。

因此，一种查看此问题的方法是，我们并不是真正在问CSS为什么比JavaScript更快。 CSS不是这里进行计算的人。 我们在问为什么本地Web浏览器比运行在其上的客户端JavaScript更快？

如果您不顾浏览器开发人员的需求，则在最初分析CSS文件时可以看到一个规范，规定元素的相对大小应为其父元素的50％。

现在，您可以在重新绘制，滚动和交互页面时对规范进行任何操作。 您可以将该大小规格存储在核心数据结构的核心，如果需要，甚至可以使用简单的汇编代码。 您可以通过一次遍历从父级到子级递减的过程来计算此类相对大小的子级的新绝对大小。 您可以使用SIMD一次计算4个子像素的绝对像素大小。 给定初始属性说明，您可以执行任何操作。

使用JavaScript，我们没有这样的控件。 客户端脚本可以在此处执行任何操作，因此我们必须触发一个resize事件，如果JS端在resize事件中调整大小，则它可能触发整个此类事件，甚至可能重置/干扰常规事件的处理。计算客户端矩形。 元素的大小，即使在百分比级别，也变成空白，这是一个巨大的问号，在某种意义上必须反复“查询”。 这都是推测性的，因为它与浏览器非常相关。

但是，与浏览器无关的是，鉴于CSS具有静态，可预测的，可指定属性的特性，它们允许这些浏览器本地优化。 JS具有更大的自由度，因此它必须运行在最前面，并且不能具有允许浏览器开发人员使用其做任何事情的特殊特权。

使用CSS，就可以解决本地浏览器开发人员的问题。 使用JS，事情就在您的球场上，如果JS代码在浏览器之上运行，要击败浏览器开发人员将非常困难（甚至可能）。

Answer 2

1）最后，所有都是CSS定位。 在JS中进行计算，而不是让CSS +布局引擎对其进行计算，仅意味着一旦获得了数字，就需要将其分配给元素（或其他位置），然后让CSS引擎从那里拾取它，并在应用期间应用它下一次重涂。

2）CSS可以在内部访问事物的实际像素宽度。 有时您需要确定元素的计算样式，以便进行计算...

...这意味着您需要调用一个方法来读取这些值，将其解析为可行的数字，进行计算，转换回代表单位值的适当字符串，然后将其发送回CSS / layout / rendering。

这并不意味着JS不能很快。
同样，JS可以完成某些工作，而CSS永远无法独立完成（例如高级，动态动画混合）……但是诀窍是在适当的地方使用两者，并且出于很好的原因如上所述，要知道您编写的某事物每秒要运行数十次，就无法与仅在您每次触摸使先前的计算无效的事物时才需要计算的事物相比较，这样做的好处是您可以在JS版本中一时兴起地更改分钟的详细信息，以及编写各种序列，这些序列可以随时进行分解和重组，而在CSS中，您只能依靠预定义的动画。