懒加载和预加载

1.懒加载

Web应用程序做的最多就是和后台数据库交互，而查询数据库是种非常耗时的过程。当数据库里记录过多时，查询优化更显得尤为重要。为了解决这种问题，有人提出了缓存的概念。

缓存就是将用户频繁使用的数据放在内存中以便快速访问。在用户执行一次查询操作后，查询的记录会放在缓存中。当用户再次查询时，系统会首先从缓存中读取，如果缓存中没有，再查询数据库。缓存技术在一定程度上提升了系统性能，但是当数据量过大时，缓存就不太合适了。

因为内存容量有限，把过多的数据放在内存中，会影响电脑性能。而另一种技术，懒加载可以解决这种问题。

懒加载（Load On Deman）是一种独特而又强大的数据获取方法，它能够在用户滚动页面的时候自动获取更多的数据，而新得到的数据不会影响原有数据的显示，同时最大程度上减少服务端的资源耗用。

懒加载也就是延迟加载。
当访问一个页面的时候，先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径（这样就只需要请求一次，俗称占位图），只有当图片出现在浏览器的可视区域内时，才设置图片真正的路径，让图片显示除了。这就是图片懒加载。

为什么使用懒加载？

很多页面，内容很丰富，页面很长，图片较多。比如说各种商城页面。这些页面图片数量多，而且比较大，少说百来K，多则上兆。要是页面载入就一次性加载完毕。估计大家都会等到黄花变成黄花菜了。

懒加载的原理是什么？

页面中的img元素，如果没有src属性&#x