不能——link标签插入会导致FOUC、样式丢失及SEO问题；W3C要求必须置于中，动态加载应通过document.head.appendChild()插入并配合disabled属性控制。
link标签能否在JavaScript执行后动态插入body中？
不能——link标签插入 会导致 FOUC（Flash of Unstyled Content），且部分浏览器不保证样式应用时机。W3C 明确要求 <link rel="stylesheet"> 必须位于 内，否则行为不可靠。
即使插入成功，样式表加载完成前页面已渲染，用户会看到无样式内容闪现；尤其在弱网或 CSS 文件较大时更明显。
常见错误现象：
- 用
document.body.appendChild(linkEl)插入样式表，但页面初始渲染仍无样式 - JS 执行晚于 HTML 解析，
<link>失去阻塞渲染的能力 - 某些旧版 Safari 或 WebView 中完全忽略
内的rel="stylesheet"
想动态加载CSS，正确做法是插入head还是操作disabled？
优先插入 ，并配合 disabled 属性做开关控制——这是唯一能兼顾加载时机与运行时切换的方案。
立即学习“Java免费学习笔记（深入）”；
操作要点：
- 创建
link元素后，用document.head.appendChild()插入，确保参与初始渲染流程 - 初始设
link.disabled = true，避免立即生效干扰基础样式 - 根据条件（如屏幕宽度、用户偏好、模块加载完成）再设
link.disabled = false - 不要依赖
onload回调来启用，因为 disabled 切换不触发事件；改用逻辑判断后直接赋值
示例：
java-api-doc-generator
下载
分析 Java Spring Boot 后端 Controller 代码，自动生成 Markdown 格式的接口文档。当用户说“生成 Java 接口文档”、“生成 API 文档”、“从 Spring 代码生成文档”时触发。
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = '/css/theme-dark.css';
link.disabled = true; // 先禁用
document.head.appendChild(link);
// 满足条件后启用
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
link.disabled = false;
}
media属性和JavaScript动态控制，哪个更可靠？
media 属性更可靠，它是浏览器原生支持的声明式条件加载机制，无需 JS 即可工作，且不阻塞关键渲染路径。
适用场景对比：
- 设备特性类条件（如
screen and (max-width: 768px)、print、(prefers-reduced-motion: reduce)）→ 直接用media，浏览器自动处理 - 运行时状态类条件（如用户登录态、A/B 实验分组、i18n 语言切换）→ 必须 JS 控制
disabled或切换href - 两者混用可行：比如
<link media="screen" href="theme-a.css">+ JS 控制其disabled，但注意media不匹配时，该link根本不会下载，此时 JS 修改disabled无效
性能提示：不匹配 media 条件的 <link> 不会发起网络请求，也不会阻塞解析，比 JS 动态插入更轻量。
为什么不用@import替代动态link？
@import 在 CSS 文件内使用，无法被 JavaScript 动态控制，且加载顺序阻塞、性能差，完全不适合运行时条件加载场景。
关键限制：
-
@import只能在<style></style>标签内或外部 CSS 文件顶部使用，无法通过 JS 创建或修改 - 每个
@import会串行加载，拖慢整个样式表解析，而<link>是并行下载 - IE8 及更早版本对
@import的媒体查询支持极差，media属性写在@import里常被忽略 - 无法利用
integrity、crossorigin等安全属性，CDN 场景下风险更高
一句话：要用 JS 控制加载，就只能选 <link>，别碰 @import。
最易被忽略的一点：动态插入的 <link> 如果 href 是相对路径，它的解析基准是当前 HTML 文档 URL，不是 JS 文件位置——这点和 import() 不同，容易因路径错乱导致 404。
