网页图片资源的加载和渲染时序

时间：2023-03-20 22:22:26 科技观察

本文研究页面上图片资源的加载和渲染时序，以便我们更好地管理图片资源，避免不必要的流量，提升用户体验。浏览器的工作流程要研究图片资源的加载和渲染，首先要了解浏览器的工作原理。以Webkit引擎的工作流程为例：从上图可以看出，浏览器加载一个HTML页面后，会进行如下操作：解析HTML—>构建DOM树并加载样式—>解析样式—>构建样式规则树并加载javascript—>执行javascript代码，将DOM树与样式规则树进行匹配，构建渲染树，计算元素位置，进行布局绘制。从上图中，我们不能直观的看出图片资源是什么时候开始加载的。下图是图片加载渲染的时序：解析HTML【遇到标签加载图片】—>构建DOM树加载样式—>解析样式【遇到背景图片链接加载不上】—>构建样式规则treeandloadjavascript—>执行javascript代码结合DOM树和styleruletree匹配构建渲染树【加载渲染树上的背景图片】计算布局绘制的元素位置【开始渲染图片】不是所有将加载图像加载和渲染规则页面中的标记图像和样式表背景图像。显示：无

图片资源请求如下：对于设置了display:none属性的元素，图片不会被渲染，但是会被加载。原理在匹配DOM树和样式规则树构建渲染树时，会将可渲染元素上的所有属性（如display:none属性和background-image属性）组合起来输出到渲染树。解析渲染树时，会加载标签元素上的图片，找到元素上的background-image属性时会加载背景图片。当绘制时发现元素上有display:none属性，则不会计算元素的位置，也就不会绘制元素。

图片资源请求如下：如果设置了display:none属性元素的子元素，则样式表中的背景图片不会berenderedorloaded;标签的图片不会被渲染，但是会被加载。原理就是上面说的，在构建渲染树的时候，只有可渲染的元素才会输出到渲染树中，也就是说还有不可渲染的元素。在匹配DOM树和样式规则树时，如果发现一个元素有display:none，浏览器会认为这个元素的子元素是不可渲染的，所以不会输出这个元素的子元素到渲染树。解析渲染树时，渲染树上没有设置display:none属性的元素的子元素，所以不会加载该元素中子元素的背景图。绘制时，由于渲染树上没有设置display:none属性元素的子元素，所以不会渲染该元素中子元素的背景图。重复Image.img-blue{background-image:url(../image/blue.png);}