CSS - 你遇到过动画卡顿的问题吗

难度级别：中高级及以上                               提问概率：70% 

回答这道题，首先要说的就是，浏览器在每一帧动画里大概做了什么事情。首先浏览器会执行Javascript，或是操作DOM元素，紧接着需要对DOM元素进行样式计算，当计算完成后，就需要针对DOM元素的位置以及大小，做出相应的布局。注意，这里的布局只是计算阶段，紧接着就需要计算布局对DOM元素做绘制工作，这些工作包括边框、色值等等。最后再将以上一系列工作渲染到页面上。

但需要注意的是，在布局这一步，因为我们的页面元素大部分都是相对定位的，一旦某个元素的位置、大小、边距发生了变化，就会引起其他元素一连串的变化，也就是我们常说的回流。在整个动画执行过程中，重新布局和绘制的工作所需时间短，那么动画就会更加流畅，反之，这两项工作所需时间长，那么动画就会显得卡顿。

我们知道，浏览器大概每16.6ms会进行一帧动画，意思就是以上这一系列工作每一帧都要在16.6ms内做完，否则就会显得卡顿了。