内联样式仅适用于动态一次性样式变更或首屏关键CSS，标签应限于首屏必需样式且控制在1–2KB内，外链CSS需用rel="preload"优化加载。
CSS 代码写在 HTML 里（内联或 <style></style>）确实会阻塞渲染，但关键不是“能不能用”，而是“在哪用、怎么用才不拖慢页面”。
内联样式 style="..." 适合什么场景？
只用于动态、一次性、无法预知的样式变更，比如 JS 控制元素显隐、位移、透明度。它优先级最高，能覆盖外部 CSS，但不可复用、难维护、无法被浏览器缓存。
- ✅ 合理用法：
element.style.opacity = '0.5'或服务端渲染时注入首屏关键样式（如 critical CSS） - ❌ 滥用表现：全页按钮都写
style="background:#3498db; padding:8px 16px;"—— 这会让 HTML 体积膨胀，且样式逻辑散落各处 - ⚠️ 注意：
style属性不支持伪类（:hover）、媒体查询（@media）、CSS 变量（var(--color)）等高级特性
<style></style> 标签放
不完全。它虽比外链 CSS 少一次 HTTP 请求，但依然会阻塞 HTML 解析和首次渲染，尤其当样式表体积大或含 @import 时。
- ✅ 推荐做法：仅放「首屏必需」的样式，比如布局容器、字体大小、基础颜色，控制在 1–2KB 内
- ❌ 避免：
@import url('common.css')—— 它会引发串行加载，比<link rel="stylesheet">更慢 - ? 提示：用
media="print"或media="(min-width: 768px)"的<style></style>不会阻塞初始渲染
外链 CSS（<link rel="stylesheet">）怎么避免白屏？
浏览器遇到 <link> 会暂停 HTML 解析，直到 CSSOM 构建完成。优化核心是「让关键 CSS 快速就位，非关键 CSS 异步加载」。
立即学习“前端免费学习笔记（深入）”；
- ✅ 关键操作：用
rel="preload"提前拉取主样式表：<link rel="preload" href="main.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
- ✅ 补充策略：对非首屏组件（如评论区、侧边栏）的 CSS，用 JS 动态插入或
media="none"+ JS 切换（el.media = "all"） - ⚠️ 常见坑：把所有 CSS 合并成一个大文件 → 单点失败、缓存失效粒度粗；拆得太碎 → HTTP 请求数暴涨（HTTP/2 下影响减小，但仍需权衡）
真正拖慢加载的往往不是「用了什么写法」，而是「写了什么内容」
一个 50KB 的 <style></style> 标签比 5KB 的外链 CSS 更伤性能；100 个重复的 box-shadow: 0 2px 4px rgba(0,0,0,0.1) 比用 CSS 变量统一管理多出数 KB。
- 删掉未使用的 CSS：用 Chrome DevTools 的 Coverage 面板识别，或构建时接入
purgecss - 避免深层嵌套和通配符选择器（
*{}、div p span{}），它们增加 CSSOM 构建时间 - 慎用
@font-face加载大量字体文件，优先用font-display: swap防止文本阻塞
样式代码本身不重，重的是它触发的解析、匹配、重排、重绘链条——每一步都在用户等待的时间里发生。
