JavaScript 更新 CSS 自定义属性比使用元素样式慢

Question

我为 vue 3 创建了一个日历滑块，它使用 mousemove 和 touchmove 事件来实现滑动动画，以及执行一些速度动画的函数。该项目可以在这里测试：https://stackblitz.com/github/Der-Alex/vue-calendar-slider ?file=src/components/VueCalendarSlider.vue

我的第一个想法是使用 css 自定义属性--posx来存储幻灯片位置document.documentElement.style.setProperty('--posx', ${posx.value}px);。在我的风格部分，我然后设置transform: translate3d(var(--posx), 0, 0)移动我的元素。然后，在 mouseup / touchend 上，我使用了速度动画，以便滑块根据滑动速度滑动得更多。

一切正常后，我在移动 Chrome 浏览器中测试了滑块，发现滑块卡顿得非常严重。经过一番挖掘和摆弄后，我发现其他滑块直接将转换属性写入元素 via element.style.transform = translate3d(${posx.value}px, 0, 0);，然后我也这样做了。更改后滑块性能好多了。

要测试此行为，您可以编辑文件中的以下行src/components/VueCalendarSlider.vue：const testCssCustomProperties = ref(false);当设置为 true 时，CSS 自定义属性通过document.documentElement.style.setProperty. 当设置为 false 时，element.style.transform将被使用。

得知样式更改可以沿着 DOM 遍历后，我直接在要转换的特定元素处设置 css 自定义属性，但性能仍然比使用 style.transform 差很多。

我现在的问题是：谁能解释一下为什么document.documentElement.style.setProperty('--posx', ${posx.value}px);表现比 差这么多element.style.transform = translate3d(${posx.value}px, 0, 0);？我想这与 javascript 在内部处理这些部分的方式有关，并且引擎可能会将element.style内容移动到 GPU，但document.documentElement.style不会被移动。但我找不到任何具体的内容。

我希望有人可以向我解释这一点:)

Answer 1

2022年9月13日更新

我使用 Chrome 开发工具进行了另一次性能检查并测量了以下内容：

图 1 显示了该变体的 mousedown 和 mouseup 之间的性能，其中我通过以下方式将新的 clientX 位置直接写入元素element.style.transform：

图2显示了相同事件的表现。在这里，我通过以下方式将 clientX 位置写入 CSS 自定义属性element.style.setProperty('--posx', ${posx.value}px);：

所以我更进一步，更改了我的代码，以便我直接通过 .css 文件将 CSS 自定义属性写入元素element.style.setProperty('--posx', ${posx.value}px);。结果与图2相同。

通过编写 clientX 位置来进行相反的测试，element.style.setProperty('transform', translate3d(${posx.value}px, 0, 0));得到的结果与图 1 相同。

据我了解，通过 JavaScript 更改 CSS 自定义属性会强制对每个帧重新计算样式，而更改 CSS 属性则transform: translate3d不会。

所以我猜@S.Visser是对的。