JavaScript延迟加载（也称为懒加载或按需加载）是优化网页性能的一种重要技术，尤其是在处理大量脚本或资源时最简单的办法是我们⼀般采⽤的是将 js 脚本放在⽂档的底部，来使 js 脚本尽可能的在最后来加载执⾏。。下面列举了几种常见的JavaScript延迟加载的方式：
使用async属性
async属性允许浏览器异步地加载和执行脚本，而不会阻塞页面的解析。这意味着浏览器会在遇到脚本标签时开始下载脚本，但脚本的下载和执行不会阻塞页面的其他部分。
html
<script async src="script.js"></script>
使用defer属性
defer属性会告诉浏览器，脚本应该在文档完全解析后，但在DOMContentLoaded事件触发前执行。使用defer可以确保脚本在DOM准备好之后执行，但不会阻塞页面的渲染。
html
<script defer src="script.js"></script>
动态创建脚本
通过JavaScript动态创建<script>元素并添加到DOM中，可以实现更精细的控制。这允许你在需要的时候加载脚本，比如某个用户交互之后。
javascript
var script = document.createElement('script');
script.src = 'script.js';
script.async = true; // 或者使用 script.defer = true;
document.head.appendChild(script);
Intersection Observer API
对于图片或其他媒体资源，可以使用Intersection Observer API来检测元素是否进入视口，然后按需加载资源。这是一种常见的懒加载技术。
javascript
const observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const lazyImage = entry.target;
lazyImage.src = lazyImage.dataset.src;
lazyImage.classList.remove('lazy');
observer.unobserve(lazyImage);
}
});
});
const lazyImages = [].slice.call(document.querySelectorAll('img.lazy'));
if ('IntersectionObserver' in window) {
lazyImages.forEach(image => {
observer.observe(image);
});
} else {
// Fallback for browsers that don't support Intersection Observer
lazyImages.forEach(image => {
image.src = image.dataset.src;
image.classList.remove('lazy');
});
}
请求动画帧（requestAnimationFrame）
虽然requestAnimationFrame通常用于动画，但也可以用于延迟脚本的执行，以便在浏览器下一次重绘之前执行。这不是传统意义上的懒加载，但它可以帮助你控制何时执行可能影响性能的代码。
使用加载器或模块打包器
现代前端工作流程（如使用Webpa*ck、Rollup等）通常包含代码分割和动态导入功能，这些功能允许你按需加载JavaScript模块。
javascript
// 使用动态导入语法
button.addEventListener('click', event => {
import('./dynamic-module.js')
.then(module => {
// 使用module中导出的功能
})
.catch(err => {
// 处理加载失败
});
});
使用第三方库
还有许多第三方库（如loadjs, RequireJS, SystemJS等）可以帮助你实现延迟加载和代码分割。
请注意，在选择延迟加载策略时，需要考虑你的特定用例和性能目标。有些策略可能更适合某些情况，而不适合其他情况。
