动态插入<style>标签性能更差，因其不可缓存、无法预加载、不支持media条件加载，且延迟触发、破坏维护性；仅极小片段（如主题变量）且无替代方案时才可考虑。
动态创建 <style> 标签插入 CSS 并不比 <link> 性能更好——相反，在绝大多数场景下，它更差，且不可缓存、无法预加载、破坏可维护性。
为什么有人觉得 <style> 动态插入“更快”？
这种错觉通常来自以下几种情况：
- 把少量内联 CSS（比如几行主题色）和完整样式表混为一谈；
- 对比对象是错误的：比如拿
<style>+ 内联字符串 vs<link>+ 未启用rel="preload"的慢服务器； - 没考虑缓存：首次加载时，
<style>确实省了一次 HTTP 请求，但后续每次 HTML 加载都要重传全部 CSS； - 忽略了 FOUC 风险：
<style>插入时机稍晚（比如 DOMContentLoaded 后），可能触发闪屏，而<link>在解析 HTML 早期就启动下载。
<link> 支持浏览器级优化，<style> 完全不支持
关键差异不在“是否动态”，而在“是否可被浏览器识别为资源”：
-
<link rel="stylesheet">触发预加载器（preload scanner），即使在解析 HTML 时就能发起请求；<style>只有 DOM 构建到那一步才处理，天然延迟； -
<link>可配合rel="preload" as="style"提前拉取高优先级 CSS；<style>没有对应机制； -
<link>支持media属性（如media="(prefers-reduced-motion)"），浏览器可跳过不匹配条件的下载；<style>无条件执行； -
<link>文件可被独立缓存、复用、版本控制；<style>绑定在 HTML 里，每次更新 HTML 就失效整个 CSS 缓存。
什么情况下真该用动态 <style>？
极少数合理场景，且必须满足前提：
立即学习“前端免费学习笔记（深入）”；
- 仅用于运行时生成的**极小片段**（如主题变量注入：
:root { --primary: #3b82f6; }），不是整套组件样式； - 明确接受无法缓存、无法压缩、无法 sourcemap 调试的代价；
- 已排除所有替代方案：CSS 自定义属性、CSS-in-JS 库的 runtime 注入（如
styled-components的StyleSheetManager）、或构建时插值； - 不用于首屏关键样式——否则会拖慢 LCP。
真正影响性能的从来不是“用不用动态”，而是“要不要让浏览器提前知道你要什么”。<link> 是唯一能让浏览器在解析 HTML 第一个字节时就开始准备样式的机制。<style> 动态插入，本质上是在告诉浏览器：“等我决定好了再给你。”
