懒加载延迟非关键资源加载以提升首屏速度，预加载提前获取关键资源以优化后续体验。前者通过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 模块；预加载更适合用户即将访问的内容，比如轮播图下一张、分页下一页数据、登录后可能用到的模块。
合理搭配两者能显著提升性能：首屏关键资源预加载，非关键资源懒加载，形成流畅体验。
基本上就这些，掌握好加载时机，才能让网页又快又省。不复杂但容易忽略。
以上就是JavaScript懒加载与预加载的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1530347.html
微信扫一扫 
支付宝扫一扫 
