概念概述
渲染阻塞资源（Render-Blocking Resources）指的是：样式表与阻塞解析的脚本会推迟首次绘制，识别并延后它们是提升感知加载速度的直接手段。
从更严格的定义看，A render-blocking resource is any resource whose download and processing must complete before the browser can paint the initial content, which pauses the first meaningful visual output. 该概念在工程实践中的价值，在于它能帮助团队用统一的语言描述一个具体的质量属性或设计约束，从而在评审与协作中减少歧义。
为什么需要它
It is a primary target when a page’s time to first paint is dominated by network delay. 它与 Native ES Modules in the Browser、Import Maps for Module Resolution、CSS Cascade Layers 等概念经常一起出现，用于解决相近的工程问题。理解它的适用场景，有助于在多种备选方案之间做出有依据的取舍，而不是凭直觉选择技术方案。
常见误解
- all scripts block rendering
- moving a stylesheet into the body removes its blocking effect
需要避免的反模式
- linking large third-party stylesheets in the head without need
- loading analytics synchronously in the critical path
实践要点
- Classic script tags block parsing until fetched and executed, while stylesheets block rendering because the browser will not paint a state it may have to repaint once styles arrive.
- Adding defer or async to scripts changes their execution timing, and splitting critical CSS inline lets the browser paint before the full stylesheet downloads.
- Measure with a render timeline rather than guessing, because a resource might be blocking on one page and harmless on another depending on what the initial viewport needs.
参考来源
https://developer.mozilla.org/en-US/docs/Web/Performance/Critical_rendering_path