5分钟带你认识懒加载

懒加载就是将网站中的资源或对象初始化推迟到需要的时候。

通俗来说，就是将网页上繁多的图像的加载推迟到可视窗口才展示。这种懒加载通常也称作“延迟加载”，能够帮助网站提升性能和用户体验。当用户在访问一个网站页面时，首先把网页的图片或者其他的元素替换成为一张内存很小的图片的路径，俗称为“占位图”，当这些图片被滚动到网页可视区域时，才将图片显示出来，这就是我们所讲的懒加载。接下来5分钟带你详细认识一下懒加载。

使用原因？

懒加载多应用于图片较多的网站，因为这个属于网站整体流量的重心。网站在进行HTTP请求时，一次性加载网站所有的图片，容易造成站点的带宽拥挤，造成负荷，网站的响应速度自然下降了，更谈何用户体验？选择懒加载最核心的思想便是，当用户想要浏览那部分的网站内容时，加载该部分的数据，如此一来，便能在一定程度上减缓服务器的压力。

原理

使用懒加载，最典型的实现方式：先将需要懒加载的图片的SRC属性隐藏，将其中的SRC属性链接到同一张“占位图”，再将真正的图片地址藏在自定义的标签属性中，使用JS代码监听图片元素，当窗口加载到图片时，再将SRC属性还给图片，达到懒加载的目的。从技术层面来讲，页面上的图片，倘若缺少SRC属性，浏览器在发送请求时，便不会将其包含在内，只有通过JS代码为其再加上SRC属性，才会请求下载图片。

优点

• 能够提升用户的访问体验，减少等待加载的时间，避免了网站被拖慢的风险；
• 减少因为一次性加载过多的资源文件而导致JS代码的加载过慢，影响网站的加载速度；
• 当用户打开网站时，浏览器向服务器端发送HTTP请求，但是不需要请求懒加载的内容，页面启动只加载网站首屏图片，这样做明显减缓了服务器的压力，减少资源的加载，减轻负担。

懒加载&预加载

与懒加载恰恰相反，预加载却是提前加载好网站图片，将其缓存在本地中，当用户要查看时，便直接从本地文件中提取查看。这两种技术的本质上便是比一样了，一个延迟加载，一个却提前加载好，相应地它们各自对服务器端的压力也不同。懒加载的主要目的的优化服务器的前端性能，减少发送的请求数量延缓压力，而预加载则可以说得上是捡了芝麻丢掉西瓜，牺牲服务器的前端性能来换取更好的服务体验。

不过，使用预加载还是有好处的，至少喜欢逐一访问的访客会更喜欢这样的网站。建议使用预加载的网站一定要使用最大承受能力的服务器，带宽数据加大才能承受正常的预加载，这样做的情况下预加载网站的唯一确定变成了：“贵”。

懒加载与CDN

懒加载和CDN技术，说到底其实是缩短网站页面的加载时间，优化用户浏览网站的体验感的两大方法。那说实在的，在前端性能优化方面，两者之间水平如何？

• 懒加载确实是在一定程度上减缓了服务器的压力，避免了很多不必要的资源请求下载，但是倘若用户进行大量请求时，它也于事无补；
• CDN服务在缓存资源、提高用户的网速这方面是一把好手，但是用户不需要的资源也统统下载下来了。
• 其实较好的方法，便是将这两者之间结合起来，拧成一股绳，在为网站提供CDN加速服务的同时，采用懒加载的方式，辩证统一，发挥最大效用。

总结

随着网络发展，网站上的图片视频的资源信息越来越多，数量大小都在逐渐增加。为此我们通过使用懒加载渲染网页上不重要的资源。举个懒加载非常实用的例子：当我们在浏览电商网站时，图片繁多，但是只有你在滑到的网页位置，才将图片给你展示完全。像这样灵活运用懒加载的网站，通常运营起来也会更省心。