为何页面速度检测平台将CSS列为渲染阻塞资源？

• 先讲最底层的浏览器渲染逻辑：浏览器要把页面内容真正画到屏幕上，必须先生成完整的渲染树，而渲染树需要DOM树（解析HTML得到）和CSSOM树（解析CSS得到）两个输入，缺一个都没法往下做布局、绘制。
  当HTML解析过程中碰到普通的外链CSS（就是没加特殊属性的<link rel="stylesheet">）时，浏览器会直接卡住首屏渲染，等这份CSS加载、解析完生成对应的CSSOM部分，才会继续出画面。这个机制不是bug，是浏览器特意做的体验保护：如果不卡着，先把没加任何样式的裸DOM画出来，等CSS加载完再重新算样式、重排重绘，用户就会看到明显的「无样式内容闪烁」——先是一堆乱排的纯文本、无样式按钮闪一下，再突然跳成正常排版的页面，体验极差。
• 你觉得CSS不属于渲染阻塞资源，大概率是搞混了两个概念：
  • 浏览器确实会并行预加载外链CSS，不会因为CSS没下完就停掉后面图片、脚本等其他资源的拉取，但预加载资源不等于放行渲染，没有CSSOM就凑不齐渲染树，首屏肯定出不来。
  • 不是所有CSS都会阻塞渲染：如果你给link标签加了media="print"这类和当前浏览环境不匹配的属性，浏览器会把它当低优先级的非阻塞资源，不会卡首屏，但这类CSS本来就不是给当前屏幕视图用的；手动加了懒加载标记的CSS也不会阻塞，但那是开发者主动改了加载策略，不是CSS的默认行为。
• 测速工具判定渲染阻塞CSS的逻辑非常直接：只要某份CSS在首屏第一次绘制触发前还没加载解析完，逼得浏览器必须等它才能输出第一个像素，就会被标记成渲染阻塞资源。大部分场景下被工具标红，根本不是CSS本身的问题，是开发者把太多首屏根本用不上的CSS——比如二级页的样式、弹窗的样式、页面滚动到下半部分才会显示的模块样式——全堆在首屏加载链路里，平白让用户多等了没必要的时间。

别想着靠强行把CSS改成非阻塞来消测速告警，那样100%会出样式闪烁。正确的优化思路很简单：把首屏渲染必须用到的最小份CSS直接内联在HTML里，剩下非首屏用的CSS做懒加载，尽量减少首屏要等的CSS体积就够了。

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