JavaScript实现无阻塞加载的常用方式
更新时间：2025年03月11日 08:40:30 作者：Epicurus
在 JavaScript 中,无阻塞加载（Non-blocking Loading）是优化网页性能的关键技术,通过避免脚本阻塞页面渲染和其他资源的加载,提升用户体验,以下是实现无阻塞加载的常用方法及示例,需要的朋友可以参考下
JavaScript无阻塞加载的方式
在 JavaScript 中，无阻塞加载（Non-blocking Loading）是优化网页性能的关键技术，通过避免脚本阻塞页面渲染和其他资源的加载，提升用户体验。以下是实现无阻塞加载的常用方法及示例：
1. 使用 async 属性
- 作用：异步加载脚本，下载完成后立即执行，不阻塞 HTML 解析。
- 适用场景：独立脚本，不依赖其他脚本或 DOM。
- 示例：
<script async src="script.js"></script>
2. 使用 defer 属性
- 作用：异步加载脚本，但延迟到 HTML 解析完成后按顺序执行。
- 适用场景：需要按顺序执行且依赖 DOM 的脚本。
- 示例：
<script defer src="script1.js"></script> <script defer src="script2.js"></script> <!-- script1 先执行 -->
3. 动态脚本加载
通过 JavaScript 动态创建 <script> 标签，实现按需加载。
- 适用场景：非关键脚本或条件加载。
- 示例：
function loadScript(src) {
const script = document.createElement('script');
script.src = src;
document.body.appendChild(script);
}
// 在需要时加载
window.addEventListener('DOMContentLoaded', () => {
loadScript('script.js');
});
4. 使用 Promise 或 async/await 控制加载顺序
结合动态加载和 Promise，管理脚本依赖关系。
- 示例：
function loadScript(src) {
return new Promise((resolve, reject) => {
const script = document.createElement('script');
script.src = src;
script.onload = resolve;
script.onerror = reject;
document.head.appendChild(script);
});
}
async function init() {
await loadScript('lib.js');
await loadScript('app.js'); // 确保 lib.js 先加载
}
init();
5. 使用 Intersection Observer 延迟加载
在元素进入视口时加载脚本，适用于非首屏资源。
- 示例：
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
loadScript('lazy-script.js');
observer.unobserve(entry.target);
}
});
});
observer.observe(document.querySelector('#lazy-element'));
6. 模块化动态导入（ES6 import()）
按需加载 ES6 模块，适用于现代浏览器。
- 示例：
button.addEventListener('click', async () => {
const module = await import('./module.js');
module.doSomething();
});
7. 使用 Web Workers 处理计算密集型任务
将耗时任务移至后台线程，避免阻塞主线程。
- 示例：
const worker = new Worker('worker.js');
worker.postMessage({ data: 'start' });
worker.onmessage = (e) => {
console.log('Result:', e.data);
};
8. 资源预加载（preload 和 prefetch）
通过 <link> 标签提示浏览器提前加载资源。
preload：高优先级资源，当前页面使用。
<link rel="preload" href="critical.js" rel="external nofollow" as="script">
prefetch：低优先级资源，未来页面可能使用。
<link rel="prefetch" href="next-page.js" rel="external nofollow" as="script">
9. 条件加载（根据浏览器特性）
检测浏览器支持后加载特定脚本。
- 示例：
if ('IntersectionObserver' in window) {
loadScript('modern-script.js');
} else {
loadScript('fallback-script.js');
}
10. 服务端异步加载（SSR + Hydration）
结合服务端渲染（SSR）和客户端激活（Hydration），按需加载交互逻辑。
- 示例（Next.js 框架）：
import dynamic from 'next/dynamic';
const DynamicComponent = dynamic(() => import('../components/HeavyComponent'));
总结
| 方法 | 核心原理 | 适用场景 | 优点 | 缺点 |
|---|---|---|---|---|
async/defer | 异步加载脚本 | 首屏非关键脚本 | 简单易用 | async 不保证执行顺序 |
| 动态脚本加载 | 按需创建<script> 标签 | 非关键脚本/条件加载 | 灵活控制加载时机 | 需手动管理依赖 |
import() 动态导入 | 按需加载 ES6 模块 | 现代浏览器应用 | 模块化支持 | 需支持 ES6 模块 |
Intersection Observer | 延迟加载视口外资源 | 图片、懒加载组件 | 高性能懒加载 | 兼容性需处理 |
Web Workers | 后台线程执行任务 | 计算密集型操作 | 避免主线程阻塞 | 无法直接操作 DOM |
| 资源预加载 | 提前加载关键资源 | 优化关键路径 | 减少加载延迟 | 可能浪费带宽 |
注意事项：
- 依赖管理：确保异步脚本的执行顺序（如使用
defer或Promise）。 - 兼容性：旧版浏览器（如 IE）不支持
async/defer和 ES6 模块，需降级处理。 - 性能监控：使用工具（如 Lighthouse）分析加载性能，针对性优化。
通过合理组合这些方法，可显著提升页面加载速度和交互体验。
以上就是JavaScript实现无阻塞加载的常用方式的详细内容，更多关于JavaScript无阻塞加载的资料请关注脚本之家其它相关文章！
相关文章
JavaScript事件代理（委托）一般用于以下情况：1. 事件注册在祖先级元素上，代理其子级元素。可以减少事件注册数量，节约内存开销，提高性能。2. 对js动态添加的子元素可自动绑定事件。本文主要介绍用原生 js 实现该功能。下面跟着小编一起来看下吧2016-12-12
这篇文章主要为大家详细介绍了IE和Firefox之间在JavaScript语法上的差异，在JavaScript语法上不同的7个方面，感兴趣的小伙伴们可以参考一下2016-04-04
深入理解JavaScript系列(4) 立即调用的函数表达式
大家学JavaScript的时候，经常遇到自执行匿名函数的代码，今天我们主要就来想想说一下自执行2012-01-01
在实际应用中,为了提高代码的可重用性、可维护性和简洁性,开发者常常需要对常用功能进行函数封装,这篇文章主要介绍了JavaScript编程中如何进行函数封装的相关资料,需要的朋友可以参考下2026-01-01
这篇文章主要给大家介绍了关于利用JavaScript如何查询某个值是否数组内的相关资料，文中通过示例代码分别介绍了实现该问题的一些解决方法是否可行，需要的朋友可以参考借鉴，下面跟着小编来一起学习学习吧。2017-07-07
这篇文章主要介绍了js动态添加带圆圈序号列表的实例代码,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-02-02
在前端实现流式TTS,核心目标是把文本输入转化为沉浸式的、几乎无感延迟的音频输出,并且在音频进入浏览器的瞬间就能开始播放,这篇文章主要介绍了在Web前端实现流式TTS播放的排坑过程,需要的朋友可以参考下2026-05-05
js 中文汉字转Unicode、Unicode转中文汉字、ASCII转换Unicode、Unicode转换AS
这篇文章主要介绍了js 中文汉字转Unicode、Unicode转中文汉字、ASCII转换Unicode、Unicode转换ASCII、中文转换&#XXXX,需要的朋友可以参考下2016-12-12
这篇文章主要介绍了JavaScript生成唯一ID的几种常用方法,UUID 是通用唯一标识符的缩写,是由一个可以确保全球唯一性的算法生成的标识符,文中通过代码介绍的非常详细,需要的朋友可以参考下2025-08-08
这篇文章主要介绍了JavaScript实现的多个图片广告交替显示效果代码,涉及javascript数组遍历及页面元素动态操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-09-09
最新评论