JavaScript无阻塞加载的方式

在 JavaScript 中，无阻塞加载（Non-blocking Loading）是优化网页性能的关键技术，通过避免脚本阻塞页面渲染和其他资源的加载，提升用户体验。以下是实现无阻塞加载的常用方法及示例：

1. 使用 async 属性

• 作用：异步加载脚本，下载完成后立即执行，不阻塞 HTML 解析。

• 适用场景：独立脚本，不依赖其他脚本或 DOM。

• 示例：

  复制 1<script async src="script.js"></script>
  

2. 使用 defer 属性

• 作用：异步加载脚本，但延迟到 HTML 解析完成后按顺序执行。

• 适用场景：需要按顺序执行且依赖 DOM 的脚本。

• 示例：

  复制 1<script defer src="script1.js"></script>
   2<script defer src="script2.js"></script> <!-- script1 先执行 -->
  

3. 动态脚本加载

通过 JavaScript 动态创建 <script> 标签，实现按需加载。

• 适用场景：非关键脚本或条件加载。

• 示例：

  复制 1function loadScript(src) {
   2    const script = document.createElement('script');
   3    script.src = src;
   4    document.body.appendChild(script);
   5}
   6// 在需要时加载
   7window.addEventListener('DOMContentLoaded', () => {
   8    loadScript('script.js');
   9});
  

4. 使用 Promise 或 async/await 控制加载顺序

结合动态加载和 Promise，管理脚本依赖关系。

• 示例：

  复制 1function loadScript(src) {
   2    return new Promise((resolve, reject) => {
   3        const script = document.createElement('script');
   4        script.src = src;
   5        script.onload = resolve;
   6        script.onerror = reject;
   7        document.head.appendChild(script);
   8    });
   9}
  10
  11async function init() {
  12    await loadScript('lib.js');
  13    await loadScript('app.js'); // 确保 lib.js 先加载
  14}
  15init();
  

5. 使用 Intersection Observer 延迟加载

在元素进入视口时加载脚本，适用于非首屏资源。

• 示例：

  复制 1const observer = new IntersectionObserver((entries) => {
   2    entries.forEach(entry => {
   3        if (entry.isIntersecting) {
   4            loadScript('lazy-script.js');
   5            observer.unobserve(entry.target);
   6        }
   7    });
   8});
   9observer.observe(document.querySelector('#lazy-element'));
  

6. 模块化动态导入（ES6 import()）

按需加载 ES6 模块，适用于现代浏览器。

• 示例：

  复制 1button.addEventListener('click', async () => {
   2    const module = await import('./module.js');
   3    module.doSomething();
   4});
  

7. 使用 Web Workers 处理计算密集型任务

将耗时任务移至后台线程，避免阻塞主线程。

• 示例：

  复制 1const worker = new Worker('worker.js');
   2worker.postMessage({ data: 'start' });
   3worker.onmessage = (e) => {
   4    console.log('Result:', e.data);
   5};
  

8. 资源预加载（preload 和 prefetch）

通过 <link> 标签提示浏览器提前加载资源。

• preload：高优先级资源，当前页面使用。

  复制 1<link rel="preload" href="critical.js" as="script">
  

• prefetch：低优先级资源，未来页面可能使用。

  复制 1<link rel="prefetch" href="next-page.js" as="script">
  

9. 条件加载（根据浏览器特性）

检测浏览器支持后加载特定脚本。

• 示例：

复制 1if ('IntersectionObserver' in window) {
 2    loadScript('modern-script.js');
 3} else {
 4    loadScript('fallback-script.js');
 5}

10. 服务端异步加载（SSR + Hydration）

结合服务端渲染（SSR）和客户端激活（Hydration），按需加载交互逻辑。

• 示例（Next.js 框架）：

复制 1import dynamic from 'next/dynamic';
 2const DynamicComponent = dynamic(() => import('../components/HeavyComponent'));

总结

方法	核心原理	适用场景	优点	缺点
async/defer	异步加载脚本	首屏非关键脚本	简单易用	async 不保证执行顺序
动态脚本加载	按需创建<script> 标签	非关键脚本/条件加载	灵活控制加载时机	需手动管理依赖
import() 动态导入	按需加载 ES6 模块	现代浏览器应用	模块化支持	需支持 ES6 模块
Intersection Observer	延迟加载视口外资源	图片、懒加载组件	高性能懒加载	兼容性需处理
Web Workers	后台线程执行任务	计算密集型操作	避免主线程阻塞	无法直接操作 DOM
资源预加载	提前加载关键资源	优化关键路径	减少加载延迟	可能浪费带宽

注意事项：

• 依赖管理：确保异步脚本的执行顺序（如使用 defer 或 Promise）。
• 兼容性：旧版浏览器（如 IE）不支持 async/defer 和 ES6 模块，需降级处理。
• 性能监控：使用工具（如 Lighthouse）分析加载性能，针对性优化。

通过合理组合这些方法，可显著提升页面加载速度和交互体验。