浏览器渲染原理

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

如何更新样式

一般JS来更新样式

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

有三种不同渲染方式

第一种，全走 div.remove() 触发当前消失，其他元素relayout
第二种，跳过layout 改变背景颜色，直接repaint+composite
第三种，跳过layout和paint 改变transform，只需composite （注意必须全屏查看效果，在iframe里看问题）

可以用这个网址了解每个属性触发什么流程

transform 完整介绍

4个常用功能

位移 translate
缩放 scale
旋转 rotate
倾斜 skew

经验：

一般都需要配合transition过度
inline元素不支持transform，需要先改变成block

1. transform：translate（位移）

translateX(数值px)
translateY(数值px)
translate(数值px,数值px)
translateZ(数值px) 且父容器加perspective
translate3d(x,y,z)

（单位px或%）

经验：
多看MDN语法
translate(-50%,-50%)可做绝对定位元素居中

#demo{ 
  left: 50%; top: 50%; 
  transform: translate(-50%,-50%); 
}

2. transform: scale(缩放)

scaleX(倍数)
scaleY(倍数)
scale(倍数，倍数)

经验：|用的较少容易出现模糊 | 放大时边框也随之放大 | 默认倍数为1

3. transform: rotate（旋转）

rotate(数值deg)
rotateX(数值deg)
rotateY(数值deg)
rotate3d(太过复杂)

经验：一般用于制作360度旋转loading | 用到时搜MDN

4. transform: skew（倾斜）

skewX(数值px)
skewY(数值px)
skew（数值px）经验：用的较少用到时搜MDN

5. transform 可以组合使用

transform：scale（0.5）translate（-100%，-100%）；
transform：none；取消所有

transition 过渡

作用 : 补充中间帧

语法 :

transition: 属性名时长过渡方式延迟

例：transition: left 200ms linear 2s

可以用逗号分隔开两个不同的属性

例：transition: left200ms，top400ms

可以用all代表所有属性

例：transition: 200ms

常用过度方式有：ease（默认）|linear（匀速）

详细看MDN文档

注意：

display: none => block 不能过渡
要改成visibility: hidden => visible
background 颜色可以过渡
opacity 透明度可以过渡

animation

缩写语法

animation: 时长 | 过渡方式 | 延迟 | 次数 | 方向 | 填充模式 | 是否暂停 | 动画名
时长: 1s 或者 1000ms
过渡方式: 跟transition的取值一样，如linear
次数: 3 或 n 或者 infinite
方向: reverse | alternate | alternate-reverse
填充模式: none | forwards（停留在最后一帧）| backwards | both
是否暂停: paused | running
这些属性都有对应的单独属性