CSS-анимация перехода потребляет много ресурсов процессора/графического процессора ⇐ CSS

[Гость]

Я реализую небольшой эффект на своем веб-сайте. Случайное изменение размера одного из элементов гибели.

#the-div { ширина: 100 пикселей; переход: 0,3 с, все с легкостью; } const theDiv = document.getElementById("the-div"); функция анимации(){ константное значение = Math.floor(Math.random() * 200); theDiv.style.width = значение + «px»; setTimeout (анимация, 200); } Однако я понял, что использование свойства CSS transition для более плавного изменения размера требует много ресурсов, и мне не нужно это для такого «только эстетического» эффекта.< /п> Вот CodePen для тестирования:
[*]https://codepen.io/fguillen/pen/JjwBbQg
Нажмите кнопку «Активировать переход», чтобы активировать свойство перехода CSS.

Это мои измерения с использованием «Монитора активности» Mac и открытия CodePen в браузере Chrome:

Переход деактивирован:





Переход активирован:





Кнопкой "Добавить div" эффект усиливается

Я делаю что-то не так? Не следует ли мне использовать переходы CSS для этих эффектов? Или мне следует просто игнорировать этот всепоглощающий выбор, потому что это нормально, ожидаемо и не драматично?