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

Question

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

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

Here is a fiddle .两个子 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 不一定执行。它的重点是指定浏览器核心固有的属性。浏览器可以解析一次，然后根据该规范做任何它想做的事。事实上，如果它一遍又一遍地重复检查/执行相同的不变 CSS 代码，它通常会是一个相当糟糕的浏览器。

因此，看待这个问题的一种方式是，我们并不是真的在问为什么 CSS 比 JavaScript 快。 CSS 不是在这里进行计算的那个。我们在问为什么原生网络浏览器可以比它可以在其上运行的客户端 JavaScript 更快。

如果您设身处地为浏览器开发人员着想，您会在最初解析 CSS 文件时看到一个规范，即元素的相对大小应该是其父元素的 50%。

您现在可以在重绘、滚动和交互页面时使用规范做任何您想做的事情。您可以将该大小规范存储在核心数据结构的核心，如果需要，甚至可以使用金属抓取汇编代码。您可以在单次传递中从父级到子级计算此类相对大小的子级的新绝对尺寸。您可以使用 SIMD 一次计算 4 个 child 的绝对像素大小。给定初始属性规范，您可以做任何事情。

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

但不依赖于浏览器的是 CSS 允许这些类型的浏览器原生优化，因为它具有静态、可预测、属性指定的特性。 JS 有更多的自由，所以它必须运行在顶层，不能有那种允许浏览器开发者为所欲为的特殊特权。

有了 CSS，球就掌握在原生浏览器开发者的手中。使用 JS，球在你的球场上，鉴于 JS 代码在浏览器之上运行，要击败浏览器开发人员将非常困难(即使有可能)。