1.浏览器渲染原理
浏览器渲染过程（步骤）
-
根据HTML构建HTML树（DOM）
-
根据CSS构建CSS树（CSSOM）
-
将两棵树合并成一颗渲染树（Render Tree）
-
Loyout布局（文档流、盒模型、计算大小和位置
-
Paint绘制（把边框颜色、文字颜色、阴影等画出来）
-
Compose合成（根据层叠关系展示画面）
参考文章
样式的三种更新方式
2.CSS 动画的两种做法（transition 和 animation）
transform
四个常用功能
- 位移 translate
- 缩放 scale
- 旋转 rotate
- 倾斜 skew
使用transform一般都配合transition过渡一起使用，inline元素不支持transform，使用前先变成block元素。
translate
常用写法transform:translateX/Y(<length-percentage>)或者transform:translate(<length-percentage>,<length-percentage>)，值写长度值或百分比表示在X轴和Y轴上进行二维上的平移
scale
scale() 用于修改元素的大小。可以通过向量形式定义的缩放值来放大或缩小元素，同时可以在不同的方向设置不同的缩放值。tramsform:scale(1)等同于变换: scaleX(1) scaleY(1)，建议少用，因为会出现模糊。
rotate
tramsform:rotate(45deg)默认是rotateZ()，指定的角度定义了旋转的量度。若角度为正，则顺时针方向旋转，否则逆时针方向旋转。
skew
tramsform:skew(<angle>)定义了一个元素在二维平面上的倾斜转换，用的较少，需要用时搜mdn
transition
作用
补充中间帧
语法
transition: 属性名 时长 过渡方式 延迟 ;可以用all表示所有属性- 过度方式有：linear（线性变化）| ease | ease-in | ease-out | ease-in-out | cubic-bezier | step-start | step-end | steps
- 并不是所有属性都可以过渡 display:none => block没法过渡，一般改成： visibility:hidden => visible
animation
作用
- animation 属性用来指定一组或多组动画，每组之间用逗号相隔
- 声明关键帧，添加动画
语法
animtion:时长 | 过渡方式 | 延迟 | 次数 | 方向 | 填充模式 | 是否暂停 | 动画名 ;- 时长1s或1000ms
- 过渡方式：根transition一样
- 方向：reverse | alternate | alternate-reverse
- 次数：3或者2.4或者infinite
- 填充模式：none | forwards | backwards | both
- 是否暂停：paused | running
- 以上属性都有对应的单独属性 有两种写法 第一种from...to...
@keyframes 动画名 {
from { transform: ; }
to { transform: ; }
}
第二种百分比写法
@keyframes xxx{
0%{transform: ;}
50%{transform: ;}
100%{transform: ;}
}
注：以上所有截图来自《饥人谷》
