JavaScript 延迟加载详解！

举报
bug菌 发表于 2024/12/31 10:02:12 2024/12/31
【摘要】 🏆本文收录于「滚雪球学SpringBoot」专栏，专业攻坚指数级提升持续更新中，up！up！up！！欢迎点赞&&收藏&&订阅。@TOC ✨ 什么是 JavaScript 延迟加载？延迟加载 (Lazy Loading) 是一种优化页面加载性能的技术，它指的是当页面首次加载时，推迟某些资源（如 JavaScript 文件）的加载或执行，直到它们被需要时再加载。JavaScript 延迟加载的...

🏆本文收录于「滚雪球学SpringBoot」专栏，专业攻坚指数级提升持续更新中，up！up！up！！欢迎点赞&&收藏&&订阅。

@TOC

✨ 什么是 JavaScript 延迟加载？

延迟加载 (Lazy Loading) 是一种优化页面加载性能的技术，它指的是当页面首次加载时，推迟某些资源（如 JavaScript 文件）的加载或执行，直到它们被需要时再加载。

JavaScript 延迟加载的主要目的是：

  • 加快页面初始加载速度：避免不必要的资源加载。
  • 减少网络带宽消耗：仅加载用户需要的部分资源。
  • 提升用户体验：让用户更快看到页面的主要内容。

🌟 JavaScript 延迟加载的常见方式

1. 使用 defer 和 async 属性

1.1 defer 属性

  • 作用：

    • 告诉浏览器延迟加载脚本，等到页面的 HTML 解析完成后再执行。
    • 多个带 defer 的脚本会按照它们在 HTML 中的顺序依次执行。

  • 用法：

    <script src="script.js" defer></script>

  • 适用场景：

    • 当脚本需要依赖 HTML 结构时（例如 DOM 操作）。
1.2 async 属性

  • 作用：

    • 告诉浏览器异步加载脚本，加载完成后立即执行，而不必等待 HTML 解析完成。
    • 多个带 async 的脚本可能会乱序执行。

  • 用法：

    <script src="script.js" async></script>

  • 适用场景：

    • 当脚本与页面结构无关时（例如第三方分析工具或广告脚本）。

2. 动态加载脚本

通过 JavaScript 动态创建 <script> 标签并加载外部脚本。

  • 实现方式：

    function loadScript(url, callback) {
    const script = document.createElement('script');
    script.src = url;
    script.type = 'text/javascript';
    script.onload = callback; // 当脚本加载完成后触发回调
    document.head.appendChild(script);
}

// 示例：延迟加载一个外部脚本
loadScript('https://example.com/some-library.js', function () {
    console.log('Script loaded and ready to use!');
});

  • 特点：

    • 控制更灵活，可以指定加载完成后的操作。
    • 适用于动态加载依赖脚本。

3. 按需加载

按需加载是指在特定条件下（如用户点击某个按钮或滚动到特定区域时）动态加载 JavaScript。

  • 实现方式：滚动触发加载

    let scriptLoaded = false;

window.addEventListener('scroll', function () {
    if (!scriptLoaded && window.scrollY > 500) {
        loadScript('https://example.com/some-library.js', function () {
            console.log('Script loaded on scroll!');
        });
        scriptLoaded = true; // 确保脚本只加载一次
    }
});

  • 实现方式：点击触发加载

    document.getElementById('loadButton').addEventListener('click', function () {
    loadScript('https://example.com/some-library.js', function () {
        console.log('Script loaded on button click!');
    });
});

4. 结合 Webpack 的按需加载

Webpack 提供了动态导入（dynamic import）功能，可以在代码中按需加载模块。

  • 示例代码：

    document.getElementById('loadButton').addEventListener('click', async () => {
    const { default: someModule } = await import('./someModule.js');
    someModule(); // 使用加载的模块
});

  • 特点：

    • 现代浏览器支持，代码分割优化。
    • 适用于大型项目中模块的动态加载。

5. 使用 Intersection Observer 进行延迟加载

Intersection Observer 是一个现代浏览器 API，可以监听某个元素是否进入视口，适用于图片懒加载和脚本延迟加载。

  • 实现方式：
    function lazyLoadScript(targetElement, scriptUrl) {
    const observer = new IntersectionObserver((entries, observer) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                loadScript(scriptUrl, function () {
                    console.log('Script loaded when element is visible!');
                });
                observer.unobserve(entry.target); // 加载完成后停止观察
            }
        });
    });

    observer.observe(targetElement); // 监听目标元素
}

// 示例：延迟加载某个脚本
const target = document.getElementById('targetElement');
lazyLoadScript(target, 'https://example.com/some-library.js');

⚙️ 完整延迟加载示例

以下是一个综合示例，结合了动态加载和用户交互。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript 延迟加载示例</title>
</head>
<body>
    <h1>JavaScript 延迟加载示例</h1>
    <button id="loadButton">加载脚本</button>

    <script>
        // 动态加载脚本函数
        function loadScript(url, callback) {
            const script = document.createElement('script');
            script.src = url;
            script.type = 'text/javascript';
            script.onload = callback; // 加载完成后回调
            document.head.appendChild(script);
        }

        // 点击按钮延迟加载
        document.getElementById('loadButton').addEventListener('click', function () {
            loadScript('https://example.com/some-library.js', function () {
                console.log('Script loaded and executed!');
            });
        });
    </script>
</body>
</html>

📊 延迟加载的优缺点

优点：

  1. 提升性能：减少初始加载时间和带宽使用。
  2. 用户体验更好：更快展示核心内容。
  3. 减少服务器压力：避免不必要的资源加载。

缺点：

  1. 增加实现复杂度：需要手动管理脚本的加载逻辑。
  2. 浏览器兼容性问题：某些旧浏览器可能不支持现代 API（如 Intersection Observer）。
  3. 依赖链问题：动态加载的脚本可能依赖于其他资源，需要小心管理。

🔮 延迟加载的实际应用场景

  1. 图片懒加载：在图片进入视口时再加载，减少页面初始加载时间。
  2. 第三方脚本加载：如 Google Analytics、广告脚本，避免阻塞页面加载。
  3. 模块化加载：大型单页应用中动态加载部分页面逻辑或组件。
  4. 交互式脚本：只有用户触发某些事件时再加载对应的 JavaScript。

✨ 总结

JavaScript 延迟加载是一种高效的优化手段，可以显著提升页面性能，尤其适用于大型网站或复杂应用。根据实际需求选择合适的实现方式（如 defer、async 或动态加载），并结合现代工具（如 Webpack 和 Intersection Observer）进一步优化。

赶紧试试延迟加载技术，为你的项目加速吧！🚀

🧧福利赠与你🧧

  无论你是计算机专业的学生，还是对编程有兴趣的小伙伴，都建议直接毫无顾忌的学习此专栏「滚雪球学SpringBoot」，bug菌郑重承诺，凡是学习此专栏的同学，均能获取到所需的知识和技能，全网最快速入门SpringBoot，就像滚雪球一样，越滚越大， 无边无际，指数级提升。

最后，如果这篇文章对你有所帮助，帮忙给作者来个一键三连，关注、点赞、收藏，您的支持就是我坚持写作最大的动力。

同时欢迎大家关注公众号:「猿圈奇妙屋」 ，以便学习更多同类型的技术文章，免费白嫖最新BAT互联网公司面试题、4000G pdf电子书籍、简历模板、技术文章Markdown文档等海量资料。

✨️ Who am I?

我是bug菌，CSDN | 掘金 | InfoQ | 51CTO | 华为云 | 阿里云 | 腾讯云 等社区博客专家，C站博客之星Top30，华为云2023年度十佳博主，掘金多年度人气作者Top40，掘金等各大社区平台签约作者，51CTO年度博主Top12，掘金/InfoQ/51CTO等社区优质创作者；全网粉丝合计 30w+；更多精彩福利点击这里；硬核微信公众号「猿圈奇妙屋」，欢迎你的加入！免费白嫖最新BAT互联网公司面试真题、4000G PDF电子书籍、简历模板等海量资料，你想要的我都有，关键是你不来拿。

-End-

【声明】本内容来自华为云开发者社区博主，不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息，否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱： cloudbbs@huaweicloud.com
JavaScript
  • 点赞
  • 收藏
  • 关注作者

评论（0）

0/1000
抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认 取消

加入云驻计划，成为创作者

  • 华为云周边好礼
  • 免费体验产品
  • 特殊身份标识
  • 线下官方门票
  • 内部专家零距离
  • 与10000+优质创作者共同成长
立即加入