JavaScript는 요소 스타일을 사용하는 것보다 CSS 사용자 정의 속성을 느리게 업데이트합니다. 성능 비교

Question

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움직이지 않는지 설명할 수 있는 사람이 있나요? 하지만 구체적인 내용은 찾을 수 없습니다.

누군가가 나에게 설명해주기를 바랍니다 :)

Answer 1

2022년 9월 13일 업데이트

Chrome Dev Tools를 사용하여 또 다른 성능 검사를 수행하고 다음을 측정했습니다.

그림 1은 이 변형에 대한 mousedown과 mouseup 사이의 성능을 보여줍니다. 여기서는 element.style.transform를 통해 요소에 직접 새 clientX 위치를 씁니다.

그림 2는 동일한 이벤트의 성능을 보여줍니다. 여기서는 element.style.setProperty('--posx', ${posx.value}px);를 통해 CSS 사용자 정의 속성에 clientX 위치를 작성합니다.

그래서 한 단계 더 나아가서 통과할 수 있도록 코드를 변경했습니다element.style.setProperty('--posx', ${posx.value}px); 直接将 CSS 自定义属性写入元素。 . 결과는 그림 2와 같다.

element.style.setProperty('transform',translate3d(${posx.value}px, 0, 0));를 통해 clientX 위치를 작성하여 반대 방법으로 테스트하면 그림 1과 동일한 결과가 나타납니다.

내가 이해한 바에 따르면 JavaScript를 통해 CSS 사용자 정의 속성을 변경하면 스타일이 매 프레임마다 다시 계산되지만 CSS 속성 transform:translate3dtransform:translate3d을 변경하면 그렇지 않습니다.

그러니까 @S.Visser가 맞는 것 같아요.