Web开发中,为了优化页面性能和用户体验，常常需要实现JavaScript的延迟加载，延迟加载意味着脚本不会立即执行，而是在特定条件下（如页面加载完成、用户交互等）才加载和执行，以下是几种常用的JS延迟加载方法及其详细解释：
使用HTML标签属性
| 方法 | 描述 | 示例代码 |
|---|---|---|
defer属性 |
指示浏览器异步加载脚本文件，并在文档完全解析和显示后再执行脚本，它只对外部脚本文件有效，并且脚本会按照在HTML中出现的顺序执行，不会阻塞页面的渲染。 | <script defer src="path/to/script.js"></script> |
async属性 |
也用于<script>标签，指示浏览器异步加载脚本文件，但与defer不同的是，async属性会使脚本在下载完成后立即执行，且执行顺序不一定按照在HTML中的出现顺序，它同样只对外部脚本文件有效，不会阻塞页面的渲染。 |
<script async src="path/to/script.js"></script> |
动态插入DOM元素
通过JavaScript动态创建<script>元素，并设置其src属性为需要加载的脚本路径，然后将该元素添加到DOM中，这种方式可以灵活控制脚本的加载时机和位置，适用于动态加载脚本文件。
const script = document.createElement('script');
script.src = 'path/to/script.js';
script.onload = () => {
console.log('Script loaded successfully!');
};
script.onerror = () => {
console.error('Script loading failed.');
};
document.body.appendChild(script);
使用定时器
通过设置定时器（如setTimeout），在指定的时间后执行相关代码或加载资源，这种方式可以控制脚本加载的时间点，适用于需要在页面加载完成后，延迟一段时间再执行脚本的场景。
setTimeout(() => {
// 执行延迟加载的代码或加载资源
}, 2000); // 在2000毫秒（2秒）后执行
使用window.onload事件
在页面加载完成后,触发window.onload事件，然后再动态加载JavaScript文件，这样可以保证页面的渲染和其他资源的加载完成后再加载JavaScript文件。
window.addEventListener('load', () => {
const script = document.createElement('script');
script.src = 'path/to/script.js';
document.body.appendChild(script);
});
懒加载（Lazy Loading）
懒加载是指在用户需要时才加载JavaScript文件,而不是一次性加载所有JavaScript文件，可以通过监听用户滚动事件、点击事件等方式来触发JavaScript的加载，使用Intersection Observer API可以高效、精确地实现懒加载。
<!-HTML -->
<button id="loadScriptBtn">Load Script</button>
<!-JavaScript -->
document.getElementById('loadScriptBtn').addEventListener('click', () => {
const script = document.createElement('script');
script.src = 'path/to/lazy-loaded-script.js';
script.onload = () => {
console.log('Script loaded successfully!');
};
script.onerror = () => {
console.error('Script loading failed.');
};
document.body.appendChild(script);
});
将JS脚本放在文档底部
将JS脚本放在HTML文档的底部,可以确保在页面结构和样式全部渲染完成后再执行JS，从而提升用户体验，这是因为浏览器在加载JS文件时会采用同步模式，通常会阻止浏览器后续操作，所以将JS放在页面底部可以避免其阻塞页面的渲染。
<!-HTML -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">Document</title>
</head>
<body>
<!-页面内容 -->
<script src="path/to/script.js"></script>
</body>
</html>
FAQs
Q1: 什么是JS延迟加载？
A1: JS延迟加载是一种优化网页性能的技术，它允许JavaScript脚本在特定条件下（如页面加载完成、用户交互等）才加载和执行，而不是在页面加载时立即执行，这有助于减少页面初始加载时间，提高用户体验。
Q2: 如何选择适合的JS延迟加载方法？
A2: 选择适合的JS延迟加载方法取决于具体的应用场景和需求，如果脚本对页面渲染没有影响且希望尽早执行，可以使用async属性；如果脚本需要在页面完全解析后执行且保持顺序，应使用defer属性；对于需要动态控制加载时机的场景，可以使用动态插入DOM元素、定时器或懒加载
原创文章，发布者：酷盾叔，转转请注明出处：https://www.kd.cn/ask/70356.html
