一、浏览器渲染过程

1. 渲染步骤

1. 根据HTML构建HTML树（DOM）
2. 根据 CSS 构建 CSS 树 （CSSDOM）
3. 将两棵树合并成一棵渲染树（render tree）
4. Layout 布局 （文档流、盒模型、计算大小和位置）
5. Paint 绘制 （把边框颜色、文字颜色、阴影等画出来）
6. Compose 合成（根据层叠关系展示画面）

2. 三种不同的更新渲染方式

• 全走（JS/CSS > 样式 > 布局 > 绘制 > 合成）
  • 如 div.remove() 会触发当前消失，其他元素 relayout
• 跳过 layout (JS/CSS > 样式 > 布局 > 合成)
  • 改变背景颜色，直接 repaint + composite
• 跳过 layout (JS/CSS > 样式 > 布局 > 合成)
  • 改变背景颜色，直接 repaint + composite

二、CSS 动画优化

Google 文档

• JS 优化
  • 使用 requestAnimationFrame 代替 set TImeout 或 setInterval
• CSS 优化
  • 使用 will-change 或 translate

1. transform

四个常用功能

位移 translate()

• 常用写法
  • translateX(<length-percentage>)
  • translateY(<length-percentage>)
  • translate(<length-percentage>,<length-percentage>)
  • translateZ(<length>) 且父容器 perspective
  • translate3D(x,y,z)
  • JSBin示例
• 注意点
  • translate(-50%,-50%) 可做绝对定位元素的居中

缩放 scale()

• 常用写法
  • scaleX(<number>)
  • scaleX(<number>)
  • scaleX(<number>)
  • JSBin示例
• 注意点
  • 用的少，因为容易出现模糊

旋转 rotate()

• 常用写法
  • rotate([<angle>|<zero>])
  • rotateZ([<angle>|<zero>])
  • rotateX([<angle>|<zero>])
  • rotateY([<angle>|<zero>])
  • rotate3d
  • JSBin示例
• 注意点
  • 一般用于 360 度旋转制作 loading 加载动画

倾斜 skew()

• 常用写法
  • skewX([<angle>|<zero>])
  • skewY([<angle>|<zero>])
  • skew([<angle>|<zero>])
  • JSBin示例

transform 多重效果

• 组合使用
  • transform:scale(0.5 translate(-100%.-100%);
  • transform:none; 取消所有

2. transition 过渡

作用

补充中间帧

语法

• transition: 属性名 时长 过渡方式 延迟
• transition: left 200ms linear
• 可以用逗号分隔两个不同的属性
• transition: left 200ms, top 400ms
• 可以用 all 代表所有属性
• transition: all 200ms;
• 过渡方式有：linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier | step-start | step-end | steps
• JSBin 红心示例

注意点

• 有些属性不能过渡
  • display: none => block 不能过渡
• 过渡必须有始有终
  • 一般动画只有一次或两次

3. animation 动画

动画中间转折点处理方法

1. 使用两次 transform
   • .a === tansform ===> .b
   • .a === tansform ===> .b
   • 用 setTimeout 或者监听 transitionend 事件
   • JSBin示例
2. 使用 animation
   • 声明关键帧 @keyframes

// * 写法1
@keyframes slidein {
  from {
    transform: translateX(0%);
  }

  to {
    transform: translateX(100%);
  }
}

// * 写法2
@keyframes identifier {
  0% { top: 0; left: 0; }
  30% { top: 50px; }
  68%, 72% { left: 50px; }
  100% { top: 100px; left: 100%; }
}

让动画停在最后一帧的方法

• 在 animation 属性最后加 forwards

animation 缩写语法

• animation: 时长 | 过渡方式 | 延迟 | 次数 | 方向 | 填充模式 | 是否暂停 | 动画名
• 时长：1s 或者 1000ms
• 过渡方式： 跟 transition 取值一样，如 linear
• 次数：3 或者 2.4 或者 infinite
• 方向：reverse | altenative | alternative-reverse
• 填充模式： none | forwards | backwards | both
• 是否暂停：paused | running
• 以上所有属性都有对应的单独属性
• JSBin红心示例