blocking="render" 是 chromium 120+ 稳定版 chrome 支持的 属性值，firefox 和 safari 不支持；仅对带 as 属性的 preload 有效，用于声明资源参与渲染阻塞路径，非魔法开关。
blocking="render" 的浏览器支持现状
不是仅限 Chrome Canary，blocking="render" 是 Chromium 120+（2024 年初起）在稳定版 Chrome 中正式启用的 <link rel="preload"> 属性值，Firefox 和 Safari 当前完全不识别该属性，会忽略它。
为什么加了 blocking="render" 却没效果？
常见失效原因不是版本问题，而是用法错位：
-
blocking="render"只对<link rel="preload">有效，不能用于<script></script>或<link rel="stylesheet"> - 必须配合
as属性，例如as="script"或as="style"，否则会被浏览器静默降级为普通 preload - 资源实际加载时机仍受 HTML 解析位置、网络优先级、缓存状态影响，它不强制“立即执行”，只声明“该资源参与渲染阻塞路径”
Chrome 中如何验证是否生效？
打开 DevTools → Network 面板，筛选出预加载资源，检查其 renderBlockingStatus 字段：
const entries = performance.getEntriesByType('resource');
const blocking = entries.filter(e => e.renderBlockingStatus === 'blocking');
若你的 <link rel="preload" as="script" blocking="render"> 出现在该数组中，说明 Chrome 已识别并标记；若为空，优先检查 as 是否缺失或拼写错误（如写成 AS="script" 就无效）。
别指望它解决所有渲染阻塞问题
这个属性只是向浏览器传递语义信号，不是魔法开关。真正决定是否阻塞渲染的，仍是资源类型本身（如 <script></script> 默认阻塞、<link rel="stylesheet"> 强制阻塞），以及它在 HTML 中的位置。如果你的脚本已用 defer 或 type="module"，再加 blocking="render" 不会逆转行为——它不会把非阻塞资源变成阻塞资源，只会让已阻塞的资源更早被发现和调度。
