【JS】脚本延迟加载的常见方式

大家好，我是康仔，今天给大家带来的是JS中脚本延迟加载的常见方式，内容如下：
> 该文章主要是用来记录个人学习笔记，希望对大家有所帮助。

延迟加载就是等页面加载完成之后再加载 JavaScript 文件。 js 延迟加载有助于提高页面加载速度

方式有以下几种：

-   `defer` 属性

    -   特点：脚本的下载是延迟的，但在HTML解析完毕后才开始执行，不会阻塞页面的渲染。

    -   使用场景：

        -   当脚本需要访问和操作页面的DOM元素时，可以使用延迟加载，以确保脚本执行时所需的DOM已经存在。
        -   当多个脚本之间存在依赖关系，需要按照它们在HTML中的顺序执行时，可以使用延迟加载。

    -   注意事项：

        -   延迟加载的脚本会按照它们在HTML中的出现顺序执行，所以必须确保脚本的执行顺序是正确的

-   `async` 属性

    -   特点：脚本的下载和执行是异步进行的，不会阻塞页面的渲染和解析。

    -   使用场景：

        -   当脚本不依赖于页面的其他元素或其他脚本时，可以使用异步加载。例如，一些独立的统计或分析脚本。
        -   当脚本加载后立即执行且执行顺序不重要时，可以使用异步加载。例如，一些与用户交互无关的辅助功能脚本。

    -   注意事项：

        -   异步加载的脚本不能保证按照它们在HTML中的顺序执行，所以如果多个脚本之间存在依赖关系，则需要谨慎处理

<!---->

-   总结上述两者区别

    -   执行时机：

        -   异步加载（Async）：脚本在下载完成后立即执行，不会阻塞页面的渲染。
        -   延迟加载（Defer）：脚本在HTML解析完毕后延迟执行，不会阻塞页面的渲染。

    -   执行顺序：

        -   异步加载（Async）：多个异步加载的脚本执行顺序是不确定的，取决于它们下载完成的时间。因此，如果多个脚本之间有依赖关系，需要谨慎处理。
        -   延迟加载（Defer）：多个延迟加载的脚本按照它们在HTML中的出现顺序执行，可以确保脚本的执行顺序是正确的。

    -   依赖关系：

        -   异步加载（Async）：异步加载的脚本之间没有依赖关系，它们可以并行下载和执行。
        -   延迟加载（Defer）：延迟加载的脚本可以有依赖关系，在确保其依赖的元素或脚本已经存在后执行。

    -   兼容性：

        -   异步加载（Async）：较新的浏览器支持异步加载，但不兼容较旧的浏览器。
        -   延迟加载（Defer）：较新的浏览器和大多数较旧的浏览器都支持延迟加载，具有更广泛的兼容性

    总结来说，异步加载适合不依赖页面其他元素或脚本，且执行顺序不重要的情况。而延迟加载适合需要访问和操作页面DOM元素或有依赖关系的脚本，保证执行顺序的正确性。根据具体需求选择合适的加载方式可以优化页面加载性能和用户体验

<!---->

-   动态添加脚本

    通过 JavaScript 动态创建 <script> 标签，并将其插入到 HTML 页面中，实现脚本的延迟加载。可以使用该方法实现更细粒度的控制，例如根据页面状态动态加载脚本，但也需要注意避免阻塞页面渲染

    ```
    var script = document.createElement('script');
    script.src = 'script.js';
    document.body.appendChild(script); 
    ```

-   延迟加载库

    一些 JavaScript 库（如 `require.js`）提供了延迟加载的机制，可以按需加载模块或库文件。使用该方式可以最大化地减少页面加载时间，但需要增加额外的代码和配置工作。