一.浏览器渲染原理

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

3种更新方式

1. JS/CSS --> 样式 --> 布局 --> 绘制 --> 合成
2. JS/CSS --> 样式 --> 绘制 --> 合成
3. JS/CSS --> 样式 --> 合成

注意

• 具体哪个属性会省略哪一步需要慢慢尝试

二、CSS动画的两种做法

• 使用transtion过渡

.heart:hover{
  transform:scale(2.5);
  transition:all 2s;
}

• 使用animation过渡

#demo.start{
  animation:xxx 15s;
}
@keyframes xxx{
  0%{
    transform:none;
  }
  66.66%{
    transform:translateX(200px);
  }
  100%{
    transform:translateX(200px) translateY(100px); //需要记忆上次的位置
  }
  
}

注意：

• 并不是所有属性都能过渡
• display:none => block 无法过渡
• 一般改成 visibility:hidden => visible
• display:none 是彻底消失，不在文档流占位；visibility:hidden 是视觉消失，还是占位的