1. 浏览器渲染过程

步骤

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

2. 如何更新样式

一般用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。

每个属性触发什么流程

3. CSS动画优化

看Google写的文章就行。

4. CSS动画的两种做法

transition过渡

作用：补充中间帧。

语法：

• transition: 属性名 时长 过渡方式 延迟; 例如transition: left 200ms linear
• 可以用逗号分隔两个不同属性 例如transition: left 200ms, top 400ms;
• 可以用all代表所有属性 例如transition: all 200ms;
• 过渡方式具体看MDN。 注意：并不是所有属性都能过度。

display: none <=> block 没法过渡，一般改成 visibility: hidden <=> visible。

animation动画

语法：

• animation: 时长 | 过渡方式 | 延迟 | 次数 | 方向 | 填充模式 | 是否暂停 | 动画名;
• 时长： 1s或者1000ms。
• 过渡方式： 跟transition取值一样。
• 次数： number或者infinite。
• 方向： reverse | alternate | alternate-reverse。
• 填充模式： none | forwards | backwards | both。
• 是否暂停： paused | running。