光速了解script style link元素新增的blocking属性

这篇文章发布于 2025年03月27日，星期四，21:32，归类于 HTML相关。 阅读 678 次, 今日 52 次 3 条评论

 

by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11568
本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。

HTML blocking属性

一、前言

继续介绍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浏览器之外，其余的现代浏览器都已经支持了，如下截图所示：

blocking属性的兼容性

三、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方法执行结果示意

完整属性和方法参见：

{
  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

（本篇完）

相关文章
«上一篇
分享到：
标签： , , , ,


发表评论（目前3 条评论）

  1. CodeHz说道：
    2025年03月30日 16:56

    要存储任意字符串不是可以用dataset的吗。。。

    回复
  2. Mantou说道：
    2025年03月28日 18:36

    最大的作用是用在动态添加 style 时的。

    比如自定义元素，元素有自己的样式表，如果动态添加样式就有渲染问题了

    回复
  3. mfk说道：
    2025年03月28日 09:02

    现在只支持render就有点弱了，我感觉支持none才是有用的。
    对link、style来说，如果支持none，可以将这个样式完全延迟加载（比如打开页面时隐藏元素（如弹窗，下拉菜单等）的样式）。
    对于script来说，因为现在的async会在加载完后打断渲染，而defer则会阻塞load事件。如果支持 none，则可以完全的延迟加载。
    对于img来说，则作用更大。

    回复