浏览器渲染

  • 浏览器渲染过程：
    1. 构建HTML树DOM
    2. 构建CSS树CSSOM
    3. 将两颗树合并成一颗渲染树render tree
    4. Layout布局（文档流、盒模型，计算大小和位置）
    5. Paint绘制（画边框颜色，文字颜色等）
    6. Compose（垂直屏幕合成，根据层叠关系展示页面）
  • 页面的三种更新方式：
    1. JS/CSS > Style > Layout > Paint > Composite
      如 div.remove()，使得元素消失，其他元素重新布局
    2. JS/CSS > Style > Paint > Composite
      如只改变背景颜色
    3. JS/CSS > Style > Composite
      如只改变transform
    • 查看每个属性触发哪种更新方式：https://csstriggers.com/
    • 查看浏览器渲染过程：开发者工具 -> 按“Esc”调出Console -> 左上角点击出现菜单中的rendering -> 勾选Paint flashing -> 播放动画， 画面变绿则说明在repaint

动画优化

  • JS：用 resquestAnimationFrame 代替 setTimeout 或 setInterval
  • CSS：用 will-change 或 translate

transform

可任意组合 transform: translate(50px, 50px) scale(15deg 15deg) ;

  • translate:
    • translate(X, Y, Z): 简写
    • translateX(50px): 水平方向移动
    • translateY(50px): 竖直方向移动
    • translateZ(50px): 垂直屏幕方向移动，在二维平面上看不出效果，需在三维世界中看
      在父元素上设置视点perspective,
      1. <div class="wrapper">
      2. <div class="demo"> </div>
      3. </div>
      ```css .demo {
      border: 1px solid #f00; width: 100px; height: 100px; margin: 50px; }

.demo:hover { transform: translateZ(50px); /数值越大离屏幕越近，数值变小往视点走/ }

.wrapper { border:1px solid #000; perspective: 1000px; /设置视点/ } ```

  • scale: 用的较少，容易产生模糊
    • scale(X, Y): 简写
    • scaleX()：水平方向缩放
    • scaleY()：竖直方向缩放
  • rotate:
  • skew:
  • 一般配合transition过度
  • inline 元素不支持transform，需要先变成block

CSS动画

作用：补充中间帧

  • transition: 属性名 时长 过度方式 延迟； 做一个动画动作
    • 过度方式：linear | ease | ease-in | ease-out
    • display: block -> display: none ， 会之直接没用，无法过度
  • animation：可做多个动画动作
  • 两次动画写法，有两种：
    1. 使用两次transform，使用setTimeout或transitionend监听
    2. 使用animation声明关键帧
  • 将动画停留在最后一刻，最后加forward： animation: bubble 1.0s forwards；

查看CS手册

https://developer.mozilla.org/zh-CN/docs/Web/CSS/Reference

练习

一起来画一只会眨眼的猪猪