by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11568
本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。
一、前言
继续介绍Web前端前言新特性，这次要介绍的是一个HTML属性，名为blocking 属性它主要用于控制资源加载时对渲染的阻塞行为。
blocking 属性允许开发者对资源加载的优先级和时机进行精细控制，从而影响页面的渲染流程。浏览器在解析 HTML 文档时，会根据 blocking 属性的值来决定是否等待资源加载完成后再继续渲染页面，这对于优化页面性能和提升用户体验至关重要。
blocking 属性目前支持的HTML元素包括<script>元素、<style>元素和<link>元素。
使用示意：
<link rel="stylesheet" href="styles.css" blocking="render">
<style blocking="render">
p {
color: blue;
}
</style>
<script src="script.js" async blocking="render"></script>
二、属性值和含义
目前关于blocking 属性的资料非常少，根据我从某个不太权威的地方看到的资料，blocking 属性有以下几个可选值：
- render
- 当资源的 blocking 属性设置为 render 时，资源的加载会阻塞页面的渲染。
- load
- 当设置为 blocking=”load” 时，资源的加载会阻塞 load 事件的触发。load 事件在页面的所有资源（包括图片、脚本等）加载完成后触发。
- none
- 资源的加载不会阻塞页面的渲染或 load 事件的触发。这意味着浏览器会在后台异步加载该资源，而不会等待它加载完成就继续渲染页面。这种方式适用于那些对页面渲染不是至关重要的资源，如一些统计脚本或非关键的图片。
上面的属性值解释似乎很合理。
但是我查阅MDN文档还有规范，似乎目前仅支持render属性值。
这让我很是不解，为什么呢？
比方说<link>元素天然阻止后面的资源渲染，设置blocking="render"是多余的，<style>元素也是类似。
唯一有点应用场景的就是<script>元素中和async这个异步属性同时设置的时候，也就是资源还是异步加载，但是页面的渲染执行需要这个JS加载完毕。
哦，不对，我想了下，如果<link>元素在页面的末尾，而不是<head>中，blocking="render"还是有作用的，虽然这个场景很罕见。
总之，blocking属性是个不知所谓，看不懂的CSS属性。
兼容性
目前block属性除了Firefox浏览器之外，其余的现代浏览器都已经支持了，如下截图所示：
三、DOMTokenList特性
虽然blocking属性长得浓眉大眼的，但特么居然还是个DOMTokenList特性的属性。
在HTML这门语言中，具有DOMTokenList的属性并不多，一个是class属性，比方说我们经常使用的classList.add()/remove()方法，还有一个是rel属性，对应的是relList，还有就是for属性吧，而且是<output>元素上的for属性。
最后一个就是本文介绍的blocking属性了。
同样的，我们可以使用add/remove/toggle/contains等方法对相关属性进行编辑处理。
例如，假设有HTML如下：
<script id="el" async blocking="render"></script>
则我们就可以使用如下所示的JavaScript代码增加blocking另外的值，此值可以任意设置，虽然大概率没什么实际的用处。
el.blocking.add('zhangxinxu');
此时，HTML信息就是这样的：
<script id="el" async blocking="render zhangxinxu"></script>
截图示意：
完整属性和方法参见：
{
add: function add() { [native code] },
contains: function contains() { [native code] },
entries: function entries() { [native code] },
forEach: function forEach() { [native code] },
item: function item() { [native code] },
keys: function keys() { [native code] },
length: 2,
remove: function remove() { [native code] },
replace: function replace() { [native code] },
supports: function supports() { [native code] },
toggle: function toggle() { [native code] },
toString: function toString() { [native code] },
value: "render zhangxinxu",
values: function values() { [native code] }
}
四、点评一下总结一下
花里胡哨不知所谓的HTML属性，到现在我都没搞清楚这个属性到底是做什么用的。
鸡肋，蛋疼，与现有能力重复，很难找到与设计初衷相匹配的场景。
我认为唯一的作用，反而是其DOMTokenList特性，终于<script>、<style>和<link>元素有了个可以存储任意字符串数据的属性了。
我们可以利用blocking属性标记任意的数据，方便我们进行数据的交互。
好了，就这样吧，以后要是此属性有更新迭代，我再来更新吧。
本文为原创文章，会经常更新知识点以及修正一些错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验。
本文地址：https://www.zhangxinxu.com/wordpress/?p=11568
（本篇完）
相关文章
- HTML5 DOM元素类名相关操作API classList简介 (0.630)
- style标签下的CSS代码的显示与实时编辑 (0.210)
- 获取元素CSS值之getComputedStyle方法熟悉 (0.210)
- 如何在HTML和JS中设置和获取var CSS变量 (0.210)
- CSS倒反天罡居然支持if()函数了 (0.210)
- 今日学习CSS style()样式查询及其range范围语法 (0.210)
- HTML rel属性值释义大全 (0.161)
- link rel=alternate网站换肤功能最佳实现 (0.161)
- 是时候了，无外链的CSS开发策略 (0.161)
- 利用废弃的html rel import实现页面include功能 (0.161)
- HTML5新增的form属性简介 (RANDOM - 0.021)