JavaScript aktualisiert benutzerdefinierte CSS-Eigenschaften langsamer als die Verwendung von Elementstilen: Leistungsvergleich

Question

Ich habe einen Kalender-Slider für Vue 3 erstellt, der Mousemove- und Touchmove-Ereignisse verwendet, um Gleitanimationen zu implementieren, sowie Funktionen zum Ausführen einiger Geschwindigkeitsanimationen. Das Projekt kann hier getestet werden: https://stackblitz.com/github/Der-Alex/vue-calendar-slider?file=src/components/VueCalendarSlider.vue

Meine erste Idee war, benutzerdefinierte CSS-Eigenschaften --posx 来存储幻灯片位置 document.documentElement.style.setProperty('--posx', ${posx.value}px); 。在我的样式部分，我设置 transform:translate3d(var(--posx), 0, 0) zu verwenden, um meine Elemente zu verschieben. Dann habe ich beim Mouseup/Touchend eine Geschwindigkeitsanimation verwendet, damit der Slider basierend auf der Gleitgeschwindigkeit stärker gleitet.

Nachdem alles einwandfrei funktionierte, habe ich den Schieberegler im mobilen Chrome-Browser getestet und festgestellt, dass der Schieberegler sehr stark hängen blieb. Nach einigem Suchen und Herumfummeln habe ich herausgefunden, dass andere Schieberegler das Transformationsattribut über element.style.transform = translate3d(${posx.value}px, 0, 0); direkt in das Element schreiben, was ich dann auch getan habe. Die Leistung des Schiebereglers ist nach der Änderung viel besser.

Um dieses Verhalten zu testen, können Sie src/components/VueCalendarSlider.vue 文件中编辑以下行： const testCssCustomProperties = ref(false); 当设置为 true 时，通过 写入 css 自定义属性document.documentElement.style.setProperty。当设置为 false 时，使用 element.style.transform.

Nachdem ich erfahren habe, dass Stiländerungen das DOM durchlaufen können, habe ich benutzerdefinierte CSS-Eigenschaften direkt für die spezifischen Elemente festgelegt, die ich transformieren möchte, aber die Leistung ist immer noch viel schlechter als bei der Verwendung von style.transform.

Meine Frage ist nun: Kann mir jemand erklären, warum document.documentElement.style.setProperty('--posx', ${posx.value}px); 的性能比 element.style 差很多。变换 = translate3d(${posx.value}px, 0, 0);?我想这与javascript如何在内部处理这些部分有关，并且引擎可能将 element.style 内容移动到GPU，而 document.documentElement.style nicht verschoben wird? Aber ich kann nichts Konkretes finden.

Ich hoffe, jemand kann es mir erklären :)

Answer 1

2022年9月13日更新

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

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

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

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

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

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

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