web资源优化之图片加载的时机

最新推荐文章于 2023-01-01 22:21:17 发布

llwswqw

最新推荐文章于 2023-01-01 22:21:17 发布

阅读量164

点赞数

本文链接：https://blog.csdn.net/llwswqw/article/details/42364289

版权

前言

图片资源是WEB项目中很重要的组成部分，也是交互设计中一个很重要的体现，往往一张图能胜过千言万语，所谓“一图胜白言”就是这个道理。然后大量的图片也会给服务器带来很大的压力，据统计：图片内容已经占到了互联网内容总量的62%，也就是说超过一半的流量和时间都用来下载图片，那么问题就来了。如何最大化优化图片资源，图片优化的手段有那些？本章就首先谈谈通过图片的加载时机来优化WEB性能。

即时加载机制

即时加载是最常见的加载方式了，我们一般都是通过给img标签指定具体的src值，那么等页面渲染的时候，遇到该标签的话，就会下载该指定的URL图片，并且渲染出来。常用的形式如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <img src="http://img.wallpapersking.com/Big7/1440900/2008320/22220017.jpg" alt=""/>
    <img src="http://img.wallpapersking.com/Big7/1440900/2008320/22220017.jpg" alt=""/>
    <img src="http://www.kpbz.net/uploads/allimg/091103/1233HD334-7.jpg" alt=""/>
    <img src="http://pic3.bbzhi.com/xitongbizhi/gaoduibidujingmeigaoqingkuan/computer_kuan_193023_18.jpg" alt=""/>
</body>
</html>

如果在现代浏览器运行上面的代码你会发现以下几点：

大部分浏览器都会并发下载图片，图片的下载没有阻塞。
src的值如果相同，也只会下载一次，也就是说相同的图片，不会多次下载。
图片的下载和渲染会阻塞整个页面的渲染。
图片越大，下载的时间也就越长。

通过上面的几点的阐述，我们可以即时加载的机制运用的场景是：图片量少，页面少于3屏比较适合这种技术，向一般的企业宣传网站比较适合采取这种选型。

预先加载机制

预加载图片是提高用户体验的一个很好方法。图片预先加载到浏览器中，访问者便可顺利地在你的网站上冲浪，并享受到极快的加载速度。这对图片画廊及图片占据很大比例的网站来说十分有利，它保证了图片快速、无缝地发布，也可帮助用户在浏览你网站内容时获得更好的用户体验。

和上面介绍的一样，预先加载的原理是预知用户将发生行为，提前加载后用户所需的图片。还不够理解嘛，那假设你是一个爱好动漫的动漫迷，那也应该经常看相应的漫画吧。以下面的漫画为例。

一般，一页的漫画有好几屏，等页面把漫画加载好了，我们就慢慢地品味、鉴赏漫画，慢慢底往下拉动滚动条，看完了当前页，我们按下链接跳到下一页面，重复如此。

我们有没有想过这样的问题：当当前页面加载好了的时候，我们慢慢欣赏漫画的这段时间，能不能用来加载后一页或者两页的漫画呢。当我们看完当前页，进入下一页的时候，由于前面已经加载完毕，页面瞬间加载完毕，这种赶紧，是不是很爽呢。这就运用到了前面前面所说的预先加载技术。

对于预先加载技术的实现，大家可以参考下面帮助文档中第一个链接来根据自己运用的场景来实现。

延迟加载机制

图片延迟加载也称懒加载，通常应用于图片比较多的网页，如果一个页面图片比较多，且页面高度或宽度有好几屏，页面初次加载时，只显示可视区域的图片，当页面滚动的时候，图片进入了可视区域再进行加载，这样可以显著的提高页面的加载速度，更少的图片并发请求数也可以减轻服务器的压力。如果用户仅仅在首屏停留，还可以节省流量。如果TAB中的图片较多，也同样可以应用于TAB中，当触发TAB时再进行图片的加载。

图片延迟加载的原理：页面初次加载时获取图片在页面中的位置并缓存(每次取offset的值会引发页面的reflow)，计算出可视区域，当图片的位置出现在可视区域中，将src的值替换成真实的地址，此时图片就开始加载了。

当页面滚动的时候，再判断图片已经缓存的位置值是否出现在可视区域内，进行替换src加载。当所有的图片都加载完之后，将相应的触发事件卸载，避免重复操作引起的内存泄漏。将整个窗口看成是一个大容器，那么也可以在页面中设置一个小容器，在小容器中也同样可以实现图片的延迟加载。

像淘宝、天猫等电商就大量采用了该技术，因为对它们来说，要展示的图片太多了，即时加载又非常耗时间，而且用户不一定会看完所有的图片。采用延迟的加载基本上就能解决图片过多的问题。

延迟加载的机制实现可以参考雨夜带刀《图片延迟加载的实现》的文章。如果你使用Jquery的话，它有一个插件也是来解决这方面的问题，github地址为：https://github.com/tuupola/jquery_lazyload/，就本人感觉而言，使用非常简单，文档详细，所以极力推荐给大家用。

PS:由于本文只对核心原理做介绍，并不会过多涉及到代码设计这块。