浏览器渲染原理

• 通过HTML解析将HTML文件解析为 DOM 树;

• 通过CSS解析将CSS文件解析出样式规则（CSSOM树）；

• 通过合并DOM树和CSSOM树将生成渲染树；

• 依赖渲染树开始布局（文档流、盒模型、确定位置和尺寸计算）；

• 知道了哪些节点可见、它们的计算样式以及几何信息，将渲染树中的每个节点转换成屏幕上的实际像素即开始绘制。把边框、文字颜色、阴影等绘制出来。

• 最后将合成好的页面展示出来。

CSS 动画的两种做法

• 通过给相应的DOM元素添加transition,在结合translate，rotate，scale等属性实现动画效果.
• 通过给相应的DOM元素添加animation,再使用关键帧@keyframes来实现动画效果.