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

时间：2023-03-30 22:46:18 CSS

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

图片资源请求如下：对于设置了display:none属性的元素，图片不会被渲染，但是将被加载。原理在匹配DOM树和样式规则树构建渲染树时，只有可见的元素和它们对应的样式规则会被组合输出到渲染树，也就是说还有不可见的元素。在匹配DOM树和样式规则树时，如果在元素对应的样式规则中找到display:none，浏览器会认为该元素不可见，因此不会将该元素输出到渲染树。上述代码中，标签元素上的图片会在解析HTML时加载。将DOM树与样式规则树匹配构建渲染树时，遍历DOM树上的元素，发现元素对应的样式规则上找到background-image属性，会加载背景图片，但是由于该元素是不可见元素（对应样式规则上的diaplay:none），该元素及其对应的样式规则不会输出到渲染树中。绘制时，由于渲染树上不存在该元素，所以不会绘制该元素的背景图。

图片资源请求如下：如果设置了display:none属性元素的子元素，样式中的背景图片sheet不会被渲染，也不会被加载；标签的图片不会被渲染，但是会被加载。原理如上所述，在匹配DOM树和样式规则树时，如果元素对应的样式规则上有display:none，浏览器会认为该元素的子元素不可见，所以不会显示theelement元素的子元素输出到渲染树。当构建渲染树遇到设置了display:none属性的不可见元素时，不会继续遍历不可见元素的子元素，所以不会加载该元素中子元素的背景图。绘制时，由于渲染树上没有设置display:none属性元素，并且该元素的子元素没有变化，所以不会渲染该元素中子元素的背景图。重复image.img-blue{background-image:url(../image/blue.png);}