link标签必须在服务端或初始HTML中声明，JS动态插入无效；关键样式需内嵌head，路由样式应SSR注入；动态换肤用CSS变量；preload不跨导航复用；路径用根相对或绝对URL；favicon须初始静态声明。
link标签必须始终在服务端或初始HTML中声明，不能靠JS动态插入
单页面应用（SPA）常误以为用document.head.appendChild()加<link rel="stylesheet">就能生效——实际会失败或延迟渲染。浏览器只在初始HTML解析阶段识别link并触发预加载/样式计算；JS插入的link虽能触发请求，但不参与CSSOM构建时机，按钮、组件可能先以无样式状态渲染，再闪动重绘。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 所有关键样式（如全局重置、主题、按钮基础类）必须写在初始
<head>里，由服务端或构建工具（如Vite、Webpack）注入 - 路由级局部样式（如
/dashboard.css）应通过SSR或静态生成提前塞进对应路由的HTML模板，而非客户端跳转后才挂载 - 若真需动态换肤，用
<style>内联CSS或CSS Custom Properties，别依赖动态link
rel="preload"在SPA路由切换时不会自动触发
很多人在index.html里写了<link rel="preload" href="/chunk-abc.js" as="script">，以为后续路由懒加载时它会复用——其实不会。rel="preload"只对当前导航生命周期有效，路由切换是新导航，旧preload缓存不继承，且浏览器不会主动为新模块发起重复预加载。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 把真正首屏必需的资源（如核心字体、关键CSS）放在初始
<head>中preload - 懒加载模块的资源，改用
import()配合webpackPrefetch: true或React.lazy的loadable方案，它们会生成带rel="prefetch"的link并由框架控制时机 - 检查Network面板的「Initiator」列，确认预加载请求是否来自
index.html本身，而非某个JS文件
多个SPA入口共用同一HTML时，href路径容易错乱
Next.js App Router、Remix或纯前端路由项目常把所有路由都指向同一个index.html。此时href="styles.css"这种相对路径会以index.html所在位置为基准——如果部署在子路径如/admin/下，而index.html实际位于/admin/index.html，那href="styles.css"就会请求/admin/styles.css，而非预期的根目录/styles.css。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 一律用根相对路径：
href="/styles.css"，避免依赖部署位置 - CDN场景下用绝对URL：
href="https://cdn.example.com/v2.1.0/main.css"，并确保协议一致（HTTPS页不引HTTP资源） - 构建工具如Vite默认开启
base配置，需同步调整link的href前缀，否则开发环境正常、生产环境404
SPA中favicon和图标尺寸声明必须静态固化
有些SPA试图在路由变化时用JS修改<link rel="icon">的href来切换不同页面的图标——这不可靠。浏览器只在初始HTML解析时读取sizes和rel，后续JS修改仅更新DOM，不触发图标重载，iOS PWA甚至会直接忽略。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 所有图标尺寸（16×16、32×32、192×192、512×512）必须在初始
<head>中一次性声明，用多个<link>并列 - 不要用
rel="shortcut icon"，现代浏览器已弃用，统一用rel="icon"+sizes - 需要差异化图标（如深色模式），改用
<link rel="icon" media="(prefers-color-scheme: dark)">，靠media查询切换
link是HTML文档级指令，二者生命周期不匹配。任何想让link随路由动态生效的操作，基本都在对抗浏览器设计逻辑。 
