《优化CSS加载》：谷歌为何使用大量代码加载CSS文件？

阿华AIGC实验室

2026-5-21

为什么谷歌要用这套代码实现CSS延迟加载？

先把你提到的谷歌推荐代码贴出来，方便咱们对着聊：

<noscript id="deferred-styles"> 
  <link rel="stylesheet" type="text/css" href="small.css"/> 
</noscript> 
<script> 
  var loadDeferredStyles = function() { 
    var addStylesNode = document.getElementById("deferred-styles"); 
    var replacement = document.createElement("div"); 
    replacement.innerHTML = addStylesNode.textContent; 
    document.body.appendChild(replacement);
  }
</script>

嘿，这个问题问到点子上了！谷歌这套延迟加载CSS的方案，本质是在性能优化和兼容性兜底之间做的精妙平衡，咱们拆解开来聊：

1. 核心目标：干掉首屏渲染阻塞

正常情况下，放在<head>里的<link rel="stylesheet">会触发浏览器的渲染阻塞——浏览器必须等CSS下载解析完成，才会继续渲染页面内容。如果CSS文件体积大或者加载慢，用户就会看到空白页面很久，这对LCP（最大内容绘制）这类核心Web性能指标打击很大，而谷歌的搜索排名又和这些指标强相关。

把CSS延迟到页面末尾加载，能让浏览器先快速渲染出HTML结构，用户能更快看到内容，大幅提升感知加载速度。

2. `<noscript>`：给禁用JS的用户留后路

不是所有用户都开着JavaScript——比如一些隐私保护浏览器、老旧设备，或者手动关了JS的用户。如果单纯用脚本动态加载CSS，这些用户就会看到完全没有样式的裸HTML，体验极差。

<noscript>标签正好解决这个问题：当浏览器禁用JS时，里面的<link>标签会正常加载CSS，保证页面的基础可用性，这就是前端里常说的优雅降级思路。

3. 脚本里的奇怪操作：为啥不直接创建`<link>`？

你可能会疑惑，为啥不直接用document.createElement('link')来加载CSS，反而要绕个弯用<div>解析innerHTML再追加？这里有两个关键原因：

避免意外的渲染阻塞：直接动态创建<link>标签，浏览器可能会把它当成关键资源，依然触发短暂的渲染阻塞。而通过innerHTML解析CSS链接再插入DOM，能让加载过程更“异步”，完全不干扰当前的页面渲染流程。
更稳定的样式解析：这种方式能确保CSS内容被正确解析，同时不会打乱浏览器的DOM渲染队列，减少FOUC（未样式化内容闪烁）的概率，让样式加载过渡更平滑。

简单说，这套方案是谷歌经过大量性能测试后，给出的兼顾首屏性能、无JS兼容性、用户体验的最优解。

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