浏览器渲染原理

流程

• 根据html建造html树（DOM）
• 根据CSS建造css树
• 将两树合并味一颗渲染树
• layout布局
• paint绘制
• composite合成

优化

因为不是更新时，流程全走一遍，所以可以进行优化。

常用优化：

• js优化：使用requestAnimation代替setTimeout或setInterval
• css优化：使用wil-change或translate

css动画

transiton

• 作用：过度可以为一个元素再不同状态之间的切换时定义不同的过渡效果，简言之，补充中间帧。
• 语法：transition：属性名 时长 过度方式 延迟

animation

可以直接写多个状态，功能很强