1 浏览器渲染

1.1 浏览器渲染步骤

1. HTML (DOM树)
2. CSS(CSS树)
3. DOM树和CSS树组合成render(渲染树)
4. layout布局(文档流,盒模型等大小,位置)
5. paint绘制(背景,边框颜色,阴影等画出来)
6. Compose合成(根据层叠关系展示画面)

1.2 JS更新样式之后浏览器会产生3中情况

1. JS->Style->layout(重新布局)->repaint(重绘)->Composite(合成)
2. JS->Style->repaint(重绘)->Composite(合成)
3. JS->Style->Composite(合成)

• 总结: JS改变CSS的某些样式后
  • 会改变layout,需要执行1.重新布局,重绘,合成.
  • 会改变绘制,需要执行2.重绘,合成.
  • 改变后仅仅合成就可以.

1.3 如何优化浏览器渲染?

• 在JS改变样式时
  • 尽可能多使用不需要重新layout或者repaint的属性样式.
  • 例如: transform
  • 不要使用left做动画或者移动,会导致layout.

2 transition 过渡

• 过渡是一个元素在不同状态之间的切换.
• transition: 过渡属性 时间 过渡延迟 过渡函数.

2.1 过渡属性

• 过渡属性: 可以选某个属性,也可以使用all选择所有可以过渡的属性.
• transition-delay: 过渡延迟
• transition-duration: 过渡持续时间
• transition-timing-function: 过渡函数

2.2 过渡函数

transition-timing-function: ease //慢-快-慢(默认)
transition-timing-function: ease-in //加速运动
transition-timing-function: ease-out //减速运动
transition-timing-function: ease-in-out //快-慢
transition-timing-function: linear //匀速
transition-timing-function: steps(4, end) //分步::将过渡分步完成效果.

3 animation

• 过渡是元素一个状态到另外一个状态的切换
• 动画是元素在多个状态之间切换

3.1 关键帧(动画设置)

@keyframes  animal {
    from {}
    to {}
}
/* 或者 */
@keyframes  animal {
    0% {}
    25% {}
    50% {}
    100% {}
}

3.2 动画属性

• animation: 动画名字 持续时间 运行函数 动画运行方向 动画运行次数.

• animation-name: //动画的关键帧名称

• animation-duration: //动画的持续时间

• animation-timing-function: //动画函数(和过渡的函数一致)

• animation-iteration-count: n次或者 infinite 无数次

• animation-direction :: 动画运行的方向

  • normal 默认值 0---100%
  • reverse 100%---0
  • alternate 跑马灯 0---100%---0%
  • alternate-reverse 逆向跑马灯 100%---0%---100%

• animation-play-state: 动画状态

  • running 运动
  • parused 暂停