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

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

---

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

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

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

面试中一旦说到动画以及动画卡顿的情况，那么就一定会涉及到硬件加速。那么什么是硬件加速呢？硬件加速不同于软件加速，软件加速更依赖于CPU来处理图形绘制，硬件加速就是将浏览器的动画渲染过程交给GPU处理，从而使动画更为流畅。在上面说到的渲染过程中，每个元素都会被分配一个图层，图层又会利用GPU形成渲染纹理。而图层在GPU中类似transform这样的动画不会触发浏览器的重绘。

但能够触发GPU加速的CSS属性并不多，目前比较常用的有transform、opacity、transition等。尽管硬件加速可以使动画更加流畅，提升用户体验。但需要注意的是，项目中并不建议过多的使用这些能够触发硬件加速的CSS样式，因为这样会使GPU资源过度消耗，反而使页面变得更加卡顿。 

---

刷题思考

    这道题是对CSS3动画及知识点的考察，想要回答好这类题目，从动画实现、浏览器渲染原理到每一帧动画浏览器执行的工作再到及硬件加速，都是需要仔细学习并在面试前加强记忆的。

---

类似考点

    这道题主要涉及到的是CSS3动画相关的考点，面试官还可能会问，例如请你说一下transition和animation有什么区别吗？例如你知道硬件加速吗？例如前端实现动画都有哪些方式呢？例如你知道浏览器多长时间执行一帧动画吗？为什么是这么长时间？