defer js 实现

defer 属性实现 JavaScript 延迟加载

在 HTML 中，defer 属性用于告知浏览器该脚本应在文档解析完成后、DOMContentLoaded 事件触发前执行。带有 defer 的脚本会按它们在文档中出现的顺序执行。

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

async 属性实现异步加载

async 属性与 defer 类似，但脚本会在下载完成后立即执行，不保证执行顺序。适用于不依赖其他脚本的独立代码。

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

动态创建 script 标签

通过 JavaScript 动态创建 script 元素并添加到 DOM 中，可以更灵活地控制脚本加载时机。

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

使用事件监听确保执行顺序

当需要确保多个动态加载的脚本按顺序执行时，可以使用 onload 事件来链式加载。

function loadScript(src, callback) {
    const script = document.createElement('script');
    script.src = src;
    script.onload = callback;
    document.head.appendChild(script);
}

loadScript('first.js', function() {
    loadScript('second.js');
});

Intersection Observer API 实现懒加载

对于需要延迟加载的非关键脚本，可以使用 Intersection Observer API 在元素进入视口时再加载。

const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            const script = document.createElement('script');
            script.src = 'lazy-script.js';
            document.body.appendChild(script);
            observer.unobserve(entry.target);
        }
    });
});

observer.observe(document.querySelector('#lazy-load-trigger'));

模块化动态导入

在支持 ES 模块的环境中，可以使用动态 import() 语法按需加载模块。

button.addEventListener('click', async () => {
    const module = await import('./module.js');
    module.doSomething();
});

每种方法适用于不同场景，defer 适合维护执行顺序的文档级脚本，async 适合独立第三方脚本，动态加载适合按需功能，而模块化导入适合现代模块化应用。