CSS 总结(渲染原理+css动画transition/anim

浏览器渲染原理

---

---

浏览器渲染必经之路

---

步骤：

• 根据HTML构建HTML树（DOM）
• 根据css构建css树（CSSOM）
• 将前面两棵树合并成一颗渲染树（render tree）
• Layout布局（包括文档流，盒模型，计算大小位置等可以理解为素描）
• Paint绘制（文字颜色，边框颜色，阴影等画出来可以理解为上色）
• Composit合成（根据层叠关系展示画面）

三棵树

---

浏览器渲染三棵树.png

Paint绘制渲染

---

1. 打开开发者工具
2. 底部如果没用控制台什么的按esc调出
3. 如果没有rendering工具，在三个原点（more tool）的地方调出
4. 勾选第一个<input type="checkbox"> Painting Flashing

5. 在调试运行过程中，如果页面有重新painting的时候，就会出现绿色的闪动，便于了解和理解painting过程

   
   打开浏览器 Paint Flashing

样式更新

---

1. 极少数的时候运用鼠标hover等方式更新
2. 绝大多数用的是JS更新样式

• 一些例子

div.style.backgroundcolor='red' //新人才会在js里面用.style
div.style.display='none'
div.classList.add('red')  //高手会在js里面改样式
div.remove()

那写四种情况的渲染方式有没有不同呢？

• 三种常见的JS更新样式

1. 全路渲染

   
   全路渲染.png

2. 跳过layout

   
   跳过layout.png

3. 跳过layout和paint.png

   
   跳过layout和paint.png

• 如何知道哪些css属性触发了哪些步骤的渲染呢，
  有人提供了一个网站，csstriggers
  csstrigger

渲染优化

---

比如把left变成transform
比如css优化：使用will-change或者translate
比如JS优化：使用requestAnimationFrame代替setTimeout/setInterval
分步骤，每一步都可以优化，参考谷歌官方教程csstriggers看css具体哪些属性渲染了哪些步骤

CSS 动画

---

---

transition: all 2s;
transform:scale(1.3) ;
transform:translateX(30%) ;
transform:translate(30%,20px) ;
transform:translate3d(30%,20px,1px) ;
transform:rotate(45deg) ;

animation: .5s heart infinite alternate-reverse;
@keyframes heart {
  0%{
    transform: scale(1);
  }
  100%{
    transform: scale(1.2);
  }
@keyframes indentifier{
0%{top:0;left:0;}
30%{top:50px;}
100%{top:100px;left:100%;}
}

transform

四个常用功能：

1. 位移translate
2. 缩放scale
3. 旋转rotate
4. 倾斜skew

• 一般都会配合transition过渡
• inline元素不支持transition，先变成block

transform支translate