目录
前端开发中优化页面性能的懒加载和预加载技术
一、懒加载
（一）基础概念
（二）应用场景与原因
（三）优势体现
（四）技术原理
（五）实现步骤
（六）实现方式
二、预加载
（一）基础概念
（二）应用场景与原因
（三）实现方式
三、总结
在前端开发领域，页面性能的优劣直接影响用户体验和业务转化。随着网页内容日益丰富，加载速度成为关键痛点。懒加载和预加载技术应运而生，它们从不同角度优化资源加载策略，有效提升页面加载速度与用户交互体验。本文将深入剖析这两种技术的原理、应用场景及实现方法，帮助开发者掌握优化页面性能的关键技巧。
一、懒加载
（一）基础概念
懒加载，本质上是一种延迟加载机制。在页面初次加载时，并非将所有图片资源一股脑儿加载，而是先将图片路径设为一个极小的 1*1px 占位图路径。只有当图片即将进入浏览器可视区域时，才会将真实路径赋予图片，从而实现图片的加载与展示。这种策略有效减少了初始加载时的资源请求量，加快页面初始渲染速度。
（二）应用场景与原因
懒加载在电商商城、社交媒体等图片密集型页面有着广泛应用。以商城页面为例，大量商品图片若同时加载，会导致页面加载缓慢，甚至出现长时间白屏现象，严重影响用户体验。而懒加载技术可以确保只有用户视线即将触及的图片才会被加载，极大地减少了初始加载的资源开销，提升页面加载效率，为用户提供更流畅的浏览体验。
（三）优势体现
提升页面加载速度：减少初始加载时的图片数量，使页面能够快速呈现给用户，缩短用户等待时间，提升用户留存率。降低服务器负载压力：减少不必要的图片加载请求，节约服务器带宽资源，降低服务器运营成本。优化用户体验：用户无需长时间等待页面加载，能够快速浏览页面内容，提高用户满意度。
（四）技术原理
懒加载的技术原理基于img元素的特性。当img标签未设置src属性时，浏览器不会发起图片下载请求。我们利用这一特性，先用占位图占位，将真实图片路径存储在自定义属性（如data - original ）中。当图片进入可视区域，通过 JavaScript 将自定义属性中的真实路径赋值给src属性，从而触发图片加载。
（五）实现步骤
1、设置自定义属性：将图片的真实路径存储在自定义属性（如data - original）中，而src属性则设置为占位图路径。示例代码如下：
2、判断可视区域并加载：页面加载完成后，通过 JavaScript 代码实时判断图片是否进入用户可视范围。若进入可视范围，则将自定义属性中的真实路径赋值给src属性，实现图片加载。
（六）实现方式
1、基于元素距离和滚动监听计算：
通过计算元素距顶部的高度 - 页面被卷去的高度 <= 浏览器可视区的高度来判断图片是否应被加载。在页面滚动过程中，实时监听图片高度变化，一旦满足条件，立即触发图片加载逻辑。示例代码如下：
window.addEventListener('scroll', function() {
const imgs = document.querySelectorAll('img[data-original]');
const viewHeight = window.innerHeight || document.documentElement.clientHeight;
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
imgs.forEach(function(img) {
const rect = img.getBoundingClientRect();
const imgTop = rect.top + scrollTop;
if (imgTop <= viewHeight) {
img.src = img.dataset.original;
img.removeAttribute('data-original');
}
});
});
2、运用getBoundingClientRect()方法：
getBoundingClientRect()方法可获取元素相对浏览器视窗的位置信息。通过判断元素的位置属性是否在可视区内，决定是否加载图片。为避免滚动时频繁触发加载操作，通常使用节流函数控制函数调用频率。示例代码如下：
function throttle(func, limit) {
let inThrottle;
return function() {
const args = arguments;
const context = this;
if (!inThrottle) {
func.apply(context, args);
inThrottle = true;
setTimeout(() => inThrottle = false, limit);
}
};
}
function lazyLoad() {
const imgs = document.querySelectorAll('img[data-original]');
const viewHeight = window.innerHeight || document.documentElement.clientHeight;
imgs.forEach(function(img) {
const rect = img.getBoundingClientRect();
if (rect.top < viewHeight) {
img.src = img.dataset.original;
img.removeAttribute('data-original');
}
});
}
window.addEventListener('scroll', throttle(lazyLoad, 200));
3、借助IntersectionObserver API：
IntersectionObserver API 提供了一种异步观察目标元素与祖先元素或视口交集变化的方法。创建IntersectionObserver实例并传入回调函数，当被观察元素进入或离开视窗时，回调函数会被触发。当isIntersecting为true时，表明元素进入视窗，此时将真实图片路径赋给src属性，并取消对该元素的观察。示例代码如下：
const imgs = document.querySelectorAll('img[data-original]');
const observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.original;
img.removeAttribute('data-original');
observer.unobserve(img);
}
});
});
imgs.forEach(img => {
observer.observe(img);
});
二、预加载
（一）基础概念
预加载是一种提前加载资源的策略。在页面加载过程中，提前让浏览器请求并加载后续可能用到的资源，如图片、脚本、样式表等，并将这些资源存储在本地缓存中。当用户实际需要使用这些资源时，可直接从缓存中获取，无需再次发起网络请求，从而大大提高资源加载速度。
（二）应用场景与原因
预加载适用于内容丰富、资源较多的网页，如大型新闻网站、视频平台等。在这类网页中，若不进行预加载，用户在浏览过程中可能会遇到资源加载延迟的情况，影响用户体验。通过预加载技术，在页面加载时提前加载关键资源，可有效避免页面长时间空白，为用户提供更流畅的浏览体验。
（三）实现方式
以点击图片切换功能为例，每次切换图片后，创建新的img标签，并设置src属性为下一张图片路径，让浏览器提前加载。在页面加载时，先调用加载函数加载数组中的第一张图片，之后每次切换图片时，若还有后续图片，也调用加载函数进行预加载。示例代码如下：
三、总结
懒加载和预加载作为前端性能优化的重要技术，分别从延迟加载和提前加载的角度，有效提升了页面加载速度和用户体验。懒加载通过减少初始加载资源，提升页面初始渲染速度，降低服务器负载；预加载则通过提前缓存资源，避免用户使用时的等待。在实际开发中，开发者应根据项目需求和业务场景，灵活运用这两种技术，实现页面性能的最优化。同时，随着前端技术的不断发展，我们也应持续关注新的性能优化策略，为用户提供更优质的前端体验。