JavaScript は要素スタイルを使用するよりも CSS カスタム プロパティの更新が遅い: パフォーマンスの比較
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) を設定しました。次に、マウスアップ/タッチエンドで、スライダーがスライド速度に基づいてよりスライドするように、速度アニメーションを使用しました。
すべてが正常になった後、モバイル Chrome ブラウザでスライダーをテストしたところ、スライダーが非常に固着していることがわかりました。いくつか調べていじった結果、他のスライダーは element.style.transform = translation3d(${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 よりも優れている理由を誰か説明できますか。スタイルが大きく異なります。 transform = translation3d(${posx.value}px, 0, 0);? これは、JavaScript がこれらの部分を内部で処理する方法に関係していると思いますが、エンジンが element.style## を移動した可能性があります。 # コンテンツが GPU に転送され、document.documentElement.style は移動されません。しかし、具体的なものは何も見つかりません。
