渲染机制

一、什么是DOCTYPE及作用

DTD：文档类型定义，浏览器根据DTD判断解析和渲染页面的引擎

DOCTYPE作用是告诉浏览器当前文档包含的哪个DTD

二、常见的DOCTYPE有哪些？

HTML5：

HTML4 严格模式：包含所有HTML元素和属性，但不包括展示性和弃用的元素（如font）

HTML4 传统模式：包含所有HTML元素和属性，包括展示性和弃用的元素（如font）

三、浏览器渲染过程

渲染引擎首先通过网络获得所请求文档的内容，通常以8K分块的方式完成。下面是渲染引擎在取得内容之后的基本流程：

解析html以构建dom树与css树 -> 构建render树 -> 布局render树 -> 绘制render树

1、解析html以构建dom树与css树 

2、将dom树与css树合并生成渲染树

3、根据dom节点与css的定义计算各个元素在页面中的位置（即layout布局）

4、根据计算出的位置把内容绘制出来显示到屏幕上

Reflow（重排）：浏览器根据css样式计算并根据计算结果放到该出现的位置，这个过程就叫reflow

触发Reflow的条件：

1、增加、删除、修改DOM节点或移动DOM位置时，会触发Reflow或Repaint；

2、修改CSS样式的时候

3、修改网页默认字体时

4、滚动页面或ReSize窗口时

Repaint（重绘）：页面要呈现的内容画到屏幕上

触发Repaint的条件： DOM改动、CSS改动