请简述html文件结构图,简述网页的渲染机制

Webkit 主流程

Mozilla 的 Gecko 呈现引擎主流程

上图为主流两种主流内核的渲染主流程

虽然 Webkit 和 Gecko 使用的术语略有不同，但整体流程是基本相同的。

Gecko 将视觉格式化元素组成的树称为“框架树”。每个元素都是一个框架。Webkit 使用的术语是“呈现树”，它由“呈现对象”组成。对于元素的放置，Webkit 使用的术语是“布局”，而 Gecko 称之为“重排”。对于连接 DOM 节点和可视化信息从而创建呈现树的过程，Webkit 使用的术语是“附加”。有一个细微的非语义差别，就是 Gecko 在 HTML 与 DOM 树之间还有一个称为“内容槽”的层，用于生成 DOM 元素。

浏览器工作大流程

根据上图，依次介绍每一步

1. Html、Style Sheets、Script加载

当我们的浏览器获得html文件后，会自上而下的加载，并在加载过程中进行解析和渲染。 加载说的就是获取资源文件的过程，如果在加载的过程中，遇到外部css文件和图片，浏览器会另外发出一个请求，来获取css文件和相应的图片，这个请求是异步的，并不会影响html文件。 但是如果遇到javascript文件，html文件会挂起渲染的线程，等待javascript加载完毕后，html文件再继续渲染。

为什么html需要等待javascript呢？因为javascript可能会修改DOM，导致后续的html资源白白加载，所以html必须等待javascript文件加载完毕后，再继续渲染。这也就是为什么javascript文件要写在底部body标签前的原因。

2. 构造树

html的渲染过程就是将html代码按照DOM: Document Object Model，浏览器将HTML解析成树形的数据结构，简称DOM

CSSOM: CSS Object Model，浏览器将CSS解析成树形的数据结构，简称CSSOM。

Render Tree: DOM和CSSOM合并后生成Render Tree，如下图：

构造树

3. layout和reflow

计算每个Frame(也就是每个Element)的位置，这又叫layout和reflow过程。

Repaint——屏幕的一部分要重画，比如某个CSS的背景色变了。但是元素的几何尺寸没有变。

Reflow——意味着元件的几何尺寸变了，我们需要重新验证并计算Render Tree。是Render Tree的一部分或全部发生了变化。这就是Reflow，或是Layout。(HTML使用的是flow based layout，也就是流式布局，所以，如果某元件的几何尺寸发生了变化，需要重新布局，也就叫reflow)reflow 会从这个root frame开始递归往下，依次计算所有的结点几何尺寸和位置，在reflow过程中，可能会增加一些frame，比如一个文本字符串必需被包装起来。