link标签顺序直接影响CSS层叠和首屏渲染，浏览器按其在HTML中出现顺序依次下载、解析并构建CSSOM；顺序错误会导致样式覆盖、失效、FOUC或布局跳动，需严格按reset.css→base.css→组件css→响应式css的依赖层级物理排列，并配合preload+onload安全加载关键CSS。
link 标签顺序直接影响 CSS 层叠和首屏渲染
浏览器按 <link> 在 HTML 中出现的顺序，依次下载、解析并构建 CSSOM；顺序错，样式就可能被覆盖、失效，甚至触发 FOUC（无样式内容闪烁）或布局跳动。
常见错误现象：theme.css 放在 base.css 前面 → 主题色、间距规则不生效；print.css 没加 media="print" → 被屏幕端加载，拖慢首屏；用 ../css/lib.css 这类相对路径 → 子目录页 404。
- 基础层必须最前：
reset.css、fonts.css、utils.css（含通用 class 如.sr-only、.visually-hidden） - 功能层居中：按模块依赖排，比如
layout.css要在card.css前，因卡片依赖栅格定义 - 响应式层放最后：
tablet.css加media="screen and (min-width: 768px)"，print.css加media="print"
preload 关键 CSS 时容易重复下载或白屏
rel="preload" 只是提前下载，不等于应用；漏掉 onload 切换或路径重复，就会白屏或双倍请求。
正确写法：<link rel="preload" href="critical.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
立即学习“前端免费学习笔记（深入）”；
- 必须加
this.onload=null，否则 JS 多次执行会插入多个<link rel="stylesheet"> - 不能对已存在
rel="stylesheet"的同路径文件再preload，否则触发两次 HTTP 请求 - 搭配
<noscript><link rel="stylesheet" href="critical.css"></noscript>，确保禁用 JS 时仍可用
根相对路径 / 在本地双击打开时会失败
/css/main.css 在服务器上指向网站根目录，但在本地双击 HTML 文件时，浏览器会尝试读取磁盘根目录（如 C:/css/main.css），直接 404。
开发阶段建议统一用协议相对 URL：//cdn.example.com/css/main.css 或相对路径 css/main.css；上线前再批量替换为根路径。
- 本地调试用
http-server或 VS Code Live Server 插件，避免双击打开 - CI/CD 构建脚本里可注入环境变量，自动替换路径前缀
- 不要混用
https://和//，HTTP 页面加载https://资源会触发混合内容警告
script 标签位置决定 DOM 构建是否被阻塞
放在 里的 <script></script> 会暂停 HTML 解析，直到 JS 下载、执行完毕；而放在 前的，能等 DOM 构建完再执行，避免阻塞渲染。
但注意：现代项目常用 defer 或 type="module"，它们默认异步且保持顺序，比手动挪位置更可靠。
- 非必要不内联大段 JS，
<script>console.log(...)</script>会阻塞解析，哪怕只有几行 -
async适合独立工具类（如统计脚本），不保证执行顺序；defer适合依赖 DOM 的初始化逻辑 - ESM 模块（
type="module"）天然defer行为，且支持import依赖分析，优先用它
<link> 顺序，得开 DevTools → Network → Disable cache，刷新看 CSS 请求是否按预期顺序发起，同时检查 computed styles 是否符合设计稿——否则顺序对了，也可能因缓存或 CDN 配置没生效。 
