浏览器的渲染原理
渲染步骤
-根据HTML构建HTML树（DOM）
-根据CSS构建CSS树（CSSOM）
-将两棵树合并成一颗渲染树（render tree）
-Layout布局（文档流、盒模型、计算大小和位置）
-Paint绘制（把边框颜色、文字颜色、阴影等画出来）
-Compose合成（根据层叠关系展示画面）
三棵树长啥样？
如何更新样式
一般来说用JS更新样式
例如：
-div.style.background = 'red'
-div.style.dispay = 'none'
-div.classList.add('red')
-div.remove()直接删掉节点
三种更新样式的方式
1.全走
div.remove() 会触发当前消失，其它元素relayout
2.跳过layout
直接repaint+composite
3.跳过layout和paint
改变transform，只需composite
注意必须全屏查看效果，在iframe里看会出现问题
我们并不知道那个属性触发了什么流程，但是有人一个个试过并且将这些属性分享了
tramsform 更好的做动画方式
原理
示例
transform: translateX(0 =>300px);
transition过度属性可以自动脑部中间帧
性能
由于过程中并没有repaint，所以transform性能比改left性能好。
transform常用功能
-位移 translate
-缩放 scale
-旋转 rotate
-倾斜 skew
注意：这些功能一般都需要配合transition过度，inline元素不支持transform，需要先变成block
translate常用写法示例
translateX(<length-percentage>);
translateY(<length-percentage>);
translate(<length-percentage>,<length-percentage>);
translate3d(x,y,z);
更多用法参考MDN
scale常用写法示例
scaleX(<number>);
scaleY(<number>);
scale(<number>,<number>);
scale使用较少，因为容易出现模糊的情况
rotate常用写法示例
rotate(<angle>|<zero>]);
rotateX(<angle>|<zero>]);
rotateY(<angle>|<zero>]);
rotateZ(<angle>|<zero>]);
另外，还有rotate3d，由于很复杂这里不做说明，需要的时候再去查阅MDN文档。
rotate常用于制作loading的动画
skew常用写法示例
这个是真的很少很少用，有需要的时候再查阅吧！
**transform可以组合使用
过渡 transition
作用
补充中间帧
语法
transition: 属性名|时长|过度方式|延迟
transition: left 200ms linear;
可以用逗号分隔不同属性；
transition: left 200ms, top 400ms;
可以用all代表所有属性；
transition: all 200ms；
常用的过度方式是 linear，具体的过度方式可以查阅MDN
并不是所有的属性都能用过渡
display:none => block无法使用过渡，一般会改成visibility：hidden=> visible
display 和 visibility的区别是：display:none是彻底消失，不在文档流中占位，浏览器也不会解析该元素；visibility:hidden是视觉上消失了，可以理解为透明度为0的效果，在文档流中占位，浏览器会解析该元素。
过度必须要有起始
一般只有一次动画，或者两次
比如hover和非hover状态的过渡
制作动画的方法
使用两次transform
.a===transform===>.b
.b===transform===>.c
**使用setTimeout或者监听transitionend事件来指导是否已经进行到中间点。
使用animation
#demo.start{
animation: xxx 1.5s;
}
@keyframes xxx{
0%{
transform:none;
}
50%{
transform: translateX(200px);
}
100%{
transform: translateX(200px),
translateY(200px);
}}
keyframes的完整语法
form to
@keyframes xxx{
from{
transform: translateX(200px);
}
to{
transform: translateX(200px),
translateY(200px);
}}
百分数写法
@keyframes xxx{
0%{
transform:none;
}
50%{
transform: translateX(200px);
}
100%{
transform: translateX(200px),
translateY(200px);
}}
animation的缩写语法
缩写语法
animation: 时长|过渡方式|延迟|次数|方向|填充方式|是否暂停|动画名;
时长： 1s或者1000ms
过渡方式：跟transition取值一样，例如linear
次数：可以是整数也可以是小数或者infinite
方向：reverse|alternate|alternate-reverse
填充模式：none|forwards|backwards|both
是否暂停：paused|running
以上的所有属性都有对应的单独属性
