目录
- 懒加载的概念
- 懒加载的特点
- 懒加载的实现原理
- 懒加载与预加载的区别
懒加载的概念
懒加载，也叫做延迟加载或按需加载，是一种用来优化网页性能的方法。在包含许多图片的长网页或应用中，如果一开始就加载所有图片，会导致页面加载缓慢，并且浪费用户的流量和服务器资源。
通过懒加载，页面在加载时只会加载当前可见区域的内容，而不会一次性加载所有图片。当用户滚动页面时，懒加载会动态地加载其他部分的内容，这样可以加快页面加载速度，减少数据传输量，并提高用户体验。
在前端开发中，懒加载常用于图片、视频以及需要滚动页面才能看到的内容，比如加载更多的帖子或商品。这种技术帮助页面在开始时只加载必要的内容，用户需要查看其他部分时再进行加载，从而减少初始加载时间。
总的来说，懒加载通过延迟加载页面内容或资源，能够提升页面加载速度，减少数据传输量，并优化用户体验，是一种重要的前端性能优化方法。
懒加载的特点
-
节省资源：懒加载能够减少服务器的负担和网络流量，因为它只在需要时加载内容，而不会一次性加载所有资源。
-
提升用户体验：通过懒加载，页面可以更快地展示给用户，避免长时间的等待，提高了用户的浏览体验。
-
避免加载过多图片的影响：使用懒加载可以防止过多的图片同时加载，从而避免影响其他资源文件的加载，确保网站应用的正常使用。
综上所述，懒加载通过节省资源、提升用户体验和避免加载过多图片的影响，为用户带来更快速的页面加载和更好的浏览体验，特别适用于长页面或包含大量资源的页面。
懒加载的实现原理
懒加载的实现原理主要涉及延迟加载页面中的内容，特别是图片和其他资源，以减少初始加载时的压力和等待时间。
具体来说，对于图片，它们通常是通过src属性来加载的。当网页加载时，浏览器会按照src的地址请求图片资源。懒加载的原理是利用HTML5中的data-xxx属性（这里以data-src为例）来存储图片的路径。在需要加载图片时，通过JavaScript将data-src中的图片路径赋值给src，这样就实现了图片的按需加载，即懒加载。
重点在于确定用户需要加载哪些图片。在浏览器中，用户可见区域内的资源是用户需要的资源。因此，当图片出现在可见区域时，我们可以获取图片的真实地址并赋值给图片元素即可。
对于实现懒加载，可以使用原生JavaScript。关键知识点包括：
window.innerHeight：浏览器可视区域的高度document.body.scrollTop || document.documentElement.scrollTop：浏览器已滚动的距离img.offsetTop：图片顶部相对于文档顶部的高度（包括滚动条的距离）- 图片加载条件：
img.offsetTop < window.innerHeight + document.body.scrollTop
总体来说，懒加载的实现原理是通过延迟加载页面中的资源，使页面根据用户的需求来获取和展示内容，以提高页面加载速度和用户体验。
懒加载与预加载的区别
懒加载和预加载是为了提高网页性能而采取的两种不同策略。它们的核心区别在于一个是延迟加载，一个是提前加载，而且实现方式和影响也略有不同。
懒加载（也被称为延迟加载）的核心思想是：在用户需要访问图片或其他资源时，再去加载这些内容。这个策略可以减轻服务器的压力，因为不需要一开始就加载所有资源。懒加载适用于网站中有很多图片，或者页面很长的情况，比如电商网站。它的实现原理是，当页面滚动时，判断图片是否进入了可视区域，如果是，就从事先保存好的真实路径中获取图片地址，然后赋值给图片的src属性，这样就实现了图片的延迟加载。
预加载则是在页面加载过程中提前加载可能会在后续访问中用到的资源。这样一来，当用户需要某些资源时，可以直接从缓存中获取，而不需要重新请求服务器，从而减少了等待时间，提高了用户体验。预加载通常应用于未来可能会用到的内容，例如提前加载下一个页面的资源、准备将要播放的视频或音频文件等。这样一来，用户在真正需要这些资源时，可以立刻获取，而不必等待加载时间。
- 懒加载是根据用户的实际需求来动态加载内容，以提高页面的初始加载速度和用户体验，适用于减轻服务端压力的场景。
- 预加载是提前加载将来可能会需要用到的资源，以确保用户在需要时能够立即获取，从而提升未来的访问体验。
持续学习总结记录中，回顾一下上面的内容：
懒加载是一种网页优化技术，其概念是延迟加载页面中的资源，特点是在用户需要访问时才加载，可以减轻初始加载压力和节省带宽。
实现原理是利用用户行为监测，将页面中的资源（如图片）的加载时机推迟至用户滚动或点击时，以减少初始加载时间。
懒加载与预加载的主要区别在于，懒加载是根据用户实际需求动态加载内容，而预加载是提前加载将来可能需要用到的资源，用于加快未来访问体验。
