引言
在 Web 性能优化领域，JavaScript 的加载策略直接影响页面加载速度和用户体验。本文探讨异步加载和延迟加载的技术原理、实现方法及最佳实践。
异步加载原理与优势
- 异步加载通过将 JavaScript 脚本的执行时机推迟到页面解析完成后，避免阻塞渲染流程。
- 核心机制基于浏览器单线程特性，脚本下载与页面解析并发执行，显著提升页面加载速度。
- 主要方法包括：
- async 属性：脚本下载完成后立即执行，但执行顺序不确定。
- defer 属性：按脚本顺序执行，确保依赖关系正确。
- 动态创建 script 元素：通过 JavaScript 动态插入脚本标签实现非阻塞加载。
延迟加载实现与场景
- 延迟加载通过 Intersection Observer API 监听元素进入视口事件，触发资源加载。
- 适用于图片、视频、广告等非关键资源，减少初始加载量。
- 实现步骤：
- 创建 Observer 实例，监听目标元素。
- 当元素进入视口时，动态加载资源（如图片 src 属性赋值）。
- 加载完成后，移除 Observer 监听。
异步与延迟加载结合优化
结合使用可实现更高效的资源加载策略：
- 异步加载核心脚本，确保页面交互流畅。
- 延迟加载非关键资源，避免阻塞渲染。
代码示例
// 异步加载核心脚本
// <script src="core.js" async></script>
// 延迟加载图片
// <img class="lazy-load" data-src="image.jpg">
<script>
document.addEventListener("DOMContentLoaded", () => {
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.src = entry.target.dataset.src;
observer.unobserve(entry.target);
}
});
});
document.querySelectorAll('.lazy-load').( observer.(img));
});
</script>
