面试：渲染机制

面试问题

1. 什么是DOCTYPE及作用
2. 浏览器渲染过程
3. 重排Reflow
4. 重绘Repaint
5. 布局Layout

什么是DOCTYPE及作用

• DTD 告诉浏览器，我是什么文档类型，浏览器根据DTD来判断用什么来解析
• DOCTYPE 通行浏览器是是什么DTD，是什么文档类型

常见的DOCTYPE有那些？

知道4.0有严格模式和宽松模式OK就

浏览器渲染过程

1. 处理 HTML 标记并构建 DOM 树
2. 处理 CSS 标记并构建 CSSOM 树
3. 将 DOM 与 CSSOM 合并成一个渲染树
4. 根据渲染树来布局，以计算每个节点的几何信息
5. 将各个节点绘制到屏幕上

DOM Tree

CSSOM Tree

Render Tree

 Layout

重排Reflow

定义：DOM结构中的各个元素都有自己的盒子（模型），这些都需要浏览器 根据各种样式来计算并根据计算结果将元素放到它该出现的位置，这个过程称之这reflow

 

触发reflow

• 增删改DOM节点，会导致reflow或repaint
• 移动DOM，搞个动画
• 修改CSS样式
• resize窗口，或滚动
• 修改网页默认字体

重绘Repaint

定义：页面要呈现的内容，要画在屏幕上

触发repaint：条件太多，DOM改动，CSS改动即触发 

考点：documentFragemnt()