从性能角度看，外部CSS文件最佳放置位置及优化实践有哪些？

CSS是默认的渲染阻塞资源：浏览器必须完成CSSOM的构建之后，才会和DOM合并生成渲染树、绘制页面，所有外部CSS的优化都是围绕减少下载耗时、降低解析复杂度、避免不必要的阻塞这三个核心目标展开的。

1. 缩减需要处理的CSS体积 #

• 生产环境启用CSS压缩：用cssnano、clean-css这类工具移除空格、注释、冗余的前缀、重复的样式规则，通常能把CSS体积压缩到原有的30%~40%，直接减少下载和解析的耗时。
• 移除未使用的无效CSS：很多项目会引入全量UI库CSS、历史遗留的旧样式，实际首屏甚至全站都不会用到，用构建工具检测剔除这部分代码，能直接降低CSSOM构建的计算量。
• 拆分非首屏CSS做按需加载：弹窗、未命中的响应式断点样式、二级页面专属样式不要打包进首屏CSS文件，用动态加载的方式在需要时再加载，避免首屏解析无关样式。

2. 优化CSS加载时机和优先级 #

• 首屏核心CSS内联到HTML <head> 中：把首屏渲染必需的基础样式、布局样式内联，体积控制在15KB以内，浏览器解析HTML时就能直接拿到这部分样式，不需要额外发起HTTP请求，能最快完成首屏CSSOM的基础构建。
• 所有外部CSS文件统一放在 <head> 标签内：不要把CSS放在<body>底部或者页面中间插入，否则会触发浏览器重复渲染、样式闪烁的问题，放在head中可以让浏览器尽早发起CSS请求，和DOM解析并行处理。
• 给非关键CSS设置对应媒体属性：比如打印样式设置media="print"，大于1024px的响应式样式设置media="(min-width: 1024px)"，不符合当前设备媒体条件的CSS，浏览器会正常下载但不会阻塞渲染，也不会占用首屏CSSOM的解析资源。

3. 规避阻塞CSS处理的错误实践 #

• 不要在CSS文件前插入未加async/defer的外部JavaScript文件：默认情况下JavaScript会阻塞后续的DOM和CSSOM解析，放在CSS前面会延迟CSS请求的发起时机。
• 不要用@import引入CSS：@import会导致CSS串行加载，浏览器必须下载完父CSS文件后，才能发现并下载@import引入的子CSS，直接用多个<link>标签加载CSS可以实现并行下载，总耗时更短。
• 合理合并首屏CSS文件：首屏如果有5个以上的独立CSS文件，多次TCP握手、慢启动的总耗时会远高于单个合并CSS的下载耗时，合并首屏CSS能有效减少请求总耗时。

4. 利用缓存减少重复构建 #

• 给静态CSS设置长期强缓存：给CSS文件名加上内容哈希值，配置Cache-Control: max-age=31536000, immutable缓存头，用户二次访问时不需要重新下载CSS，自然不需要重复解析构建CSSOM。
• 拆分常变和不变的CSS：把全局重置样式、基础UI库样式这类很少修改的CSS，和业务迭代经常变动的页面CSS拆分存放，避免业务CSS修改导致全量CSS缓存失效。

内容的提问来源于stack exchange，提问作者Ran Turner