浏览器渲染原理

CSSOM 树和 DOM 树合并成渲染树，然后用于计算每个可见元素的布局，并输出给绘制流程，将像素渲染到屏幕上.

步骤

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

图示

三种更新方式

CSS 动画的两种做法（transition 和 animation）

transition

transition可以为一个元素在不同状态之间切换的时候定义不同的过渡效果。在annimation里面主要功能是补充中间帧。

语法

• transition：属性名 | 时长 | 过渡方式 | 延迟，如transition：left 500ms linear

• 可以用逗号分隔两个属性，如 left 200ms ,top 400ms

• 可以用all代表所有属性

• 过渡方式：linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier | step-start | step-end | steps

• 不是所有属性都能过渡。 display: none =>/<= block没办法过渡。 一般改成 visibility: hidden =>/<= visible。 但是background背景和opacity透明度能过渡。

animation

animation 属性是 animation-name，animation-duration, animation-timing-function，animation-delay，animation-iteration-count，animation-direction，animation-fill-mode 和 animation-play-state 属性的一个简写属性形式。

语法

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

• 时长：1s / 1000ms

• 过渡方式：跟transition取值相同

• 次数：3 / 2.4 / infinite

• 方向：reverse | alternate | alternate-reverse

• 填充模式：none | forwards | backwards | both

• 是否暂停： paused | running

keyframe

通过在动画序列中定义关键帧（或waypoints）的样式来控制CSS动画序列中的中间步骤。

@keyframes identifier {
  0% { top: 0; left: 0; }
  30% { top: 50px; }
  68%, 72% { left: 50px; }
  100% { top: 100px; left: 100%; }
}

感想：语法好多，看得好累。