JS延迟加载|极客笔记

JS延迟加载

在网页开发中，为了提高页面加载速度和用户体验，我们经常需要延迟加载一些资源，其中就包括 JavaScript 脚本。延迟加载可以帮助减少页面的加载时间，同时避免阻塞其他资源的加载。本文将详细介绍如何使用 JavaScript 实现延迟加载，以及一些常见的延迟加载技巧和注意事项。

1. 延迟加载的原理

延迟加载是指在页面加载完成后再加载某些资源，而不是在页面刚开始加载时就将所有资源都加载完成。这种方式可以让页面更快地呈现给用户，提高用户体验。在实际开发中，我们常常需要延迟加载一些资源，特别是 JavaScript 脚本、图片和样式表等。

通过延迟加载 JavaScript 脚本，可以将页面的渲染过程与 JavaScript 脚本的加载和执行解耦，避免阻塞页面渲染。当页面加载完成后，再动态加载 JavaScript 脚本，可以减少页面加载时间，加快页面响应速度。

2. 使用 defer 和 async 属性

在 HTML 中，可以通过 <script> 标签的 defer 和 async 属性来实现延迟加载 JavaScript 脚本。

defer 属性：表示延迟加载脚本，会在页面解析完成后按照顺序执行。defer 属性的脚本会在 DOMContentLoaded 事件之前执行。
async 属性：表示异步加载脚本，会在加载完成后立即执行，并不保证执行顺序。async 属性的脚本可能在 DOMContentLoaded 事件之前或之后执行。

下面是两种方式的示例代码：

<!-- 使用 defer 属性延迟加载 -->
<script src="example.js" defer></script>

<!-- 使用 async 属性异步加载 -->
<script src="example.js" async></script>

3. 动态加载 JavaScript 脚本

除了使用 defer 和 async 属性外，我们还可以通过 JavaScript 动态加载脚本来实现延迟加载。使用动态加载脚本的方式更加灵活，可以根据需要在任何时候加载脚本。

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

// 调用动态加载脚本函数
loadScript('example.js', function() {
    console.log('Script loaded');
});

通过以上代码，我们可以在需要的时候动态加载指定的 JavaScript 脚本，并在加载完成后执行回调函数。

4. 延迟加载图片和样式表

除了 JavaScript 脚本外，我们还可以延迟加载图片和样式表以提高页面加载速度。对于图片，可以在需要时再动态创建 <img> 元素进行加载；对于样式表，可以使用 JavaScript 写入 <link> 标签实现延迟加载。

// 延迟加载图片
function lazyLoadImage(url) {
    var img = new Image();
    img.src = url;
    img.onload = function() {
        console.log('Image loaded');
    };
}

// 调用延迟加载图片函数
lazyLoadImage('example.jpg');

// 延迟加载样式表
function lazyLoadStylesheet(url) {
    var link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href = url;
    document.head.appendChild(link);
    console.log('Stylesheet loaded');
}

// 调用延迟加载样式表函数
lazyLoadStylesheet('example.css');

通过以上代码，我们可以在需要时动态加载图片和样式表，提高页面加载速度。