第三方样式表和字体库加载顺序错误会导致样式覆盖失效、文字闪白、首屏空白；link顺序决定css层叠，基础重置需最先，主题样式必须最后；font-display: swap须写在@font-face内且跨域字体需crossorigin；preload仅提前下载，不改变应用时机；绝对禁止@import和body内link。
第三方样式表和字体库加载顺序不对，不是“慢”，而是“错”——样式覆盖失效、文字闪白、首屏空白，全因顺序没对齐浏览器解析流。
link 标签位置决定 CSS 层叠顺序
浏览器严格按 <link rel="stylesheet"> 在 DOM 中的出现顺序下载、解析、应用 CSS。后加载的同名规则直接覆盖前面的，跟选择器优先级无关。
- 基础重置（如
reset.css或normalize.css）必须放在最前 - 第三方 UI 库（如
bootstrap.min.css）紧随其后 - 自定义组件样式（如
components.css）放中间 - 主题或覆盖样式（如
theme-dark.css）必须放在最后
常见错误：把 bootstrap.css 放在自定义样式后面，结果 .btn-primary 的颜色被第三方定义“赢走”，调试时翻半天 specificity 却没用——其实是它加载得晚。
font-display: swap 必须写在 @font-face 里
font-display: swap 是解决 FOIT/FOUT 最轻量的方案，但它只在 @font-face 规则内部生效，写在 body 或类里完全无效。
- 漏写
font-display或设成block，Chrome/Firefox 会默认阻塞文本渲染约 3 秒 - 跨域字体（比如 CDN 上的
inter.woff2）必须加crossorigin，否则静默失败，控制台都不报错 - 旧版 Safari 不支持
swap，但会优雅降级为auto，不影响功能，只是多等 1–2 秒
示例正确写法：
@font-face {<br> font-family: 'Inter';<br> src: url('https://cdn.example.com/fonts/inter.woff2') format('woff2');<br> font-display: swap;<br>}
preload 只提前下载，不改变应用时机
<link rel="preload" as="style"> 和 <link rel="preload" as="font"> 都只是让浏览器更早发请求，它们不触发解析，也不影响层叠或渲染顺序。
- 必须配对使用：有
preload就得有对应stylesheet或@font-face，且href值（包括大小写、路径斜杠）必须完全一致 - 只预加载首屏关键资源：比如标题用
Inter-Bold，就只 preload 它；正文用的Inter-Regular不必 preload - 不要和
font-display: optional共存——一个说“快点下”，一个说“慢就放弃”，逻辑冲突
典型误用：<link rel="preload" as="style" href="main.css"> 却没写 <link rel="stylesheet" href="main.css">，结果样式根本没应用。
绝对禁止 @import 和 body 内 link
@import 是串行阻塞加载器，它会让浏览器卡在“下载 → 解析 → 发起下一个请求”这个循环里，无法并行。
- 搜项目里所有
@import：用grep -r "@import" src/，尤其注意node_modules里第三方 CSS 是否偷偷带了它 -
<link>必须全部放在内，紧贴<title></title>后；放在里会导致部分浏览器阻塞渲染，且顺序不可靠 - 主题切换等动态场景，用 JS 动态创建
<link>，而不是靠@import模拟条件加载
真正影响首屏体验的，从来不是文件体积，而是资源在 HTML 流中的位置和浏览器对它的解读方式——错一个 link 顺序，或漏一个 font-display，问题就藏在渲染流水线最深的地方，DevTools 很难一眼揪出来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
