CSS相对定位比JS定位快吗？

Question

我想知道 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 和 vanilla JS 之间的区别不应该包含在答案中。我知道两者之间的性能差异。

Answer 1

这个问题的答案有些模糊，因为它非常依赖于浏览器。然而，可以相当肯定地说 CSS 通常会更快。

首先要注意的是，我们并不是将 CSS 作为一种语言与 JavaScript 本身的速度进行比较。从这个意义上说，CSS 不一定是executed重复的。它的重点是指定浏览器核心本身的属性。浏览器可以解析它一次，然后根据该规范做任何它想做的事情。事实上，如果浏览器一遍又一遍地重复检查/执行相同的不变的 CSS 代码，它通常会是一个相当糟糕的浏览器。

因此，看待这个问题的一种方法是，我们并没有真正询问为什么 CSS 比 JavaScript 更快。CSS 不是这里进行计算的人。我们要问的是，为什么本机 Web 浏览器可以比它在其上运行的客户端 JavaScript 更快。

如果您将自己置于浏览器开发人员的角度，您会在最初解析 CSS 文件时看到一个规范，即元素的相对大小应该是其父元素的 50%。

现在，当页面被重绘、滚动、交互时，您可以根据规范做任何您想做的事情。您可以将该大小规范存储在核心数据结构的核心，甚至可以根据需要使用金属刮擦汇编代码。您可以在一次从父级到子级的层次结构中向下计算此类相对大小的子级的新绝对大小。您可以使用 SIMD 一次计算 4 个子级的绝对像素大小。给定初始属性规范，您可以执行任何操作。

对于 JavaScript，我们没有这样的控制权。客户端脚本可以在这里做任何事情，所以我们必须触发一个调整大小事件，如果 JS 端调整调整大小事件中的内容大小，它可能会触发一系列此类事件，甚至可能重置/干扰正常的进程计算客户矩形。元素的大小，即使是百分比级别，也会变成一片空白，某种意义上必须重复“查询”的巨大问号。这都是推测性的，因为它非常依赖于浏览器。

但与浏览器无关的是，CSS 具有静态、可预测、属性指定的性质，因此允许进行浏览器本机优化。JS 有更多的自由度，因此它必须在之上运行，并且不能拥有允许浏览器开发人员使用它做任何他们想做的事情的特权。

有了CSS，球就落在了本机浏览器开发者的手中。对于 JS，球就在你的球场上，鉴于 JS 代码运行在浏览器之上，要击败浏览器开发人员将非常困难（即使可能）。