关于前端图片的懒加载

所谓懒加载实际上非常简单，只是在正常的img标签里用data-src代替真正的src，这样可以让那些不用马上加载的图片，先显示为一个统一的加载图，然后监听滚轮的位置，当滚轮到达了预期的位置之后，就用js获取img标签的data-src然后填到src里，于是img标签就自动向后台求请这张图片的真正资源了，以实现一边拖动一边加载图片的效果。

此功能一般用于同一个页面内有许多的图片要加载。由于一个页面同时向后台发送的请求是有数量限制的(一般浏览器是4到8个，IE67是2个)，所以如果页面上有很多CSS、JS、图片资源，就会出现要加载很久才能展示页面的情况，懒加载就能有效缓解此问题。

也由于以上原因，一直以来前端的解决方案除了上面所说的懒加载以外，还有不少：如CSS、JS的合并压缩；小图片都合到一张大图里用定位来显示; 以及用base64的格式转化图片等，都是通过减少请求数量的形式去解决问题的。此处用base64格式转化图片的方式能实现减少请求数量的效果是因为它会在HTML初始化时当成HTML的一部成被传输到客户端，所以是跟HTML同一个请求的，它有个问题是无法被浏览器缓存，所以只适用于不常用的图片，否则还是以正常的图片格式比较好，那可以利用浏览器的缓存，下次加载就不会那么慢了。

此处的缓存与html页面缓存不同，此处的缓存是浏览器的自发性行为，而manifest的缓存机制是主动的针对整个页面的，用于实现离线应用。

manifest的值可以是绝对地址，也可以是相对地址，只要有这个属性，页面就会被缓存下来，与此同时，设置了manifest的页面，也就不用在后台的manifest文件里设置此页面为缓存了，但是同源下的缓存最大限制是5M。

后台的manifest文件实际上是一个简单的文本文件，它分三部分：

CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存

NETWORK - 在此标题下列出的文件需要与服务器连接，且不会被缓存

FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）

例如：

CACHE MANIFEST

# 2018-06-01  v1.0.0

/theme.css

/logo.gif

/main.js

NETWORK:

login.html

FALLBACK:

/html5/ /404.html

当需要更新缓存时，只需修改此manifest文件就行，修改注释也会引起更新。