HTML/CSS 解析与 DOM/CSSOM 构建

① 普通 <script>  ：阻塞 HTML 解析 + 阻塞渲染——必须下载并执行完，才继续往下解析
② <link> 的 CSS  ：阻塞「首次绘制」（不阻塞解析，但没它就不画）
③ 图片 / iframe  ：既不阻塞解析，也不阻塞渲染（加载完再显示）

<script src="a.js"></script>               <!-- 同步：下载+执行完才继续解析 -->
<script defer src="a.js"></script>         <!-- 下载不阻塞解析，HTML 解析完才按序执行 -->
<script async src="a.js"></script>         <!-- 下载不阻塞解析，下完立刻执行（顺序不定） -->

<link rel="preload" as="style" href="app.css">              <!-- 提前下载关键 CSS -->
<link rel="preconnect" href="https://cdn.example.com">      <!-- 提前完成 DNS/TCP/TLS 握手 -->

<!-- 运行环境：任意现代浏览器 -->
<!-- 步骤：把下面内容存为 brw-l4.html，用浏览器打开，按 F12 看 Console 输出 -->
<!-- 你会看到：同步脚本立刻执行；defer 的脚本按 1→2→3→4 顺序、且都排在 HTML 解析完后才执行 -->

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>defer vs 同步脚本演示</title>
  <!-- 同步脚本：会阻塞解析，放这里最糟；仅作对比 -->
  <script>
    console.log('[同步] 这一行在解析到它时立刻执行')
  </script>

  <!-- 三个 defer：下载不阻塞解析，HTML 解析完后按出现顺序 1→2→3 执行 -->
  <script defer src="data:text/javascript,console.log('[defer] 脚本 1')"></script>
  <script defer src="data:text/javascript,console.log('[defer] 脚本 2')"></script>
  <script defer src="data:text/javascript,console.log('[defer] 脚本 3')"></script>
</head>
<body>
  <h1>打开控制台看脚本执行顺序</h1>
  <p>defer 脚本永远按 1→2→3→4 顺序执行，且都排在 HTML 解析完之后（data: 链接没有网络延迟，但不影响 defer 的「按序」特性）。</p>
  <script defer src="data:text/javascript,console.log('[defer] 脚本 4（始终最后）')"></script>
  <p>想看 <b>async</b> 的「谁先下载完谁先执行」乱序，请用下面的 brw-l4-server.js（data: 链接无网络延迟，无法体现乱序）。</p>
</body>
</html>

// 运行环境：Node.js 14+（仅用内置 http）
// 步骤：node brw-l4-server.js  → 浏览器打开 http://localhost:3000/，按 F12 看控制台，多刷新几次
// 说明：async 脚本「谁先下载完谁先执行」。这里给三个 async 脚本设置不同下载延迟，
//       你会看到「先下完的 b.js 先执行」，且每次刷新顺序可能不同（延迟有抖动）。

const http = require('node:http')

// 三个 async 脚本，故意设不同下载延迟：b(80ms) 最快，c(180ms) 次之，a(300ms) 最慢
const scripts = {
  '/a.js': { delay: 300, code: 'console.log("[async] 脚本 A（最慢，最后执行）")' },
  '/b.js': { delay: 80,  code: 'console.log("[async] 脚本 B（最快，先执行）")' },
  '/c.js': { delay: 180, code: 'console.log("[async] 脚本 C（第二快）")' },
}

http.createServer((req, res) => {
  if (req.url === '/') {
    res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' })
    res.end(`<!DOCTYPE html><html><head><meta charset="utf-8">
      <script async src="/a.js"></script>
      <script async src="/b.js"></script>
      <script async src="/c.js"></script>
    </head><body><h3>打开控制台看 async 脚本的执行顺序（刷新几次）</h3></body></html>`)
    return
  }
  const s = scripts[req.url]
  if (s) {
    setTimeout(() => { res.writeHead(200, { 'Content-Type': 'text/javascript; charset=utf-8' }); res.end(s.code) }, s.delay)
    return
  }
  res.writeHead(404); res.end()
}).listen(3000, () => console.log('http://localhost:3000  （多刷新几次看 async 顺序变化）'))

<head>
  <link rel="stylesheet" href="slow.css">   <!-- 这个 CSS 要 3 秒才下载完 -->
</head>
<body>
  <h1>你好</h1>
  <script src="big.js"></script>            <!-- 这个 JS 要 2 秒 -->
</body>