1 CSS渲染

1、CSS渲染过程依次包括布局、绘制、合成，其中布局和绘制有可能被省略；

2、渲染原理：渲染树构建、布局及绘制；渲染性能; transform实现动画；

2 浏览器渲染过程

1、根据HTML构建HTML树（DOM）;

2、根据CSS构建CSS树（CSSOM）；

3、将两棵树合并成一颗渲染树（rendertree）；

4、layout布局（文档流、盒模型、计算大小和位置）；

5、paint绘制（把边框颜色、文字颜色、阴影等画出来）；

6、compose合成（根据层叠关系展示画面）；

3 如何更新样式

一般用JS来更新样式，例如：

div.style.background="red"

div.style.display="none"

div.classList.add('red')

div.remove()直接删除节点；

在效果上，加样式不如加类；

4 三种更新方式

查看CSS各属性触发什么： CSS Triggers；

5 CSS动画优化：

1、Google优化方法总结；

2、JS优化：使用requestAnimationFrame 代替 setTimeout 或setInterval；

3、CSS优化；使用will-change 或 translate ；

5 transform 变形

5.1 常用属性

1、位移：translate

2、缩放：scale

3、旋转：rotate

4、倾斜：skew

5.2 经验

1、一般都需要配合transition过渡；

2、inline元素不支持transition，需要先变成block；

3、可做绝对定位元素的居中；

translate（-50%，-50%）; 
left:50%;

4、scale缩放时，border的大小也会变，容易出现模糊，所以用的比较少；

5、 rotate一般用于360度旋转制作loading；

6、组合使用：transform：scale（0.5） translate（-100%，-100%）；

7、transform：none；取消所有；

6 transition 过渡

6.1 作用、语法

1、作用：补充中间帧；

2、语法：transition：属性名时长过渡方式延迟；

3、可以用逗号分隔两个不同属性：transition：left 200ms,top 200ms ；

4、可以用all 代表所有属性；

6.2 注意

1、并不是所有属性都能过渡，如：display：none=>block 没法过渡，一般改成visibility：hidden=>visible；

2、inline元素不支持transition，需要先变成block；

7 animation 动画

7.1 关键帧

keyframes MDN,两种写法：

@keyframes slidein {
  from {
    transform: translateX(0%);
  }

  to {
    transform: translateX(100%);
  }
}

或

@keyframes identifier {
  0% { top: 0; }
  50% { top: 30px; left: 20px; }
  50% { top: 10px; }
  100% { top: 0; }
}

7.2 缩写语法

animation - CSS（层叠样式表） | MDN (mozilla.org);

animation：时长 | 过渡方式 | 延迟 | 次数 | 方向 | 填充模式 | 是否暂停 | 动画名；

以上所有属性都有对应的单独属性；

8 visibility和display的区别

是否继承：

display不继承，visibility继承。父元素visibility值为hidden，子元素不可见，如果子元素单独给visibility赋值为visible则可见；元素的display属性设为none则整棵子树不可见。
是否占据空间：display:none 渲染时如同不存在，visibility:hidden 虽然看不见，但是其占据的空间会被白色占位。
属性值变化后是否重新渲染：display:none渲染，visibility :hidden不渲染；。

CSS基础6：动画