我为 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不会被移动。但我找不到任何具体的内容。 …