浏览器渲染原理
步骤
- 根据HTML构建DOM树（不懂DOM树，就直接理解为HTML构建的一棵树，别纠结）
- 根据CSS构建CSSOM树
- 两颗树合成渲染树（render tree）
- Layout布局（文档流、盒模型、计算位置和尺寸）
- Paint绘制（边框颜色、文字颜色等，类比画画中的上色过程）
- Compose合成（据CSS层叠关系，将每一层合起来变成一层，展示画面）
三种更新方式
- JS/CSS > 样式 > 布局 > 绘制 > 合成（例如，删除画面中部分影响了其他元素的布局时）
- JS/CSS > 样式 > 绘制 > 合成（例如，添加背景颜色）
- JS/CSS > 样式 > 合成（例如，改变transform）
其他
- 一般不使用left做动画，而用transform（变形），不需要重新绘制。
- JS优化：使用requestAnimationFrame代替setTimeout或setInterval
- CSS优化：使用will-change或translate
- 更多优化直接搜就好。
- 每个属性触发哪一种更新方式，搜。
CSS 动画的两种做法
transition (过渡)
作用：补充中间帧。
语法
- 格式
transition:margin-right 1s linear 10s
/*transition:属性名 时长 过渡方式（可省略） 延迟（可省略）*/
transition:margin-right 1s 10s /*省略过渡方式*/
transition:margin-right 1s linear /*省略延迟*/
transition:margin-right 1s /*省略过渡方式与延迟*/
- 可以直接用all代表所有属性
transition:all 1s
- 可以用逗号分隔不同的属性
transition:left 2s,top 4s
- 过渡方式包括：linear/ease/ease-in(淡入)/ease-out(淡出)/ease-in-out(淡入淡出)/cubic-bezier/step-start/step-end/steps
并不是所有属性都能过渡，找的到过渡规律就可以过渡。
- display:none=>block不可以过渡
- 一般从有到无，改变透明度可以，但是用上述表达不可。
- 背景颜色可以过渡。
- opacity透明度可以过渡（从有到无的效果下，会占位置，没有做到真正的“无”，visibility也是）。
- visibility:hdden=>visible可以过渡。
animation
使用步骤
- 声明关键帧
- 添加动画
@keyframes语法（声明关键帧）
- from to
@keyframes xxx{
from{
transform: scale(1.0);
}
to{
transform: scale(1.5);
}
}
- 百分数
@keyframes heart{
0%{
transform: scale(1.0);
}
60%{
transform: scale(1.2);
}
100%{
transform: scale(1.5);
}
}
animation语法（添加动画）
- 简写格式
animation:时长 过渡方式 延迟 次数 方向 填充模式 是否暂停 动画名称
/*填充模式（fill-mode）：确定动画在执行之前和之后这两个阶段应用的样式*/
- 过渡方式：参照transition
- 次数：1（整数）或1.2（小数）或者infinite（无限次）
- 方向：normal/reverse（相反的）/alternate（交替）/alternate-reverse
- 填充模式：none/forwards/backwards/both
- 是否暂停：running/paused
- 以上所有属性都有对应的单独属性
