On this page
javascript
函数加载模式差异
请解释JavaScript中函数的延迟加载（Lazy Loading）与异步加载（Async Loading）的具体实现方式，并比较两者在性能优化和代码执行时机上的主要区别。
考察点分析
该题目主要考察以下核心能力维度：
- 模块化与性能优化能力：评估对现代Web性能优化方案的理解深度
- 运行时特性掌握：区分同步/异步执行机制对程序逻辑的影响
- 代码组织策略：权衡不同加载方案对可维护性与执行效率的影响
具体技术评估点：
- 动态导入（Dynamic Imports）的实现原理
- 事件循环（Event Loop）与异步任务调度
- 浏览器渲染阻塞（Render Blocking）机制
- 代码分割（Code Splitting）的最佳实践
- 内存占用与执行时机的平衡策略
技术解析
关键知识点
- 动态导入 > 脚本加载策略 > 执行时机控制
- 异步函数 > Promise链 > 微任务队列
- 浏览器预加载扫描器（Preload Scanner）工作机制
原理剖析
延迟加载(Lazy Loading)：
通过代码分割将非关键资源延迟到需要时加载，常见实现：
// 基于交互的延迟加载
button.addEventListener('click', async () => {
const module = await import('./heavy-module.js');
module.run();
});
异步加载(Async Loading)：
通过非阻塞方式加载脚本资源，典型模式：
<script async src="async.js"></script>
<script defer src="defer.js"></script>
执行时序差异：
async脚本下载完成后立即暂停HTML解析并执行defer脚本在DOMContentLoaded事件前按序执行- 动态导入（import()）创建独立微任务
常见误区
- 混淆async与defer的执行顺序保证
- 误用动态导入导致过度代码分割
- 忽略预加载提示（preload/prefetch）的配合使用
- 未处理加载失败的回退方案
问题解答
延迟加载通过代码分割实现按需加载，核心是使用动态导入或条件加载策略，典型场景如路由切换和交互触发。异步加载侧重非阻塞资源获取，利用浏览器并行下载特性，通过async/defer属性或动态脚本注入实现。
性能差异：
延迟加载减少初始包体积提升首屏速度，但可能增加交互延迟。异步加载优化关键渲染路径，但可能打乱执行顺序。
执行时机：
延迟加载函数在显式调用时初始化，异步脚本在下载完成后立即执行（async）或DOM解析完成后执行（defer）。动态导入创建微任务，在事件循环的当前任务结束后执行。
解决方案
延迟加载实现
// 基于Intersection Observer的图片懒加载
const lazyImages = document.querySelectorAll('[data-src]');
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src;
observer.unobserve(img);
}
});
});
lazyImages.forEach(img => observer.observe(img));
异步加载优化
// 动态脚本加载带超时处理
function loadScript(url, timeout = 5000) {
return new Promise((resolve, reject) => {
const script = document.createElement('script');
script.src = url;
script.async = true;
const timer = setTimeout(() => {
reject(new Error(`Script timeout: ${url}`));
document.head.removeChild(script);
}, timeout);
script.onload = () => {
clearTimeout(timer);
resolve();
};
document.head.appendChild(script);
});
}
扩展建议
- 首屏关键资源使用
<link rel=preload>预加载 - 低端设备减少并发加载数量
- 使用Webpack的SplitChunksPlugin进行智能代码分割
深度追问
如何防止异步加载导致的执行顺序问题？
答：使用defer替代async或实现依赖管理系统动态导入与Web Worker如何配合优化？
答：将CPU密集型任务分配到WorkerService Worker如何增强加载策略？
答：实现资源缓存与离线可用
Last updated 06 Mar 2025, 13:07 +0800 .