JavaScript는 요소 스타일을 사용하는 것보다 CSS 사용자 정의 속성을 느리게 업데이트합니다. 성능 비교
mousemove 및 touchmove 이벤트를 사용하여 슬라이딩 애니메이션과 일부 속도 애니메이션을 수행하는 기능을 구현하는 vue 3용 캘린더 슬라이더를 만들었습니다. 프로젝트는 여기에서 테스트할 수 있습니다: https://stackblitz.com/github/Der-Alex/vue-calendar-slider?file=src/comComponents/VueCalendarSlider.vue
내 첫 번째 아이디어는 CSS 사용자 정의 속성을 사용하여 --posx 来存储幻灯片位置 document.documentElement.style.setProperty('--posx', ${posx.value}px); 。在我的样式部分，我设置 transform:translate3d(var(--posx), 0, 0) 요소를 이동하는 것이었습니다. 그런 다음 마우스업/터치엔드에서 슬라이딩 속도에 따라 슬라이더가 더 많이 미끄러지도록 속도 애니메이션을 사용했습니다.
모든 것이 잘 작동한 후 모바일 Chrome 브라우저에서 슬라이더를 테스트한 결과 슬라이더가 매우 심하게 붙어 있는 것을 발견했습니다. 약간의 조사와 조작 끝에 다른 슬라이더가 element.style.transform = translate3d(${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.style 差很多。变换 = translate3d(${posx.value}px, 0, 0);?我想这与javascript如何在内部处理这些部分有关，并且引擎可能将 element.style 内容移动到GPU，而 document.documentElement.style움직이지 않는지 설명할 수 있는 사람이 있나요? 하지만 구체적인 내용은 찾을 수 없습니다.
누군가가 나에게 설명해주기를 바랍니다 :)
