浏览器渲染原理
步骤
- 根据html构建html树
- 根据css构建css树
- 将两棵树合并成一颗渲染树
- 根据渲染树进行layout布局（把文档流、盒模型的大小位置算出来）
- paint填色（把边框颜色、文字颜色、阴影等需要画出来）
- compose合成（根据层叠关系展示画面，合并图层）
- 一般用js来更新样式
- Div.classList.add(‘red’)直接添加类更有效率
三种更新方式，三步全走（布局、绘制、合成）、只走后两步（如只改背景）、只合成
- www.csstriggers.com 试哪种属性走哪种流程
- 各种优化相关文章
- developers.google.com/web/fundame…
JS优化
- 使用requestAnimationFrame代替setTimeout或setInterval
CSS优化
- 使用will-change或translate
- 使用translate代替left做动画
Transform四个常用功能
- Translate位移 括号内的值可为数字和百分数，三个轴x、y、z（垂直于视点，需配合父元素内的perspective确定视点），translate（-50%，-50%）可做绝对定位元素居中（配合left：50%和top：50%）
- Scale缩放 数字为原来的几倍，可同时写xy的值
- Rotate旋转 数字+deg 意思为顺时针旋转多少度，可沿xyz轴转动（默认为z）
- Skew倾斜 数字+deg 意思为顺时针旋转多少度，可沿xy轴转动
一般都需要配合transition过渡 Inline元素不支持transform需要先变成block
css动画的两种做法（transition&animation）
Transition 过渡
作用：补充中间帧
- 属性名 过渡时长 过渡方式 延迟
- 可以用all代表所有属性
- Opacity要配js remove（）使用
- Display：none→block改为visibility：visible→hidden
Animation
属性名
- animation-name，animation-duration, animation-timing-function，animation-delay，animation-iteration-count，animation-direction，animation-fill-mode 和 animation-play-state
- 时长 过渡方式 延迟 次数 方向 填充模式 是否暂停 动画名（配合@keyframes使用）
- 时长：一般为s或ms
- 过渡：取值方式和transition一样
- 次数：数字或者infinite（无限循环）
- 方向：reverse倒转alternate来回 alternate-reverse
- 填充模式：none forwards backwards both
- 是否暂停：pasuse running
其他感想
- 简单animation用法
- 声明关键帧的名字 时间
- @keyframes添加各百分比路程的动作
- 如果中间要停顿一下，可以用两个transform声明两个变化后的状态（第二个要包含第一个），或者直接使用animation声明关键帧
