JS 案例：触底懒加载的前世今生

2023-12-12 17:31:50

JS案例：触底懒加载

随着互联网的飞速发展，web应用程序也变得越来越复杂，系统的响应速度对用户体验十分重要，其最主要的影响来源于服务端数据库查询，以及DOM渲染。

数据库查询数据量大的情况下，我们可以进行分页配合前端分页或者懒加载进行优化，而这篇文章主要讲的是如何处理后端百万级数据对DOM渲染造成的影响。

在实现过程中，首先需要明确一个问题，即页面加载完成时，实际上页面上的所有内容都已经加载完成，但是当我们肉眼看到这些内容时，实际上是DOM解析完毕，以树的形式挂载到页面上的。

众所周知，数据太多会造成DOM树的解析成本过高，影响页面加载速度，从而影响用户体验。所以，我们要在DOMContentLoaded事件触发之前，即DOM树解析完成之前，将百万级数据中的部分内容加载，然后将剩余的内容在DOMContentLoaded事件触发之后，按需加载，这样既可以保证页面加载速度，又可以保证页面内容的完整性。

由此可以得出，懒加载的原理其实很简单，即只加载当前页面可见的内容。原理虽简单，但实现起来却并不容易。

首先，我们需要知道哪些内容是当前页面可见的，哪些内容是当前页面不可见的，这可以通过DOM API或JavaScript事件来实现。

其次，我们需要知道如何加载当前页面不可见的内容，这可以通过AJAX请求或动态创建DOM元素来实现。

最后，我们需要知道如何确保当前页面可见的内容加载完成，这可以通过事件监听或轮询来实现。

通过以上步骤，我们就可以实现一个简单的懒加载功能。

懒加载的优势和局限性

懒加载的优势有很多，包括：

减少页面加载时间
提高用户体验
节省带宽资源
提高网站性能

然而，懒加载也有一些局限性，包括：

实现起来可能比较复杂
可能会对SEO产生负面影响
可能会导致页面闪烁

懒加载的实现方法

懒加载的实现方法有很多，其中最常见的有以下几种：

图片懒加载： 图片懒加载是指只加载当前页面可见的图片，当用户滚动页面时，再加载剩余的图片。图片懒加载可以大大减少页面加载时间，提高用户体验。
视频懒加载： 视频懒加载是指只加载当前页面可见的视频，当用户点击视频播放按钮时，再加载视频。视频懒加载可以节省带宽资源，提高网站性能。
Iframe懒加载： Iframe懒加载是指只加载当前页面可见的Iframe，当用户滚动页面时，再加载剩余的Iframe。Iframe懒加载可以减少页面加载时间，提高用户体验。
JS懒加载： JS懒加载是指只加载当前页面可见的JS文件，当用户滚动页面时，再加载剩余的JS文件。JS懒加载可以减少页面加载时间，提高用户体验。