必须置于中且优先于，以避免渲染阻塞和布局抖动；CSS顺序影响层叠与重排，关键样式应预加载，缓存依赖HTTP头而非文件名。
link 标签必须放在 head 中，且优先于 script
浏览器解析 HTML 时， 会触发 CSS 下载与阻塞渲染，但不会阻塞 HTML 解析（现代浏览器支持预加载扫描）。如果把它放到 底部，会导致页面先闪白、再样式化，用户体验差；更糟的是，若 CSS 里有 @import 或字体声明，还可能触发额外的阻塞重排。
关键点：
-
一定要在内，紧贴之后 - 所有
必须出现在任何（尤其是内联脚本）之前——否则 JS 执行时可能读到未就绪的样式，造成 layout thrashing - 避免在 CSS 中用
@import，它会串行加载、无法并行，等效于把多个请求压成一个瀑布流
多个 CSS 文件的引入顺序直接影响渲染行为
CSS 是“层叠”样式表，顺序决定覆盖逻辑，但更重要的是：浏览器会按 出现顺序逐个下载、解析、应用。后加载的 CSS 可能触发重绘（比如改了 color 或 font-size），而重绘本身不阻塞，但若涉及布局属性（width、margin、display 等），就会强制同步计算 layout，拖慢首屏。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 基础重置/Normalize.css 放最前（
reset.css或normalize.css） - 通用工具类、布局框架（如
grid.css、utils.css）紧随其后 - 页面级样式（
home.css）放最后——确保它能覆盖前面所有规则，且只影响当前页 - 绝对不要把主题色变量（
:root { --primary: #007bff; }）写在末尾 CSS 里，否则前面所有规则都拿不到变量值；应提至首个 CSS 文件或用内联定义
缓存控制靠 HTTP 头，不是文件名哈希
很多人以为给 CSS 文件加版本号（如 main.v2.css）就能强制更新，其实这仅在 HTML 引用路径变更时生效；真正决定浏览器是否复用缓存的，是响应头里的 Cache-Control 和 ETag。如果服务器返回 Cache-Control: max-age=31536000，即使你改了文件内容，浏览器仍会直接读磁盘缓存，直到过期。
推荐配置：
- 生产环境 CSS 设为长期缓存：
Cache-Control: public, max-age=31536000 - 同时配合内容哈希命名（如
main.a1b2c3d4.css），确保 HTML 中引用的文件名随内容变化 - 禁用
Expires头——它依赖客户端时间，易出错；优先用Cache-Control - 开发阶段可临时设
Cache-Control: no-cache，让浏览器每次验证ETag，避免本地调试时样式不更新
preload 关键 CSS 能缩短首次渲染时间
对首屏必需的 CSS（比如折叠导航、标题字体、按钮基础样式），可以提前提示浏览器优先加载，避免被其他资源（如图片、字体）抢占带宽。这不是替代 ，而是补充。
用法很简单：
注意点：
- 只对
above-the-fold样式做 preload，体积建议控制在 10–15KB 内（gzip 后） - 必须加
as="style"，否则浏览器不会按高优先级调度 - 要配
onload回调把rel从preload切成stylesheet，否则不生效 - 别对整个
main.csspreload——它通常太大，反而挤占关键资源带宽
