以Webkit引擎的工作流程为例，了解浏览器的工作原理：
浏览器的工作原理如图所示：
浏览器加载一个HTML页面需进行如下操作：
-
解析HTML —> 构建DOM树
-
加载样式 —> 解析样式 —> 构建样式规则树
-
加载javascript —> 执行javascript代码
-
把DOM树和样式规则树匹配构建渲染树
-
计算元素位置进行布局
-
绘制页面
对于图片资源的加载和渲染时机：
-
解析HTML【遇到
<img>标签加载图片】 —> 构建DOM树 -
加载样式 —> 解析样式【遇到背景图片链接不加载】 —> 构建样式规则树
-
加载javascript —> 执行javascript代码
-
把DOM树和样式规则树匹配构建渲染树【加载渲染树上的背景图片】
-
计算元素位置进行布局
-
绘制【开始渲染图片】