blocking属性对html中元素完全无效，所有主流浏览器均忽略该属性，它未被纳入html规范且无任何实现；真正不阻塞渲染的方案是用media="print" onload切换、preload+js切换或动态插入link。
blocking 属性对 HTML 中的 <link> 元素完全无效，它不会阻止页面渲染，也不被任何主流浏览器支持。
blocking="render" 在 <link> 上根本不起作用
- 所有当前主流浏览器（Chrome 127+、Firefox 128、Safari 17.5）忽略该属性，无论你写成
blocking="render"还是blocking="anything"，都只是个无意义的自定义属性。 - 它没被纳入 HTML 规范，MDN 和 CanIUse 上查不到，也没有对应实现。
-
<link rel="stylesheet">本身默认就是渲染阻塞的——浏览器遇到它就会暂停 HTML 解析、等待 CSS 下载并构建 CSSOM。加blocking="render"不会改变行为，也不会提升优先级或提前加载。
常见错误现象：
- 页面首屏白屏，误以为加了
blocking="render"就“可控”，结果根本没生效 - 构建工具模板里硬编码该属性，徒增 HTML 体积，还误导后续维护者
- 和
fetchpriority="high"混用，以为能叠加效果——但后者只影响网络调度，与渲染阻塞无关
真正能让 <link> 不阻塞渲染的方法
想让样式表延迟加载又不卡首屏，得用已被广泛支持的方案：
用
media属性“欺骗”解析器：<link href="non-critical.css" rel="stylesheet" media="print" onload="this.media='all'">
浏览器初始不下载，等 onload 触发后才启用，不参与初始 CSSOM 构建用
<link rel="preload" as="style">配合 JS 切换：<link rel="preload" as="style" href="non-critical.css" onload="this.rel='stylesheet'">
注意：必须带as="style"，否则浏览器当普通资源预加载，不会按样式表处理动态插入
<link>：const link = document.createElement('link'); link.rel = 'stylesheet'; link.href = 'non-critical.css'; document.head.appendChild(link);
此时它默认不阻塞渲染，且可配合requestIdleCallback控制时机绝对不要在
里堆多个<link rel="stylesheet">：
后续的样式表会拖慢首次绘制（FCP），哪怕它内容无关紧要
blocking 属性目前只对 <script></script> 有实验性支持（极有限）
- Chromium 曾在
chrome://flags/#enable-blocking-attribute中提供实验开关，仅限模块脚本（<script type="module"></script>）且需配合defer使用 - 但该 flag 已在 Chrome 126+ 中移除，生产环境不可依赖
- Firefox 和 Safari 完全未实现，连实验性支持都没有
所以你在 <script blocking="render" src="app.js" defer></script> 里写的 blocking，实际和没写一样。
真正影响首屏渲染的，从来不是某个未落地的新属性，而是你是否内联了关键 CSS、是否把非关键样式拆出来、是否用对了 media 和 preload。这些方案兼容性好、行为确定、DevTools 可验证——比押注一个不存在的属性靠谱得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
