Изменение стиля преобразования css вызывает Пересчет стиля / Обновление дерева слоев

Question

В в этом примере я выполняю свои преобразования (при прокрутке) с надеждой лишь прикоснуться к композитору, однако, проверяя его в Chrome, сообщается о пересчитанном стиле и обновлении дерева слоев фиолетовым цветом (что означает дорогую операцию).

Как в этом примере предотвратить другие операции, кроме преобразований compositor / gpu?

	const scroller = document.querySelector('scroller');
	const width = scroller.offsetWidth;
	const scrollWidth = scroller.scrollWidth;
	const elements = document.querySelectorAll('scrolled-item');
	scroller.addEventListener('scroll', () => {
		const scroll = scroller.scrollLeft;
		const ratio = (scroll + width) / scrollWidth;
		requestAnimationFrame(() => {
			elements.forEach(el => {
				el.firstChild.style.transform = `rotateZ(${ratio * 360}deg) rotateX(${ratio * 360}deg) scaleX(${1 - ratio})`;
			})
		})
	});

	scroller {
		display: block;
		width: 80%;
		margin-left: 10%;
		margin-top: 20%;
		overflow: auto;
		white-space: nowrap;
		font-size: 0;
		background: silver
	}
	scrolled-item {
		position: relative;
		display: inline-block;
		margin-left: 10px;
		margin-right: 10px;
		width: 40px;
		height: 40px;

	}
	scrolled-item gymnastics {
		display: block;
		position: absolute;
		top: 0; right: 0; bottom: 0; left: 0;
		background: gray;
		z-index: 1;
	}
	scrolled-item div {
		position: relative;
		text-align: center;
		font-size: 14px;
		z-index: 2;
	}

<scroller>
	<scrolled-item><gymnastics></gymnastics><div>do</div></scrolled-item>
	<scrolled-item><gymnastics></gymnastics><div>do</div></scrolled-item>
	<scrolled-item><gymnastics></gymnastics><div>do</div></scrolled-item>
	<scrolled-item><gymnastics></gymnastics><div>do</div></scrolled-item>
	<scrolled-item><gymnastics></gymnastics><div>do</div></scrolled-item>
	<scrolled-item><gymnastics></gymnastics><div>do</div></scrolled-item>
	<scrolled-item><gymnastics></gymnastics><div>do</div></scrolled-item>
	<scrolled-item><gymnastics></gymnastics><div>do</div></scrolled-item>
	<scrolled-item><gymnastics></gymnastics><div>do</div></scrolled-item>
	<scrolled-item><gymnastics></gymnastics><div>do</div></scrolled-item>
	<scrolled-item><gymnastics></gymnastics><div>do</div></scrolled-item>
	<scrolled-item><gymnastics></gymnastics><div>do</div></scrolled-item>
	<scrolled-item><gymnastics></gymnastics><div>do</div></scrolled-item>
	<scrolled-item><gymnastics></gymnastics><div>do</div></scrolled-item>
	<scrolled-item><gymnastics></gymnastics><div>do</div></scrolled-item>
	<scrolled-item><gymnastics></gymnastics><div>do</div></scrolled-item>
	<scrolled-item><gymnastics></gymnastics><div>do</div></scrolled-item>
	<scrolled-item><gymnastics></gymnastics><div>do</div></scrolled-item>
	<scrolled-item><gymnastics></gymnastics><div>do</div></scrolled-item>
	<scrolled-item><gymnastics></gymnastics><div>do</div></scrolled-item>
	<scrolled-item><gymnastics></gymnastics><div>do</div></scrolled-item>
	<scrolled-item><gymnastics></gymnastics><div>do</div></scrolled-item>
	<scrolled-item><gymnastics></gymnastics><div>do</div></scrolled-item>
	<scrolled-item><gymnastics></gymnastics><div>do</div></scrolled-item>
	<scrolled-item><gymnastics></gymnastics><div>do</div></scrolled-item>
	<scrolled-item><gymnastics></gymnastics><div>do</div></scrolled-item>
	<scrolled-item><gymnastics></gymnastics><div>do</div></scrolled-item>
	<scrolled-item><gymnastics></gymnastics><div>do</div></scrolled-item>
	<scrolled-item><gymnastics></gymnastics><div>do</div></scrolled-item>
	<scrolled-item><gymnastics></gymnastics><div>do</div></scrolled-item>
	<scrolled-item><gymnastics></gymnastics><div>do</div></scrolled-item>
	<scrolled-item><gymnastics></gymnastics><div>do</div></scrolled-item>
	<scrolled-item><gymnastics></gymnastics><div>do</div></scrolled-item>
	<scrolled-item><gymnastics></gymnastics><div>do</div></scrolled-item>
	<scrolled-item><gymnastics></gymnastics><div>do</div></scrolled-item>
	<scrolled-item><gymnastics></gymnastics><div>do</div></scrolled-item>
	<scrolled-item><gymnastics></gymnastics><div>do</div></scrolled-item>
	<scrolled-item><gymnastics></gymnastics><div>do</div></scrolled-item>
	<scrolled-item><gymnastics></gymnastics><div>do</div></scrolled-item>
	<scrolled-item><gymnastics></gymnastics><div>do</div></scrolled-item>
	<scrolled-item><gymnastics></gymnastics><div>do</div></scrolled-item>
	<scrolled-item><gymnastics></gymnastics><div>do</div></scrolled-item>
	<scrolled-item><gymnastics></gymnastics><div>do</div></scrolled-item>
	<scrolled-item><gymnastics></gymnastics><div>do</div></scrolled-item>
	<scrolled-item><gymnastics></gymnastics><div>do</div></scrolled-item>
	<scrolled-item><gymnastics></gymnastics><div>do</div></scrolled-item>
	<scrolled-item><gymnastics></gymnastics><div>do</div></scrolled-item>
	<scrolled-item><gymnastics></gymnastics><div>do</div></scrolled-item>
	<scrolled-item><gymnastics></gymnastics><div>do</div></scrolled-item>
	<scrolled-item><gymnastics></gymnastics><div>do</div></scrolled-item>
	<scrolled-item><gymnastics></gymnastics><div>do</div></scrolled-item>
	<scrolled-item><gymnastics></gymnastics><div>do</div></scrolled-item>
	<scrolled-item><gymnastics></gymnastics><div>do</div></scrolled-item>
	<scrolled-item><gymnastics></gymnastics><div>do</div></scrolled-item>
	<scrolled-item><gymnastics></gymnastics><div>do</div></scrolled-item>
	<scrolled-item><gymnastics></gymnastics><div>do</div></scrolled-item>
	<scrolled-item><gymnastics></gymnastics><div>do</div></scrolled-item>
	<scrolled-item><gymnastics></gymnastics><div>do</div></scrolled-item>
</scroller>

Answer 1

Я не знаю, что вы делаете с окном просмотра, и я не думаю, что это может быть помехой для использования css переменных.

А пока вот что я имел в обратите внимание, я не ответил на вопросы о производительности, но я думаю, что этот ответ быстрее во время выполнения, чем ваш предыдущий код

const scroller    = document.querySelector('scroller')
  ,   element0    = scroller.querySelector('scrolled-item')
  ,   off_width   = scroller.offsetWidth
  ,   scrollWidth = scroller.scrollWidth
  ;
for (let i=0;i<58;i++)
  {
  scroller.appendChild (element0.cloneNode(true))
  }
scroller.onscroll=()=>
  {
  let scroll = scroller.scrollLeft 
    , ratio  = (scroll + off_width) / scrollWidth
    , ratioDeg = Math.fround(ratio * 360) 
    ;
  scroller.style.setProperty('--turnXZ', ratioDeg + 'deg')
  scroller.style.setProperty('--scalX', (1 - ratio))
  }

scroller {
  display: block;
  width: 80%;
  height: 70px;
  margin-left: 10%;
  margin-top: 20%;
  overflow: auto;
  white-space: nowrap;
  font-size: 0;
  background: silver;
  --turnXZ : 0deg;
  --scalX  : 1;
}
scrolled-item {
  position: relative;
  display: inline-block;
  margin-left: 10px;
  margin-right: 10px;
  width: 40px;
  height: 40px;
}
scrolled-item gymnastics {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(50, 47, 209, 0.658);
  z-index: 1;
  transform: scaleX(var(--scalX)) rotateX(var(--turnXZ) ) rotateZ(var(--turnXZ) );
}
scrolled-item div {
  position: relative;
  text-align: center;
  font-size: 14px;
  z-index: 2;
}

<scroller>
  <scrolled-item><gymnastics></gymnastics><div>do</div></scrolled-item>
</scroller>