惰性加载是前端性能优化的重要方案，通过延迟非必要资源的加载时机，减少初始页面加载的资源体积，缩短首屏渲染时间，提升用户访问体验。Javascript作为前端核心语言，提供了多种实现惰性加载的方式，适配不同的资源加载需求。
Javascript实现惰性加载的常见方式
1. 图片惰性加载
图片是页面中体积较大的资源，非首屏图片采用惰性加载可以大幅减少初始请求量。实现思路是监听页面滚动事件，判断图片是否进入可视区域，进入后再将data-src的属性值赋值给src属性触发加载。
// 获取所有需要懒加载的图片元素
const lazyImages = document.querySelectorAll('img[data-src]');
// 判断元素是否进入可视区域
function isInViewport(element) {
const rect = element.getBoundingClientRect();
return (
rect.top <= (window.innerHeight || document.documentElement.clientHeight) &&
rect.bottom >= 0
);
}
// 加载进入可视区域的图片
function loadLazyImages() {
lazyImages.forEach(img => {
if (isInViewport(img)) {
// 将data-src的值赋给src，触发图片加载
img.src = img.dataset.src;
// 加载完成后移除data-src属性，避免重复判断
img.removeAttribute('data-src');
}
});
}
// 初始加载时先执行一次
loadLazyImages();
// 监听滚动事件，滚动时再次判断
window.addEventListener('scroll', loadLazyImages);
2. 组件惰性加载
在单页应用中，非首屏需要的组件可以采用惰性加载，减少初始打包体积。如果使用的是现代前端框架，通常可以通过动态导入实现组件懒加载。
// Vue3中实现组件惰性加载
import { defineAsyncComponent } from 'vue';
// 定义异步组件，只有组件被使用时才会加载对应的打包文件
const LazyComponent = defineAsyncComponent(() => import('./components/LazyComponent.vue'));
export default {
components: {
LazyComponent
}
};
如果是原生Javascript项目，也可以通过动态创建script标签的方式加载组件对应的脚本文件，在需要使用时再插入到页面中。
// 原生JS实现组件脚本惰性加载
function loadComponentScript(src, callback) {
const script = document.createElement('script');
script.src = src;
script.onload = () => {
// 脚本加载完成后执行回调
callback && callback();
};
document.body.appendChild(script);
}
// 需要用到组件时再调用加载方法
document.getElementById('load-btn').addEventListener('click', () => {
loadComponentScript('component.js', () => {
// 组件脚本加载完成后初始化组件
initComponent();
});
});
3. 数据惰性加载
对于长列表数据，一次性加载全部数据会造成请求压力大、页面渲染卡顿，可以采用滚动到底部再加载下一批数据的方式实现数据惰性加载。
let page = 1;
let isLoading = false;
// 模拟获取列表数据的接口
function fetchListData(pageNum) {
return new Promise(resolve => {
setTimeout(() => {
const data = Array.from({ length: 10 }, (_, i) => ({
id: (pageNum - 1) * 10 + i + 1,
content: `列表项 ${(pageNum - 1) * 10 + i + 1}`
}));
resolve(data);
}, 1000);
});
}
// 加载列表数据并渲染
async function loadListData() {
if (isLoading) return;
isLoading = true;
const list = await fetchListData(page);
const listContainer = document.getElementById('list-container');
list.forEach(item => {
const li = document.createElement('li');
li.textContent = item.content;
listContainer.appendChild(li);
});
page++;
isLoading = false;
}
// 监听滚动，滚动到列表底部时加载更多数据
window.addEventListener('scroll', () => {
const listContainer = document.getElementById('list-container');
const containerBottom = listContainer.getBoundingClientRect().bottom;
const windowHeight = window.innerHeight;
// 列表底部距离窗口顶部的距离小于窗口高度，说明已经滚动到列表底部
if (containerBottom <= windowHeight + 50) {
loadListData();
}
});
// 初始加载第一页数据
loadListData();
惰性加载的典型应用场景
- 长页面图片展示：电商商品详情页、资讯类长文章页面，非首屏的图片采用惰性加载，减少初始加载时间。
- 单页应用路由组件：不同路由对应的页面组件采用惰性加载，用户访问对应路由时才加载组件资源，减少初始打包体积。
- 无限滚动列表：社交平台动态流、商品列表页等场景，滚动到底部再加载下一批数据，避免一次性加载过多数据导致页面卡顿。
- 非核心功能脚本：页面中次要功能的脚本，比如统计脚本、客服组件脚本，可以在页面主要内容包括加载完成后再惰性加载，避免阻塞核心内容渲染。
- 大型资源加载：视频、音频、大型文档等资源，用户点击播放或查看时才加载对应资源，减少不必要的流量消耗。
惰性加载的注意事项
实现惰性加载时需要注意避免频繁触发监听事件，比如滚动事件可以添加节流处理，减少性能消耗。另外要处理边界情况，比如图片已经加载完成后要移除对应的监听判断，避免重复执行加载逻辑。对于不支持动态导入的低版本浏览器，需要做好兼容性处理，或者提供降级方案。
Javascript惰性加载lazy_load性能优化修改时间：2026-07-04 08:36:27