《CSS 知识总结》

• 动画例子：jsbin.com/wupizixusa/…

• 原理： 每过一段时间（setInterval做到）；将div移动一小段近距离；直到移动到目标地点

• 注意性能：绿色代表示重新绘制（repaint）了；

  css渲染过程包括布局、绘制、合成；

  其中布局和绘制有可能被忽略

• 查看渲染：开发者工具任意位置按esc，选择Rendering，Paint flasing

• 前端高手不用left做动画

  • 用transform（变形） js.jirengu.com/lojiz/1/
  • transform：translateX（0 => 300px)
  • 直接修改会被合成，需要一会修改
  • transition过渡属性可以自动脑补中间帧
  • 注意性能：并没有repaint（重新绘制）；比改left性能好

• 浏览器渲染过程

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

• 如何更新样式(一般用JS)

div.style.background = 'red'
div.style.display = 'none'
div.classList.add('red')
div.remove()    /*直接删掉节点*/

• 三种更新方式

  1. 全走，会触发当前消失，其他元素relayout（div.remove）

     js.jirengu.com/jagel/1/

  2. 跳过layout，直接repaint + composite(改变背景颜色)

     js.jirengu.com/jidam/1/

  3. 跳过layout和paint（改变transform，只需composite；注意必须全屏查看效果，在iframe里看有问题）

     js.jirengu.com/wusew/1/

• 知道CSS属性触发什么流程：一个个试 csstriggers.com/

• CSS动画优化

  • 没什么技术含量，答案在Google的文章里
    web.dev/stick-to-co…
  • CSS 优化：使用will-change或tanslate
  • JS 优化：使用reqestAnimationFrame代替setTimeout或setlnterval

• transform完整介绍
  developer.mozilla.org/zh-CN/docs/…

1. 四个常用功能
   translate缩放
   scale旋转
   rotate倾斜
   skew经验
   
2. 经验
   
   • 一般都需要配合 transition 过渡
     
   • inline 元素不支持 transform，需要先变成block

• 实践：css跳动的心（需要想象力） jsbin.com/doxahugiga/…
  animation改进的心 jsbin.com/wuxuwewahe/…