动态插入带blocking="render"的<link>是否会阻塞<div>渲染至样式表加载完成？

当你通过document.body.innerHTML动态插入带有blocking="render"属性的<link>样式表标签时，确实会在样式表获取完成前阻塞后续<div>foo</div>元素的渲染。

具体原因： #

• blocking="render"属性的核心作用就是明确告知浏览器，该资源必须加载并处理完成后，才能继续推进页面的渲染流程。即便该<link>标签是通过JavaScript动态插入的，只要它在DOM的渲染顺序中位于目标元素之前，浏览器就会严格遵循这个阻塞规则。
• 当你通过innerHTML一次性插入<link>和<div>内容时，浏览器会将这段字符串解析为DOM节点。此时<link>的blocking="render"属性会触发渲染阻塞机制：浏览器会优先发起该样式表的网络请求，并且暂停后续<div>元素的渲染操作，直到样式表下载完成、解析并应用后，才会恢复渲染流程，展示<div>里的内容。

补充说明： #

即使你采用分步动态插入的方式（比如先创建<link>元素并添加到body，再创建<div>元素添加到body），结果也是一致的——只要带有blocking="render"的样式表在渲染队列中位于目标元素之前，就会对该元素的渲染产生阻塞作用。

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