浏览器渲染工作流程以及图像加载和渲染规则

1浏览器渲染工作流程

浏览器的工作方式. 以Webkit引擎的工作流程为例，浏览器在加载HTML页面后执行以下操作:

解析HTML [遇到标签以加载图像] —>构建DOM树

加载样式->解析样式[背景图像链接未加载]->构建样式规则树

加载javascript —>执行javascript代码

匹配DOM树和样式规则树以构建渲染树[将背景图像加载到渲染树上]

计算布局的元素位置

绘制[开始渲染图片]

2个图像加载和渲染规则

并非所有标签图像和样式表背景图像都已加载到页面上. 对于具有display: none属性设置的元素，图像将不会呈现但会被加载.