@程序员，一文掌握 Web 应用中的图片优化技巧！( 十 )_：@程序员

这个现象跟chrome的lazy-loading功能的实现机制有关。

首先，浏览器会发送一个预请求，请求地址就是这张图片的URL，但是这个请求只拉取这张图片的头部数据，大约2kb，具体做法是在请求头中设置range: bytes=0-2047。

而从这段数据中，浏览器就可以解析出图片的宽高等基本维度，接着浏览器立马为它生成一个空白的占位，以免图片加载过程中页面不断跳动。这很合理，总不能为了一个懒加载，让用户牺牲其他方面的体验吧？这个请求返回的状态码是206，表明客户端通过发送范围请求头Range抓取到了资源的部分数据。

然后，在用户滚动到图片附近时，再发起一个请求，完整地拉取图片的数据下来，这个才是我们熟悉的状态码200请求。可以预测到，如果以后这个属性被普遍使用，那一个服务器要处理的图片请求连接数可能会变成两倍，对服务器的压力会有所增大，但时代在进步，我们可以依靠HTTP2多路复用的特性来缓解这个压力，这时候就需要技术负责人权衡利弊了。