浏览器渲染原理
步骤 :(这五个步骤并不一定一次性顺序完成。如果 DOM 或 CSSOM 被修改，以上过程需要重复执行，这样才能计算出哪些像素需要在屏幕上进行重新渲染。实际页面中，CSS 与 JavaScript 往往会多次修改 DOM 和 CSSOM，)
1.处理 HTML 标记并构建 DOM 树。
当浏览器接收到服务器响应来的HTML文档后，会遍历文档节点，生成DOM树。
2.处理 CSS 标记并构建 CSSOM 树。
浏览器解析CSS文件并生成CSSOM，每个CSS文件都被分析成一个StyleSheet对象，每个对象都包含CSS规则。CSS规则对象包含对应于CSS语法的选择器和声明对象以及其他对象。
3.将 DOM 与 CSSOM 合并成一个渲染树。
通过DOM树和CSS规则树，浏览器就可以通过它两构建渲染树了。浏览器会先从DOM树的根节点开始遍历每个可见节点，然后对每个可见节点找到适配的CSS样式规则并应用。
4.根据渲染树来布局，以计算每个节点的几何信息。
布局阶段会从渲染树的根节点开始遍历，由于渲染树的每个节点都是一个Render Object对象，包含宽高，位置，背景色等样式信息。所以浏览器就可以通过这些样式信息来确定每个节点对象在页面上的确切大小和位置，布局阶段的输出就是我们常说的盒子模型，它会精确地捕获每个元素在屏幕内的确切位置与大小
5.将各个节点绘制到屏幕上。
在绘制阶段，浏览器会遍历渲染树，调用渲染器的paint()方法在屏幕上显示其内容。渲染树的绘制工作是由浏览器的UI后端组件完成的。
CSS 动画的两种做法（transition 和 animation）
1. transition
transition属性是一个简单的动画属性，非常简单非常容易用。可以说它是animation的简化版本，是给普通做简单网页特效用的.
1.1常用属性
transition-property: height; // 适用于哪个属性
transition-duration: 1s;
transition-delay: 1s;
transition-time-function: ease/linear/ease-in(加速)/ease-out/cubic-bezier(自定义)；
1.2 transition特性
-
需要具体数值，不能用block,none等
-
transition需用事件触发，不能在网页加载时自动发生
-
一次性，不能重复发生，除非一再触发
-
只有两个状态：开始和结束状态
-
一条transition规则只能定义一个属性
2.animation
2.1常用属性
- animation是一个非常成熟的可以用来展现动画效果的属性。
- animation-name: rainbow; 3.animation-timing-function: ease-in-out;
- animation-delay: 1s;
- animation-fill-mode(动画停留在): none(动画没开始时)/forwards(结束)/backwards(第一帧)/both;
- animation-direction(动画播放方向):
- normal(正向)/alternate(交替慎用)/reverse(反向)/alternate-reverse(反向交替慎用);
- animation-iteration-count(播放次数): 3/infinite(无限);
- steps(10)函数实现分步过渡
- animation-play-state(用于让动画保持突然终止时的状态):running(例如悬停时播放)/paused(非悬停时暂停)； 注意这个属性不能简写
