过渡动画，高cpu？

问题描述：

当我创建了一个简单的codepen来调试为什么我的反应应用程序中的某个组件使用了如此之多的CPU时，我惊讶地发现这是我看到20-30％CPU的Chrome中的这个小CSS过渡。过渡动画，高cpu？

任何人有想法，我们怎么可能会以不同办法呢？或者为什么会出现这种情况？

<div id='foo'></div> 

#foo { 
    background: red; 
    height: 20px; 
    max-width: 500px; 
    transition: width linear; 
    transition-duration: 10s; 
    width: 0; 
} 

var yes = true 
setInterval(function() { 
    var size = yes ? '500px' : '0px' 
    yes = !yes 
    document.getElementById('foo').style.width = size 
}, 10*1000)

你为什么不使用一个类来驱动动画？ –

'10s'是一个快速过渡的长时间...... –

注意，您可以使用Chrome DevTools的时间轴和动画标签查看渲染过程中发生了什么，并优化了动画的性能。 – cloudworks

答

尝试转变transform代替 - 对transform GET硬件加速，其中过渡width不和是少高性能的转换。

setInterval(function() { 
 
    document.getElementById('foo').style.transform = 'scaleX(1)' 
 
}, 10*1000)

#foo { 
 
    background: red; 
 
    height: 20px; 
 
    max-width: 500px; 
 
    transition: transform linear; 
 
    transition-duration: 10s; 
 
    transform: scaleX(0); 
 
    transform-origin: 0; 
 
}

<div id='foo'></div>

这个好得多，但仍然使用比我们最终觉得合适的更多的CPU。我们正在为音频播放器制作一个进度表，但最终我们决定每隔1秒左右使用setTimeouts，因为这是真正用于接近0 cpu的唯一解决方案。如果你看看那里的大多数js玩家，我相信，进度计总是不平稳，这正是这个原因。 – eagspoo

过渡动画，高cpu？

相关推荐