JavaScript mengemas kini sifat tersuai CSS lebih perlahan daripada menggunakan gaya elemen: perbandingan prestasi

Question

Saya mencipta peluncur kalendar untuk vue 3 yang menggunakan acara mousemove dan touchmove untuk melaksanakan animasi gelongsor, serta fungsi untuk melakukan beberapa animasi kelajuan. Projek ini boleh diuji di sini: https://stackblitz.com/github/Der-Alex/vue-calendar-slider?file=src/components/VueCalendarSlider.vue

Idea pertama saya ialah menggunakan sifat tersuai css --posx 来存储幻灯片位置 document.documentElement.style.setProperty('--posx', ${posx.value}px); 。在我的样式部分，我设置 transform:translate3d(var(--posx), 0, 0) untuk memindahkan elemen saya. Kemudian, pada mouseup / touchend, saya menggunakan animasi kelajuan supaya slider lebih banyak berdasarkan kelajuan gelongsor.

Selepas semuanya berfungsi dengan baik, saya menguji peluncur dalam penyemak imbas Chrome mudah alih dan mendapati peluncur tersekat dengan teruk. Selepas beberapa penggalian dan bermain-main, saya mendapati peluncur lain menulis atribut transformasi terus kepada elemen melalui element.style.transform = translate3d(${posx.value}px, 0, 0); , yang kemudiannya saya lakukan. Prestasi peluncur adalah lebih baik selepas perubahan.

Untuk menguji tingkah laku ini anda boleh src/components/VueCalendarSlider.vue 文件中编辑以下行： const testCssCustomProperties = ref(false); 当设置为 true 时，通过 写入 css 自定义属性document.documentElement.style.setProperty。当设置为 false 时，使用 element.style.transform.

Selepas mengetahui bahawa perubahan gaya boleh merentasi DOM, saya terus menetapkan sifat tersuai css pada elemen khusus yang ingin saya ubah, tetapi prestasinya masih jauh lebih teruk daripada menggunakan style.transform.

Soalan saya sekarang ialah: Bolehkah sesiapa menjelaskan mengapa document.documentElement.style.setProperty('--posx', ${posx.value}px); 的性能比 element.style 差很多。变换 = translate3d(${posx.value}px, 0, 0);?我想这与javascript如何在内部处理这些部分有关，并且引擎可能将 element.style 内容移动到GPU，而 document.documentElement.style tidak akan dialihkan. Tetapi saya tidak dapat mencari sesuatu yang konkrit.

Saya harap ada yang boleh terangkan pada saya :)

Answer 1

Dikemas kini pada 13 September 2022

Saya melakukan semakan prestasi lain menggunakan Alat Pembangun Chrome dan mengukur perkara berikut:

Rajah 1 menunjukkan prestasi antara mousedown dan mouseup untuk varian ini, di mana saya menulis kedudukan clientX baharu terus kepada elemen melalui element.style.transform:

Rajah 2 menunjukkan persembahan acara yang sama. Di sini saya menulis kedudukan clientX ke dalam sifat tersuai CSS melalui element.style.setProperty('--posx', ${posx.value}px);:

Jadi saya mengambil langkah lebih jauh dan menukar kod tersebut supaya ia lulus element.style.setProperty('--posx', ${posx.value}px); 直接将 CSS 自定义属性写入元素。 . Keputusan adalah sama seperti Rajah 2.

Menguji cara yang bertentangan dengan menulis kedudukan clientX melalui element.style.setProperty('transform',translate3d(${posx.value}px, 0, 0));

Daripada apa yang saya faham, menukar sifat tersuai CSS melalui JavaScript memaksa gaya dikira semula setiap bingkai, manakala menukar sifat CSS transform:translate3dtransform:translate3d tidak.

Jadi saya rasa @S.Visser betul.