一文详解如何避免JavaScript 代码阻塞页面渲染

HTML → DOM Tree
                  → Render Tree → Layout → Paint
CSS  → CSSOM

HTML解析 → 遇到<script> → 暂停解析 → 下载JS → 执行JS → 继续解析

<!-- 1. 阻塞渲染（默认行为） -->
<script src="app.js"></script>

<!-- 2. async：异步下载，下载完立即执行 -->
<script async src="analytics.js"></script>

<!-- 3. defer：异步下载，DOM 解析后按顺序执行 -->
<script defer src="vendor.js"></script>
<script defer src="app.js"></script>  <!-- 保证在 vendor.js 之后执行 -->

<!-- 4. 动态加载脚本 -->
<script>
  const script = document.createElement('script');
  script.src = 'lazy-module.js';
  script.async = false; // 保证顺序执行
  document.body.appendChild(script);
</script>

<!-- 5. 模块脚本（默认 defer 行为） -->
<script type="module" src="app.mjs"></script>

<!-- 6. 预加载关键资源 -->
<link rel="preload" href="critical.js" rel="external nofollow"  as="script">

// 使用 Intersection Observer 懒加载脚本
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const script = document.createElement('script');
      script.src = entry.target.dataset.src;
      document.body.appendChild(script);
      observer.unobserve(entry.target);
    }
  });
});

// 使用 requestIdleCallback 在空闲时加载
requestIdleCallback(() => {
  const script = document.createElement('script');
  script.src = 'non-critical.js';
  document.body.appendChild(script);
});