一、浏览器渲染原理

1. 浏览器渲染步骤

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

2. 更新样式

一般是采用JS来更新样式，比如：

div.style.background='red'
div.style.display='none'
div.classList.add('red)（此种情况属于加类）
div.remove()删除节点

有三种更新方式：

（1）全走 JS/CSS > 样式（ style） >布局（layout） > 绘制（paint） > 合成（composite）（例如： display remover():删除节点）

（2）跳过布局，JS/CSS > style >paint >composite，例如改变背景颜色等。

（3）跳过布局和绘制，JS/CSS > style > composite。例如transform.

如何查询属性触发的流程？csstriggers.com/

二、 transform

1. translate

X方向上：translateX ； Y方向上：translateY ;

Z方向上：translateZ ，由于z轴是垂直于屏幕的，需要提供视点，在父元素上perspective，例如perspective：1000px。

缩写：例如：

x、y方向 translate（50px,50px）；x、y、z方向translate3d（50px,50px,100px）

2. scale 缩放

X方向上：scaleX ; Y方向上：scaleY （可缩写）

3. rotate 旋转

绕X轴旋转：rotate、rotateX，例如rotateX（45deg）

绕Y轴旋转：rotateY ；绕Z轴旋转rotateZ.

4. skew 倾斜

skewX(15deg)——X水平方向倾斜15度； skewY(15deg)——Y竖直方向倾斜15度；

三、过渡 transition 和 animation

1. transition

transition：属性名时长过渡方式延迟时间（时间单位 s 、ms）

例如：transition：all 1s linear——全部都进行匀速过渡，过渡时间1s

常用的过渡方式：linear（匀速），ease-in（先慢后快），ease-out（先快后慢），ease-in-out（淡入且淡出），······

注意

并不是所有属性都可以使用 transition过渡：

display:none 和 display:block 不 transition 过渡，一般改用 visibility:hidden；和 visibility:visible
background背景颜色可以用transition过渡
opacity（透明度）可以用transition过渡

2. animation

其中，次数包括 infinite（无限次）| 方向有：reverse（反向）、alternate（先正向再反向交替）和 alternate-reverse（先反向再正向交替）。

当css动画有中间点时：

解决方法有两个：

使用两次transform ，先发生 b事件再发生 c事件，利用js里的setTimeout 或监听 transitionend 事件来得知中间点。
animation 与 @keyframes 例如：animation：xxx 1.5s （名称是xxx），再由 @keyframes 声明关键点。其中@keyframes写法有 from to 和百分数。

@keyframes xxx{
    0%{·····}
    50%{·····}
    100%{·····}
}

CSS 知识总结