JavaScript met à jour les propriétés personnalisées CSS plus lentement que l'utilisation des styles d'éléments : comparaison des performances

Question

J'ai créé un curseur de calendrier pour vue 3 qui utilise les événements mousemove et touchmove pour implémenter une animation coulissante, ainsi que des fonctions pour effectuer des animations rapides. Le projet peut être testé ici : https://stackblitz.com/github/Der-Alex/vue-calendar-slider?file=src/components/VueCalendarSlider.vue

Ma première idée était d'utiliser des propriétés personnalisées CSS --posx 来存储幻灯片位置 document.documentElement.style.setProperty('--posx', ${posx.value}px); 。在我的样式部分，我设置 transform:translate3d(var(--posx), 0, 0) pour déplacer mes éléments. Ensuite, sur le mouseup/touchend, j'ai utilisé une animation de vitesse pour que le curseur glisse davantage en fonction de la vitesse de glissement.

Après que tout ait bien fonctionné, j'ai testé le curseur dans le navigateur mobile Chrome et j'ai constaté qu'il était très bloqué. Après quelques recherches et manipulations, j'ai découvert que d'autres curseurs écrivent l'attribut de transformation directement dans l'élément via element.style.transform = translate3d(${posx.value}px, 0, 0); , ce que j'ai ensuite fait. Les performances du curseur sont bien meilleures après le changement.

Pour tester ce comportement, vous pouvez src/components/VueCalendarSlider.vue 文件中编辑以下行： const testCssCustomProperties = ref(false); 当设置为 true 时，通过 写入 css 自定义属性document.documentElement.style.setProperty。当设置为 false 时，使用 element.style.transform.

Après avoir appris que les changements de style peuvent traverser le DOM, j'ai directement défini les propriétés personnalisées CSS sur les éléments spécifiques que je souhaite transformer, mais les performances sont toujours bien pires que l'utilisation de style.transform.

Ma question maintenant est la suivante : quelqu'un peut-il expliquer pourquoi document.documentElement.style.setProperty('--posx', ${posx.value}px); 的性能比 element.style 差很多。变换 = translate3d(${posx.value}px, 0, 0);?我想这与javascript如何在内部处理这些部分有关，并且引擎可能将 element.style 内容移动到GPU，而 document.documentElement.style ne sera pas déplacé. Mais je ne trouve rien de concret.

J'espère que quelqu'un pourra me l'expliquer :)

Answer 1

Mis à jour le 13 septembre 2022

J'ai effectué une autre vérification des performances à l'aide de Chrome Dev Tools et mesuré les éléments suivants :

La figure 1 montre les performances entre mousedown et mouseup pour cette variante, où j'écris la nouvelle position clientX directement dans l'élément via element.style.transform :

La figure 2 montre la performance du même événement. Ici, j'écris la position clientX dans une propriété personnalisée CSS via element.style.setProperty('--posx', ${posx.value}px); : 

Je suis donc allé plus loin et j'ai changé le code pour qu'il passe element.style.setProperty('--posx', ${posx.value}px); 直接将 CSS 自定义属性写入元素。 . Les résultats sont les mêmes que ceux de la figure 2.

Tester dans l'autre sens en écrivant la position clientX via element.style.setProperty('transform',translate3d(${posx.value}px, 0, 0)); me donne le même résultat que dans la figure 1.

D'après ce que j'ai compris, la modification des propriétés personnalisées CSS via JavaScript force le recalcul des styles à chaque image, contrairement à la modification des propriétés CSS transform:translate3dtransform:translate3d.

Donc je suppose que @S.Visser a raison.