CSS Transition 动画消耗大量 CPU/GPU

Question

我正在我的网站上实现一个小效果。 DOM 元素之一的大小随机变化。

const theDiv = document.getElementById("the-div");

function animate(){
  const value = Math.floor(Math.random() * 200); 
  theDiv.style.width = value + "px";    
  
  setTimeout(animate, 200);
}

animate();

#the-div { 
  width: 100px;
  height: 50px;
  background-color: brown;
  transition: 0.3s all ease-in-out;
}

<div id="the-div"></div>

但是，我已经意识到使用 CSS

transition

属性使尺寸变化更平滑会消耗大量资源，而且我不希望这样做是为了这种“仅美观”的效果，但另一方面，我想要请随意将此类效果添加到我的网站。

这里是用于测试的CodePen：

• https://codepen.io/fguillen/pen/JjwBbQg

单击按钮 “激活过渡” 激活 CSS 过渡属性。

这是我使用 Mac“活动监视器”并在 Chrome 浏览器中打开 CodePen 的措施：

过渡已停用：

转换已激活：

使用按钮“添加div”效果增加

我做错了什么吗？我不应该使用 CSS 过渡来实现这些效果吗？或者我应该忽略这个消耗性的选择，因为它是正常的，预期的，而不是戏剧性的？

Answer 1

动画宽度很昂贵，因为它会触发布局。请参阅此处了解更多详细信息：https://web.dev/animations-guide/#triggers。尝试改为对scaleX进行动画处理，性能会更好。

在转换中使用 ˋallˋ 关键字也是不好的做法，我建议在这里更明确地使用 ˋscaleXˋ。

此外，您还可以在触发动画之前添加“will-change”，以便浏览器为动画做好准备。但如果有的话，你应该谨慎使用它。有关更多详细信息，请参阅：https://developer.mozilla.org/en-US/docs/Web/CSS/will-change?retiredLocale=de（尤其是顶部的警告）