1. 浏览器渲染原理

步骤

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

image.png

2. CSS 动画的两种做法(transition 和 animation)

transition

中文是过渡的意思,用来补充中间帧

语法

image.png

不是所有的属性都可以过渡
image.png

animation

但是如何处理中间点呢?
可以使用animation
image.png