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 は移動されません。しかし、具体的なものは何も見つかりません。
P粉2991740942024-01-08 00:47:47
2022年9月13日更新
Chrome Dev Tools を使用して別のパフォーマンス チェックを実行し、次の点を測定しました:
図 1 は、このバリアントのマウスダウンとマウスアップの間のパフォーマンスを示しています。ここでは、element.style.transform を介して新しい clientX 位置を要素に直接書き込みます。
element.style.setProperty('--posx', ${posx.value}px); を通じて clientX の位置を CSS カスタム プロパティに書き込みます。
そこで私はさらに一歩進んで、
。結果は図 2 と同じです。
私が理解しているところによると、JavaScript 経由で CSS カスタム プロパティを変更すると、フレームごとにスタイルが強制的に再計算されますが、CSS プロパティの
を変更すると、再計算されません。
したがって、