浏览器渲染原理
渲染过程：
- 根据HTML标记并构建DOM树
- 根据CSS构建CSS树（CSSOM）
- 将两棵树合并成一棵渲染树（render tree
- layout布局（文档流，盒模型，计算大小或位置等）
- paint绘制（边框颜色，背景颜色，阴影等绘制）
- compose合成（根据层叠关系展示画面）
关于dom树，css树以及最后显示的render树
更新样式的三种方式
1.JS / CSS > 样式 > 布局 > 绘制 > 合成
根据浏览器的渲染原理，若是开发者更新了样式（即元素的几何属性，类似于宽高，位置等），则浏览器会检查所有属性然后重新绘制，最后再合成。之前用到的改变left法，就会每次都让浏览器重新布局、渲染和合成
2.JS / CSS > 样式 > 绘制 > 合成
如果开发者只是更新了paint only的属性（例如背景，文字颜色等），由于不影响页面布局，则浏览器直接执行绘制。
3.JS / CSS > 样式 > 合成
在开发者只是更改一个既不更改布局也不需要绘制的属性时，浏览器将只执行合成，例如动画(animation)和transform。
CSS 动画的两种做法（transition 和 animation）
transition
顾名思义，就是过渡，能够设置一个元素从一个位置到另一个位置的过渡，持续时间、延迟、拉伸，旋转等等变化，能够减少浏览器的渲染，节约资源
animation
都是动画，但是transition不能够确定中间点，此时就要用animation
animation的两种用法：
@keyframes animationName1 {
from{
transform:translateX(0%);
}
to{
transform:translateX(100%);
}
}
@keyframes animationName2 {
0%{transform:translateX(0%);}
25%{transform:translateX(25%);}
60%{transform:translateX(60%);}
100%{transform:translateX(100%);)}
animation能够控制的选项更多：
总结经验：
学习css，最重要的就是自己看，写代码以达到自己想要的效果，不能空想，如果有不知道的地方先google，关键词+mdn，熟悉用法，f12，加以调试，不断调试已达到自己理想的结果！
使用js改变样式的时候最好时直接给一个元素增加或者移除一个类，使用类中的数据，而不是直接修改某个属性的值（代码繁琐不美观且易出错）。
