★ ★ ★ ★ ★

通过 <link> 引入 CSS 会阻塞页面渲染吗？JS 会吗？如何优化？

⚡ 速记答案（30 秒）

CSS 会阻塞首次渲染（浏览器要等 CSS 才能计算布局）；JS 默认同步脚本会阻塞 HTML 解析和渲染。优化 CSS：拆分关键 CSS、media 属性、Critical CSS 内联。优化 JS：defer/async、放底部、按需加载。

📖 详细讲解

标准面试回答（推荐记住）

CSS 通过 link 引入会阻塞首次渲染，因为浏览器需要等 CSSOM 构建完成才能进行布局计算。JavaScript 默认的同步脚本会阻塞 HTML 解析和渲染。CSS 优化方法有：把关键 CSS 内联到 head、非关键 CSS 用 media 属性延迟加载、拆分 CSS 文件。JS 优化方法有：使用 defer 或 async 属性、把脚本放到 body 底部、按路由或功能拆包懒加载。

阻塞行为对比

资源	阻塞解析	阻塞渲染
CSS	不阻塞	阻塞
同步 JS	阻塞	阻塞
async JS	不阻塞	加载完立即执行
defer JS	不阻塞	DOM 解析完执行

优化策略

<!-- 关键 CSS 内联 -->
<style>/* Critical CSS */</style>

<!-- 非关键 CSS 异步加载 -->
<link rel="preload" href="style.css" as="style" onload="this.rel='stylesheet'">

<!-- JS defer/async -->
<script src="app.js" defer></script>

✅ 面试要点

•CSS 阻塞渲染、JS 阻塞解析
•掌握 defer 和 async 区别
•知道 Critical CSS 优化策略

💻 代码示例

Critical CSS 优化

<head>
  <!-- 关键 CSS 内联：首屏样式 -->
  <style>
    body { margin: 0; font-family: sans-serif; }
    .header { background: #1a1a1a; color: #fff; }
  </style>
  
  <!-- 非关键 CSS 延迟加载 -->
  <link rel="preload" href="full.css" as="style" 
        onload="this.rel='stylesheet'">
  <noscript><link rel="stylesheet" href="full.css"></noscript>
</head>
<body>
  <!-- JS defer 不阻塞解析 -->
  <script src="app.js" defer></script>
</body>

🎨 效果预览