Web图片资源的加载与渲染时机

最近在做图片预加载，用的的 new Image()，发现这样加载的图片尽然比css里面的图片优先加载，css不是比js先执行的吗？怎么还会比css里面的图片先加载呢？
后来就想想需要知道Web图片资源的加载与渲染时机。

浏览器的工作流程

要研究图片的加载和渲染时机，首先先了解浏览器的工作原理，以Webkit引擎为例：

从上图可以看出，浏览器加载一个web页面时，流程如下

• 浏览器解析html —> 生成DOM树🌲
• 加载css—>解析css—>生成css规则树🌲
• 加载js—>执行js
• 将DOM树和css规则树匹配构建成渲染树
• 计算元素位置进行布局
• 绘制页面
  从上面我们很难看出图片是什么时候加载的，用下面的图来看看图片加载和渲染的时机：
  
  总结：从上面可以看出，浏览器会在两个时间段加载图片
• 解析html的时候
• 构建渲染树的时候

图片加载与渲染规则

1、页面中不是所有的img标签和页面图片都会加载和渲染

• 设置了 display:none 的元素，图片会加载但是不会渲染到页面
• 重复的图片（路径是同一个，同一个路径图片加版本号还是只会加载一遍），图片只会被加载一次
• 不存在元素的背景图片，不会被加载
• 伪类背景图片如hover，只有触发hover是图片才会加载
• 设置透明度不会影响图片加载

应用

预加载

很多场景里图片是在改变或触发状态后才显示出来的，例如点击一个Tab后，一个设置display:none隐藏的父元素变为显示，这个父元素里的子元素图片会在父元素显示后才开始加载；又如当鼠标hover到图标后，改变图标图片，图片会在hover上去后才开始加载，导致出现闪一下这种不友好的体验。

在这种场景下，我们就需要把图片预加载，预加载有很多种方式:

• 若是小图标，可以合并成雪碧图，在改变状态前就把所有图标都一起加载了。

• 使用上文讲到的，设置了display:none属性的元素，图片不会渲染出来，但会加载。把要预加载的图片加到设置了display:none的元素背景图或标签里。

• 在javascript创建img对象，把图片url设置到img对象的src属性里

原文链接：https://segmentfault.com/a/1190000010032501#comment-area