浏览器渲染原理
当用户在浏览器地址栏输入URL地址并完成导航过程后，浏览器进程把数据交给了渲染进程。渲染过程有以下几个步骤：
- 第一步是处理HTML标记并构造DOM树。HTML标记包括开始和结束标记，以及属性名和值。DOM树描述了文档的内容。元素是第一个标签也是文档树的根节点。树反映了不同标记之间的关系和层次结构。嵌套在其他标记中的标记是子节点。
- 第二步是处理CSS并构建CSSOM树。浏览器将CSS规则转换为可以理解和使用的样式映射。浏览器遍历CSS中的每个规则集，根据CSS选择器创建具有父、子和兄弟关系的节点树。与HTML一样，浏览器需要将接收到的CSS规则转换为可以使用的内容。
- 第三步是将DOM和CSSOM组合成一个Render树，计算样式树或渲染树从DOM树的根开始构建，遍历每个可见节点。Render树保存所有具有内容和计算样式的可见节点——将所有相关样式匹配到DOM树中的每个可见节点，并根据CSS级联确定每个节点的计算样式。
- 第四步是在渲染树上运行布局以计算每个节点的几何体。布局是确定呈现树中所有节点的宽度、高度和位置，以及确定页面上每个对象的大小和位置的过程。回流是对页面的任何部分或整个文档的任何后续大小和位置的确定。
- 最后一步是将各个节点绘制到屏幕上。绘画包括将元素的每个可视部分绘制到屏幕上，包括文本、颜色、边框、阴影和替换的元素（如按钮和图像）。
- 当文档的各个部分以不同的层绘制，相互重叠时，必须进行合成，以确保它们以正确的顺序绘制到屏幕上，并正确显示内容。
CSS动画的两种做法（transition和animation）
-
transition过渡可以为一个元素在不同状态之间切换的时候定义不同的过渡效果。 transition语法：transition CSS 属性是 transition-property，transition-duration，transition-timing-function 和 transition-delay 的一个简写属性。可以用逗号分隔两个不同属性，可以用all代表所有属性。过渡方式有linear、ease、ease-in、ease-out等。 但并不是所有属性都能过渡。
-
CSS animations 使得可以将从一个CSS样式配置转换到另一个CSS样式配置。动画包括两个部分:描述动画的样式规则和用于指定动画开始、结束以及中间点样式的关键帧。创建动画序列，需要使用animation属性或其子属性，该属性允许配置动画时间、时长以及其他动画细节，但该属性不能配置动画的实际表现，动画的实际表现是由 @keyframes规则实现。通过使用@keyframes建立两个或两个以上关键帧来实现。每一个关键帧都描述了动画元素在给定的时间点上应该如何渲染。 animation的子属性有:
- animation-delay：设置延时，即从元素加载完成之后到动画序列开始执行的这段时间。
- animation-direction：设置动画在每次运行完后是反向运行还是重新回到开始位置重复运行。
- animation-duration：设置动画一个周期的时长。
- animation-iteration-count：设置动画重复次数， 可以指定infinite无限次重复动画。
- animation-name：指定由@keyframes描述的关键帧名称。
- animation-play-state：允许暂停和恢复动画。
- animation-timing-function：设置动画速度， 即通过建立加速度曲线，设置动画在关键帧之间是如何变化。
- animation-fill-mode：指定动画执行前后如何为目标元素应用样式。 因为动画的时间设置是通过CSS样式定义的，关键帧使用percentage来指定动画发生的时间点。0%表示动画的第一时刻，100%表示动画的最终时刻。因为这两个时间点十分重要，所以还有特殊的别名：from和to。这两个都是可选的，若from/0%或to/100%未指定，则浏览器使用计算值开始或结束动画。 也可包含额外可选的关键帧，描述动画开始和结束之间的状态。
心得体会
CSS的学习要通过大量的应用与练习来巩固，当遇到看不懂的地方自己上手试验是最好的学习方法。
