懒加载延迟非关键资源加载以提升首屏速度，预加载提前获取关键资源以优化后续体验。前者通过Intersection Observer实现图片或模块按需加载，后者利用rel="preload"或new Image()提前请求资源。两者结合可显著提升网页性能与用户体验，合理控制加载时机是关键。
懒加载和预加载是优化网页性能的两种重要策略，它们通过控制资源的加载时机来提升页面响应速度与用户体验。JavaScript 中可以通过多种方式实现这两种机制。
懒加载（Lazy Loading）
懒加载指的是延迟加载非关键资源，只有当用户需要时才进行加载，比如图片进入可视区域、某个功能模块被触发等。这种方式能减少初始加载时间，节省带宽。
常见实现方式包括：
- 使用 Intersection Observer API 监听元素是否进入视口，进入后再加载真实图片或内容。
- 将图片的 src 属性替换为 data-src，初始用占位图，滚动到位置时再赋值真实地址。
- 对非首屏组件或模块使用动态导入（import()），实现代码分割和按需加载。
示例代码：
立即学习“Java免费学习笔记（深入）”；
const images = document.querySelectorAll('img[data-src]');
const imageObserver = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src;
img.removeAttribute('data-src');
imageObserver.unobserve(img);
}
});
});
images.forEach(img => imageObserver.observe(img));
预加载（Preloading）
预加载则是提前加载未来可能需要的资源，以便在真正使用时能快速呈现。适用于关键资源、下一页内容、大文件等场景。
常用方法有：
- 使用 link[rel="preload"] 告诉浏览器提前加载指定资源，如字体、脚本、关键 CSS 等。
- 通过创建 new Image() 实例预加载图片，设置其 src 触发请求。
- 利用 fetch() 或 new XMLHttpRequest() 预先获取数据接口内容。
- 在用户行为预测基础上预加载，例如鼠标悬停在链接上时预加载目标页资源。
示例代码：
立即学习“Java免费学习笔记（深入）”；
// 预加载图片
function preloadImage(url) {
return new Promise((resolve, reject) => {
const img = new Image();
img.onload = resolve;
img.onerror = reject;
img.src = url;
});
}
// 使用
preloadImage('/images/banner-high-res.jpg').then(() => {
console.log('图片已预加载');
});
适用场景对比
懒加载适合首屏之外的内容，比如长页面中的图片、视频、非核心 JS 模块；预加载更适合用户即将访问的内容，比如轮播图下一张、分页下一页数据、登录后可能用到的模块。
合理搭配两者能显著提升性能：首屏关键资源预加载，非关键资源懒加载，形成流畅体验。
基本上就这些，掌握好加载时机，才能让网页又快又省。不复杂但容易忽略。
