内联样式仅适用于动态一次性样式变更或首屏关键CSS，标签应限于首屏必需样式且控制在1–2KB内，外链CSS需用rel=”preload”优化加载。
CSS 代码写在 HTML 里（内联或 ）确实会阻塞渲染，但关键不是“能不能用”，而是“在哪用、怎么用才不拖慢页面”。
内联样式 style="..." 适合什么场景？
只用于动态、一次性、无法预知的样式变更，比如 JS 控制元素显隐、位移、透明度。它优先级最高，能覆盖外部 CSS，但不可复用、难维护、无法被浏览器缓存。
- ✅ 合理用法：
element.style.opacity = '0.5'或服务端渲染时注入首屏关键样式（如 critical CSS） - ❌ 滥用表现：全页按钮都写
style="background:#3498db; padding:8px 16px;"—— 这会让 HTML 体积膨胀，且样式逻辑散落各处 - ⚠️ 注意：
style属性不支持伪类（:hover）、媒体查询（@media）、CSS 变量（var(--color)）等高级特性
不完全。它虽比外链 CSS 少一次 HTTP 请求，但依然会阻塞 HTML 解析和首次渲染，尤其当样式表体积大或含 @import 时。
- ✅ 推荐做法：仅放「首屏必需」的样式，比如布局容器、字体大小、基础颜色，控制在 1–2KB 内
- ❌ 避免：
@import url('common.css')—— 它会引发串行加载，比更慢 - ? 提示：用
media="print"或media="(min-width: 768px)"的不会阻塞初始渲染
外链 CSS（
浏览器遇到 会暂停 HTML 解析，直到 CSSOM 构建完成。优化核心是「让关键 CSS 快速就位，非关键 CSS 异步加载」。
