head及页面区块中<link>与<style>标签使用的性能最佳实践

以下结论完全基于「已完成资源打包、不考虑代码模块化、仅对比性能差异」的场景，不涉及代码可维护性相关判断。

两种区块内样式写法的性能对比 #

方案1：区块前紧挨着内联<style>块 #

<style>
    .foo {
        [...]
    }
</style>
<div class="foo">
    [...]
</div>

• 优势：完全没有额外网络请求开销，浏览器解析到这段style时会立刻完成样式计算，紧接着渲染后面的区块内容，完全不会出现这个区块的无样式闪烁（FOUC），也不会阻塞这个区块前面已经解析完成的内容渲染。
• 劣势：样式内容和HTML绑定传输，无法被浏览器跨页面/跨区块缓存复用，如果同一段样式在多个页面、多个区块重复内联，会造成不必要的流量浪费，HTML体积冗余会随着复用次数升高，快速抵消无额外请求带来的性能优势。

方案2：区块前紧挨着放外链CSS<link> #

<link rel="stylesheet" href="foo.css">
<div class="foo">
    [...]
</div>

• 优势：独立CSS文件可以被浏览器长期缓存，同一份样式跨页面、跨区块复用时只需要下载一次，后续访问直接读取本地缓存，没有重复传输开销。
• 劣势：如果用户首次访问时没有这个CSS的缓存，浏览器解析到link标签时需要发起网络请求拉取文件，会阻塞这个link后面所有内容的渲染，相比内联方案会拖慢这个区块的首现时间；哪怕有浏览器预加载扫描器提前发现资源，body内的CSS资源优先级也低于head内的资源，拉取时机更晚。

和head内全局样式的最佳实践差异 #

两者的选型逻辑完全不同：

• 放在head里的全局样式是整个页面渲染的阻塞资源，针对首屏渲染的性能优化逻辑是：体积很小的首屏关键CSS直接内联在head中，省掉网络请求开销让首屏最快渲染；体积大、跨页面复用的非关键全局样式用外链放在head，充分利用缓存。
• 放在页面内容区块里的样式，不需要阻塞整个页面的渲染，选型逻辑完全围绕「这个样式的复用率」判断：
  • 如果样式是单个区块独有、没有任何跨页面/跨区块复用场景，直接用内联style方案，性能最优。
  • 如果样式需要跨页面、跨区块复用，绝对不要在区块位置重复内联，也不建议在区块位置插外链link——最优做法是把这部分样式合并到全局外链CSS中，首屏用到的放head，非首屏用到的做懒加载，最大化缓存利用率。

额外说明：即便是HTTP/2及以上环境，外链请求的握手开销已经被大幅压缩，缓存复用的收益依然高于小体积内联的收益，只要是复用率高的样式，都优先走可缓存的外链方案。

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