渲染机制

什么是 DOCTYPE 及作用

告诉浏览器以何种规则去解析这个文档,判断文档类型。

渲染过程

解析 HTML 结构 -> 解析 CSS 生成 cssom 树 -> 结合成 render 树进行渲染

Layout: render Tree 不包含 html 具体内容,不知道元素具体该画在哪个位置,布局计算了每一个对象的准确的位置以及大小

重排 reflow —— 位置改变、大小改变等

DOM 结构都有自己的盒模型,这些都需要浏览器根据各种样式计算出它的位置

  • 增删改 DOM 节点,会导致 reflow 或 repaint
  • 当你移动 DOM 位置,或动画
  • 修改 CSS 样式(改变宽高、是否显示等等)
  • resize 窗口,或滚动的时候
  • 修改网页默认字体

重绘 repaint

当浏览器的各种盒子的位置、大小、颜色等等确定后,浏览器就开始绘制

  • DOM 改动
  • CSS 改动
Last Updated: 8/20/2019, 3:36:58 AM