Chrome、Firefox浏览器UI过渡动画偶发卡顿的原因是什么

• height是会触发浏览器*重排（回流）*的属性，每次修改height浏览器都要重新计算页面内所有相关元素的位置和尺寸，页面元素越复杂、嵌套层级越多，这个计算耗时就越长。正常浏览器要保证60fps的话每帧只有16ms左右的处理时间，一旦计算耗时超过这个阈值就会丢帧，极端情况下甚至会直接跳过所有中间帧，直接从动画起始态跳到结束态，看起来就像是动画远快于设定的300ms。
• 浏览器主线程阻塞会直接打断动画执行：如果动画运行的同时有大量JS运算、DOM操作、其他重排重绘任务在执行，主线程被占满，动画的帧更新任务会被挂起。等主线程空闲的时候，往往已经过了动画原定的结束时间，浏览器会直接把属性更新到终值，也会出现快进、卡顿的表现。
• setTimeout本身就存在执行时间不准的问题：它属于宏任务，必须等当前主线程的同步任务、微任务全部执行完毕才会触发回调，哪怕你设置了16ms的间隔，只要主线程被占用，回调就会延后执行，累积下来就会出现大量丢帧，和CSS过渡的卡顿表现一致。
• 部分浏览器的后台降频策略也会导致这个问题：如果当前标签页切到后台、或者浏览器判断用户没有关注页面，会主动降低非核心任务的执行优先级，跳过动画的中间帧，直接完成动画。

优化这类问题建议优先用transform、opacity这类不会触发重排重绘、直接走合成层渲染的属性实现动画；如果必须要做height过渡，可以给元素加will-change: height提前告知浏览器做优化，降低每帧的计算开销。

内容的提问来源于stack exchange，提问作者Bear Bile Farming is Torture