北京
Lighthouse 警告"消除渲染阻塞资源"时，很多开发者盯着那几 KB 的 CSS 文件满脸困惑——文件不大，CDN 很快，怎么就阻塞了？答案藏在"渲染阻塞"这个词的精确含义里：浏览器在读完文档头部所有 CSS 文件之前，不会向屏幕绘制哪怕一个像素。不是因为慢，而是因为规范如此。
浏览器绘制前必须构建两棵树：HTML 生成的 DOM 树，CSS 生成的 CSSOM 树。渲染树由两者合并而成，没有渲染树就无从绘制。这意味着 CSS 从设计之初就是阻塞性的——浏览器在等待外部 CSS 文件时，根本无法推进渲染，因为它 literally 不知道任何元素该如何样式化。DOM 里显示红色的元素，CSS 里可能被设为不可见，浏览器只有读完 CSS 才能确定。
当浏览器遇到 标签时，会执行一系列固定操作：暂停 HTML 解析以优先获取 CSS（高优先级资源）、发起网络请求、等待完整文件下载、解析 CSS 构建 CSSOM、恢复 HTML 解析，最后才能构建渲染树并绘制。第二步的网络请求是症结所在。典型服务器往返延迟 100ms 时，CSS 文件至少让首像素出现时间增加 100ms；若连接较慢或服务器地理位置偏远，可达 300 至 500ms。即使 CSS 文件完全为空，延迟照样发生——浏览器收到空文件前无从得知。
但并非所有 CSS 都需要阻塞渲染。首屏可视内容（above the fold）所需的 CSS 会阻塞用户关心的东西；而三屏以下的弹窗样式、页脚样式、用户尚未滚动到的组件样式，虽然也会阻塞渲染，用户却根本看不到这些渲染结果。
关键 CSS（Critical CSS）即应用于首屏可视元素、无需滚动即可显示的 CSS 子集，是使首屏内容正确显示的最小 CSS 需求。典型落地页的关键 CSS 通常包括：body 和基础排版样式、导航栏样式。
提取并内联这些关键 CSS，可消除网络请求带来的阻塞延迟，让浏览器无需等待外部文件即可开始绘制。剩余 CSS 则可延迟加载，在不破坏用户体验的前提下优化性能。
特别声明：以上内容(如有图片或视频亦包括在内)为自媒体平台“网易号”用户上传并发布，本平台仅提供信息存储服务。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.
