web图片资源加载与渲染时机笔记

Posted 2020-09-27 上山打松鼠

浏览器的工作流程就不说了，网上有很多资料。

1.首先，页面中不是所有的<img>标签图片和样式表中的背景图片都会加载

2.当给一个元素设置了display:none属性（此元素为<img>或有背景图的其他元素），图片不会渲染出来，但是会加载。

3.设置了display:none属性的元素的子元素，样式表中的背景图片既不会渲染出来，也不会进行加载，而<img>标签的图片不会渲染，但会加载。

4.重复图片，浏览器只加载一次（熟悉浏览器特性的人都知道，浏览器在请求资源时，会先判断是否有缓存，如果有缓存且缓存未过期，则会从缓存中读取资源，不会再次请求）。

5.不存在元素的背景图片不会被加载。

6.伪类的背景图片不会被加载，只有在触发伪类的时候，伪类样式上的背景图片才会被加载。

应用：

一、展位图，当使用样式表中的背景图片作为占位符时，要把背景图片转为base64格式。这是因为背景图片加载的顺序在<img>标签后面，背景图片可能会在<img>标签图片加载完成后才开始加载，达不到想要的效果。

二、预加载

1.若是小图标，可以合并成雪碧图。

2.把需要预加载的图片加到设置了display:none属性的元素背景图或<img>标签里。

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