浏览器渲染原理
浏览器渲染的过程主要包括以下五步：
- 根据获取的HTML文档解析构建成HTML树（DOM）。
- 处理CSS标记，构成CSS树（CSSOM层叠样式表模型）。
- 将两棵树合并成一棵渲染树(rendering tree)
- 渲染树的每个元素包含的内容都是计算过的，它被称之为布局layout（文档流、盒模型、计算大小和位置）。
- 将渲染树的各个节点绘制到屏幕上，这一步被称为绘制painting。
- Compose合成（根据层叠关系展示画面）；
三种渲染流程
性能优化（常用）
js优化 使用requestAnimationFrame 代替 setTimeout 或 setInterval
css优化 使用 will-change 或 translate
CSS 动画 ---transition 过渡
作用 补充中间帧，实现过渡动画
语法 transition：属性名 时长 过渡方式 延迟；
可以用逗号分隔两个属性：transition:left 200ms,top 400ms
可以用all 代表所有属性
CSS 动画 ---animation
利用 设置关键帧 @keyframes 实现动画
@keyframes action {
from{
transform:translateX(200px);
}
to {
transform:translateX(800px);
}
}
也可以使用百分数设置更多关键帧
animation语法
animation: 时长 | 过渡方式 | 延迟 | 次数 | 方向 | 填充模式 | 是否暂停 | 动画名
方向：reverse | alternate | alternate-reverse
填充模式： none | forwards | backwords | both
是否暂停： paused | running
