浏览器的工作流程

以Webkit引擎的工作流程为例，了解浏览器的工作原理：

浏览器的工作原理如图所示：

  

浏览器加载一个HTML页面需进行如下操作：

• 解析HTML —> 构建DOM树

• 加载样式 —> 解析样式 —> 构建样式规则树

• 加载javascript —> 执行javascript代码

• 把DOM树和样式规则树匹配构建渲染树

• 计算元素位置进行布局

• 绘制页面

对于图片资源的加载和渲染时机：

• 解析HTML【遇到<img>标签加载图片】 —> 构建DOM树

• 加载样式 —> 解析样式【遇到背景图片链接不加载】 —> 构建样式规则树

• 加载javascript —> 执行javascript代码

• 把DOM树和样式规则树匹配构建渲染树【加载渲染树上的背景图片】

• 计算元素位置进行布局

• 绘制【开始渲染图片】