一、浏览器渲染原理
要了解浏览器渲染页面的过程，首先得知道一个名词——关键渲染路径。关键渲染路径是指浏览器从最初接收请求来的HTML、CSS、javascript等资源，然后解析、构建树、渲染布局、绘制，最后呈现给客户能看到的界面这整个过程。
用户看到页面实际上可以分为两个阶段：页面内容加载完成和页面资源加载完成，分别对应于DOMContentLoaded和Load。
DOMContentLoaded事件触发时，仅当DOM加载完成，不包括样式表，图片等
load事件触发时，页面上所有的DOM，样式表，脚本，图片都已加载完成
浏览器渲染的过程主要包括以下五步：
- 浏览器将获取的HTML文档解析成DOM树。
- 处理CSS标记，构成层叠样式表模型CSSOM(CSS Object Model)。
- 将DOM和CSSOM合并为渲染树(rendering tree)将会被创建，代表一系列将被渲染的对象。
- 渲染树的每个元素包含的内容都是计算过的，它被称之为布局layout。浏览器使用一种流式处理的方法，只需要一次绘制操作就可以布局所有的元素。
- 将渲染树的各个节点绘制到屏幕上，这一步被称为绘制painting。
需要注意的是，以上五个步骤并不一定一次性顺序完成，比如DOM或CSSOM被修改时，亦或是哪个过程会重复执行，这样才能计算出哪些像素需要在屏幕上进行重新渲染。而在实际情况中，JavaScript和CSS的某些操作往往会多次修改DOM或者CSSOM。
二、CSS 动画的两种做法（transition 和 animation）
Transition（过渡）这个概念之前，CSS是没有时间轴的。也就是说，所有的状态变化，都是即时完成。
当鼠标放置于缩略图之上，缩略图会迅速变大。注意，缩略图的变大是瞬间实现的。
img{ height:15px; width:15px; }
img:hover{ height: 450px; width: 450px; }
img{ transition: 1s; } 图片放大的过程需要1秒
我们还可以指定transition适用的属性，比如只适用于height。这样一来，只有height的变化需要1秒实现，其他变化（主要是width）依然瞬间实现
img{ transition: 1s height; }
transition的状态变化速度（又称timing function），默认不是匀速的，而是逐渐放慢，这叫做ease。
img{ transition: 1s ease; }
除了ease以外，其他模式还包括
（1）linear：匀速
（2）ease-in：加速
（3）ease-out：减速
Animation
用 @keyframes 定义动画名 ，以及该名称包含的动画需要变化的属性及内容
animation-name:元素绑定动画名（@keyframes定义的动画名）
animation-duration：动画持续时间
animation-timing-function：动画变换速率
animation-delay：开始时间。触发动画后多久开始动画
animation-interation-count: 循环播放次数。（infinite 是无限次）
animation-direction: 动画运动方向 （normal/ alternate: 默认值为normal，如果是normal动画每次循环都是向前播放的，也就是每次都是从0%播放到100%。 另一个值是alternate，设定animation-direction为alternate，那么就会从0%播放到100%后就会从100%播放到0%。结合 animation-interation-count:infinite，可以形成动画来回循环播放。例如实现“如何使一个小球来回无限运动”）
7.animation-play-state(running/pause)：动画的播放状态(其中running是默认值，就是在播放。而paused就是暂停播放。而当动画暂停播放后，再重新设置为running的时候，就会从原来的位置重新播放。)
.animation{
width: 300px;
height: 300px;
position: absolute;
font-size: 22px;
color: white;
background-color: brown;
animation: ccchange 3s ease alternate infinite;
}
@keyframes ccchange {
0%{
width: 300px;
height: 300px;
background-color: brown;
}
40%{
width: 500px;
height: 500px;
background-color: seagreen;
}
60%{
width: 400px;
height: 400px;
background-color: coral;
}
100%{
}
}
