HTML——经常出现在页面首尾的HTML元素（meta元素、link元素）

吴声子夜歌

50人浏览 · 2026-09-25 23:18:18

吴声子夜歌 · 2026-09-25 23:18:18 发布

1、几万字都讲不完的`<meta>`元素

没有深究过这个元素的开发人员根本无法想象这个元素所包含的规则和细节多么庞杂、涵盖的内容多么丰富，其中不仅有标准特性，还有私有特性，如果要展开详细介绍，怕是几万字都讲不清楚。

为什么会如此复杂呢？个人揣测，应该是好用吧，它就像一个“万金油”元素，用name属性定义一个新的类型，用content属性写一下规则，一个浏览器新特性就诞生了。

没错，就是这么随意，其应用范围涵盖交互、SEO、安全等各个领域。

说一个大概率你不知道的特性，<meta>元素有自动刷新网页的功能。比如，下面的HTML代码可以实现2秒钟后网页自动跳转。

在这里插入图片描述
此方法使用方便，即使浏览器禁止JavaScript也能运行。虽然过去它因为被滥用而为人诟病，但那是过去的事情了。在如今这个年代，如果JavaScript跳转由于某些原因无法被设置，则可以试试此方法。

类似的特性<meta>元素还有很多，如Content SecurityPolicy(CSP)安全设置可以指定页面中所有资源的加载与执行规则，下面的HTML代码可以禁止内联的JavaScript代码执行：
在这里插入图片描述
下面的代码可以禁止HTML元素上style属性设置的样式的渲染：

不过，本着去粗取精的精神，对于太过细节化的<meta>特性就不展开介绍了，这里选几个我认为比较常用且好用的<meta>特性和大家分享一下。

1.1、SEO最重要的元素之一

在SEO领域中，<meta>元素是极为重要的元素，它的重要性涉及多个方面。

1.1.1、主要信息呈现

对于一个页面而言，最重要的信息就是“标题”“描述”和“关键字”，简称TDK，因为这些信息会直接展示在搜索引擎结果列表页。

例如：
在这里插入图片描述
上面的代码就是本书配套官网首页的TDK设置，搜索引擎会将这些信息展示在搜索结果列表页，如图所示。

凡是需要搜索引擎流量的页面，上述三个HTML元素缺一不可，需要注意的是字数不要太多，不要堆砌关键字，否则反而会影响搜索引擎的收录。

1.1.2、robots策略定义

当前页面的抓取策略也可以使用元素进行定义，例如：
在这里插入图片描述
其中robots的意思是“机器人”，指的就是搜索引擎的爬虫程序，上面的代码就是告诉搜索引擎，当前页面不需要抓取，不需要展示在搜索结果列表页。

除noindex外，content的值还可以是下面这些。

index：允许抓取。
follow：允许跟踪页面链接。
nofollow：不允许抓取页面中的链接。
noarchive：阻止此页面的缓存副本在搜索结果中可用。
nosnippet：防止描述出现在搜索结果中的页面下方，并防止缓存页面。
noodp：阻止在搜索结果页面的描述信息中出现页面的“开放式目录(Open Directory Project)”描述。
all：等同于index和follow。
none：不允许抓取并展示在搜索结果列表页，也不允许抓取页面中的链接，等同于同时设置noindex和nofollow，即下面两段HTML代码的作用是一致的。

在这里插入图片描述
区别于<a>元素rel="nofollow"这样的SEO设置，<meta>元素的设置影响的是整个页面，而不仅仅是某个元素的链接，这种影响全局的特性既是优点，但有时候也是不足，后面会讲到。

1.1.3、移动端权重平移

这是一个私有规则，由百度搜索引擎制定。很多网页既有桌面端，又有移动端，如果网页简单，则开发人员往往会使用响应式布局开发，也就是桌面端和移动端共用一套源代码，通过CSS适配不同的端。但如果是大型网站，这种策略就不适用了，几十个甚至上百个网页全都混合了移动端和桌面端代码，其所带来的维护成本，想想就让人绝望。

因此，针对大型网站都采用独立域名、独立项目的开发模式，使桌面端和移动端的网页互不干扰。这样做虽然让开发和维护成本都变得可控，但是对SEO的影响却是致命的，尤其是对移动互联网兴起之前就诞生的那些网站。这很好理解，桌面端网页历史悠久，多年耕耘，自然权重高，而移动端页面是新开发的，在搜索引擎看来，就是一个新网站，不可能给予其很高的权重。可事实上，桌面端和移动端的内容是类似的，又有同样的子域名，应该共享权重才合理。于是百度就制定了一套元信息规则，可以平移桌面端网页的权重到移动端页面，案例如下所示：
在这里插入图片描述

1.1.4、Open Graph协议

Open Graph协议直译为开放图谱协议，也被称为OG标签，是基于<meta>元素定义的一套信息规则，即任何页面只要遵守该协议，在被分享到社交媒体SNS网站上时，这些社交网站就会提取最有效的信息并呈现给用户。

此协议对谷歌的SEO也是非常友好的，有利于信息的抓取和内容的呈现，其中下面这4个属性名称是必须出现的。

og：title：分享的卡片的标题。
og：type：内容类型。
og：image：缩略图。
og：url：当前页面的URL地址。

例如：
在这里插入图片描述
下面这些则是可选的。

og：audio：音频文件的URL地址。
og：description：一句话描述你分享的内容。
og：determiner：出现在句中标题之前的单词（a，an，the，“”，auto）的枚举。如果选择了auto，则应在“a”或“an”之间进行选择。默认值为""（空白）。
og：locale：语言，默认值是en_US。
og：locale：alternate：数组，页面另外可用的语言。
og：site_name：站点名称。如果分享的是大型网站，则应该显示整个网站的名称。
og：video：视频文件的URL地址。

可以看出，有大量的<meta>元素在SEO领域中被应用，有官方标准的，有私有定制的，其中还有很多属性和规则没有介绍，大家有兴趣可以自行深入了解。

1.2、网页尺寸设置

网页尺寸设置是移动端开发必然会使用的<meta>元素规则，可以让网页的视窗尺寸跟着设备宽度走。例如：
在这里插入图片描述
如果没有这里的width=device-width，则在移动端，网页会按照980px大小的宽度渲染，页面默认会缩放以便在屏幕内完整显示。

在实际开发中，随着需求的不同，这里的content属性值也会有所不同，例如APP内嵌页往往是不允许双指缩放的（和原生APP体验一致），因此，还会设置user-scalable=“no”。如果是传统浏览器访问，我觉得禁止缩放是没有必要的，反而不利于用户体验。

下表罗列了viewport类型的元素支持的设置项，其中对viewport-fit可以重点关注一下。
在这里插入图片描述
为何推荐设置viewport-fit=cover？

因为只有设置了viewport-fit=cover，类似下面的环境变量函数才能生效。

在这里插入图片描述
其中，safe-area-inset-bottom表示当前设备底部的安全区域大小。

安全区域是iPhone底部触摸横条和顶部刘海出现后诞生的概念，如果网页不进行安全区域的设置，就会出现图所示的视觉表现问题，即底部的触摸横条和内容重叠在了一起。
在这里插入图片描述
此时，对网页内容底部按钮的点击就会受到严重的影响。因此，网页的主体内容需要在安全区域内显示，此时，就可以使用这里的env()函数，例如：

说到移动端，一连串的数字是会默认被当作手机号高亮显示的，如果不希望浏览器有这样的行为，则可以使用下面这样的HTML设置：
在这里插入图片描述
除此之外，对邮箱、日期等也有类似的设置：

1.3、referrer设置与防盗图片显示

很多网站为了避免自家的站点变成图床，会开启防盗链。

而通常防盗链的实现是通过判断请求的referrer来源来实现的。如果希望你的网页可以正常显示开启防盗链的图片，可以试试在页面的头部增加下面这行HTML代码：
在这里插入图片描述不仅是防盗链，有些网站的请求的阻止与否也是通过referrer规则判断的，同样可以使用上面的HTML代码绕过限制。

除no-referrer外，content的属性值还可以是下面这些：

origin
no-referrer-when-downgrade
origin-when-cross-origin
same-origin
strict-origin
strict-origin-when-cross-origin
unsafe-URL

1.4、网站风格和主题色的设置

下面介绍一下theme-color和color-scheme两种类型的元信息设置。

1.4.1、.theme-color

theme-color可以用来设置网站的主题色，例如：
在这里插入图片描述
在比较重视用户体验的移动端浏览器（区别于某些国产浏览器）下，可以看到浏览器顶部的状态栏甚至标题栏的背景色都变成了指定的主题色。

下图所示就是上述HTML代码在Safari和Chrome浏览器下的渲染效果。
在这里插入图片描述
对应的演示页面可以通过在浏览器中输入地址https://www.htmlapi.cn/4/1-1.html访问来体验。

很多产品都有自己的品牌色，此时就可以添加类似的设置，成本极低，宣传效果极好，没有道理不使用。

不过有些颜色在深色模式（也称黑夜模式）中显示会显得比较突兀，此时可以使用media语法和深色模式的匹配查询进行设置，示意代码如下：
在这里插入图片描述
既然这里出现了prefers-color-scheme，就不得不介绍一下color-scheme。

1.4.2、color-scheme

color-scheme可以用来设置网站适配深色模式或者浅色模式。

例如：

在这里插入图片描述
代码表示当前网页强制使用深色模式进行渲染，主要表现为一些内置的色值会自动适配深色效果。

这里“内置的色值”包括表单控件皮肤颜色、滚动条颜色及CSS系统颜色。

下图所示就是表单控件元素在浅色模式和深色模式下的样式效果（截图自Chrome浏览器）。
在这里插入图片描述
上图表单控件元素在浅色模式和深色模式下的样式效果其中，背景色的自动变化效果是通过使用系统颜色实现的，CSS代码示意如下：

上述效果可以通过在浏览器中输入地址https://www.htmlapi.cn/4/1-2.html访问来体验。

当然，在实际开发中我们很少强制采用深色主题，因为它会带来不可预知的体验问题，毕竟，大多数网站都是以浅色主题为主的。

因此，比较好的设置方法如下：
在这里插入图片描述
即告诉文档“我更倾向于深色主题”，但如果用户更喜欢浅色主题，那么网站也可以按照浅色主题适配，即这里的前后顺序其实是有权重倾向的。

当然，如果你希望网站只能使用浅色主题，则可以进行如下的设置：
在这里插入图片描述
注意，只有only light，没有only dark，后面这种写法是不合法的。

下面简单介绍一下与此相关的两个CSS属性。

一个是color-scheme属性，其语法和<meta>元素的color-scheme语法类似，只不过CSS的设置可以针对局部某个元素，而<meta>元素的设置一定会影响整个页面。

如果CSS设置的color-scheme和<meta>元素中的color-scheme设置产生冲突，则以CSS中的设置为准。

另一个是prefers-color-scheme属性，它可被用在CSS媒体查询中，作用是匹配系统当前是深色模式还是浅色模式，然后精确定义CSS特性。它的名称虽然和color-scheme属性很像，但它们彼此关系不大。

例如，我们使用color-scheme设置当前页面使用深色模式，但是如果系统设置了浅色模式，则匹配的查询语句依然是浅色的。
在这里插入图片描述

2、知识同样非常密集的`<link>`元素

2.1、favicon小图标的设置与显示

这里的favicon指的是浏览器选项卡上显示的网站小图标。

通常使用下面两种文件格式：

favicon.ico图标
PNG格式图标

对于favicon.ico类型的图标，所有桌面浏览器都支持，包括旧版本的IE浏览器。

对于PNG格式的图标，现代桌面浏览器（如IE11、Chrome、Firefox）都支持。

如果当前页面没有指定favicon，则浏览器会自动在当前网站的根目录下寻找名为favicon.ico的文件作为网站图标，如果没有找到，则会报404错误。

以上应该是大家都知道的基础知识，下面介绍一些大家可能不知道的内容。

2.1.1、favicon的尺寸

favicon必须是正方形的，桌面浏览器及苹果iOS是不支持非正方形的图标的。

很多人会将一个16px×16px大小的PNG小图标制作成favicon.ico文件。

虽然这也有效果，但是不推荐，应该把16px×16px、32px×32px及48px×48px这几个尺寸的图标整合在favicon.ico中。

这样做有两个原因：

在高密度显示屏下，如果favicon.ico文件内只有16px×16px大小的文件，则图标会显得模糊。
网站小图标不仅会在浏览器中使用，还会用在其他地方。例如，IE浏览器会同时把小图标在快捷任务栏上显示，16px×16px的尺寸在这个场合下是偏小的。

一言以蔽之，只有多尺寸同时整合，才能让网站图标在各个场景下都有良好的渲染效果。

2.1.2、favicon的设置

很多网站会使用类似下面的代码设置网站小图标：
在这里插入图片描述
注意，上面的写法其实是一种过时的写法，直接使用rel="icon"即可，也就是下面这样的写法：

在这里插入图片描述
当然，对于favicon.ico的使用，最推荐的做法是放在网站的根目录下，不需要有任何额外的声明。但总归会遇到需要自定义设置的场景，例如，在进行日常开发的时候，我们往往需要区分测试环境和正式环境，不然很容易闹笑话。比方说：明明修改了代码，怎么没生效呢？结果一看，居然是正式环境的页面。

这个笑话我相信几乎人人都闹过，因为页面标题一样，图标也一样，很难区分，就像图所示的一样。

在这里插入图片描述
此时，我们就可以使用颜色不同的favicon.ico进行本地环境和线上环境的区分，方法很简单，使用这里的<link>元素重置一下即可。

PHP语言示例如下：
在这里插入图片描述
不过ICO格式的图标制作并不方便，所以更推荐直接使用PNG格式的图片作为网站小图标。

2.1.3、PNG格式图标的尺寸

和ICO格式的图标类似，如果你使用PNG图片作为网站小图标，也需要考虑多个尺寸，16px×16px的大小显然是不够的。

最终需要设置多大的尺寸是根据系统和平台来定的，具体如下。

绝大多数桌面浏览器：16px×16px、32px×32px及尽可能大。
Android Chrome:192px×192px.
MacOS/Safari：最大为196px×196px。
Google TV:96px×96px.

各个平台的推荐尺寸都不一样，这太麻烦了，怎么开发呢？

一种方法是直接使用大图，不过此方法会浪费资源。更推荐另一种方法，那就是使用sizes属性指定多个PNG图标的尺寸，这样浏览器就可以选择合适尺寸的小图标了。
在这里插入图片描述
实际效果如何呢？我们不妨看一个例子，制作四个不同规格的PNG图标，将其作为网站图标，HTML代码如下所示：

结果在我的当前屏幕像素比为1的显示器下，Chrome浏览器加载的是32px×32px的图标，Firefox加载的是16px×16px的图标，效果如图所示。
在这里插入图片描述
也就是说，我们提供所有的素材，浏览器自己决定加载哪个小图标。

眼见为实，你可以通过在浏览器中输入地址https://www.htmlapi.cn/4/2-1.html访问来看看自己的浏览器加载的是哪个规格的网站图标。

最后，附上多尺寸合并ICO格式的图标的元素写法：

在这里插入图片描述

2.2、网站换肤的最佳实现

大多数前端开发人员通过下面两种方法实现网站皮肤更换功能：

使用一个全局class控制样式切换。
使用JavaScript改变元素的href属性值。例如：

当需要换肤的时候，进行如下设置：

然而上面两种方法都不完美。使用全局class控制样式的方法，由于共用一个CSS上下文，因此需要使用大量的重置代码，代码会非常啰嗦，不利于维护（CSS@scope规则非常适合此场景，可惜浏览器刚支持它不久，兼容性不佳）；使用JavaScript改变href属性值的方法会带来加载延迟，样式切换不流畅，体验不佳。

实际上，浏览器有一个原生特性，非常适合实现网站换肤功能，那就是将<link>元素的rel属性值设置为alternatestylesheet。

HTML代码如下：
在这里插入图片描述在上面4个<link>元素中，共出现了3种不同性质的CSS样式文件加载。

没有title属性，rel属性值仅仅是stylesheet的<link>无论如何都会加载并渲染的，如reset.css。
有title属性，rel属性值仅仅是stylesheet的<link>作为默认样式CSS文件加载并渲染的，如default.css。

这里有一个非常有趣的特性，那就是rel="stylesheet"的<link>如果有title属性并有值，性质上就变成一个可以控制其渲染或者不渲染的特殊元素了。

如何控制

使用JavaScript代码修改<link>元素DOM对象的disabled属性值为false，可以让默认不渲染的CSS开始渲染。注意，必须是DOM元素对象的disabled属性，而不是HTML元素的disabled属性，<link>元素是没有disabled属性的。

例如：
在这里插入图片描述
因此，要实现换肤功能，只要在页面上放置几个换肤按钮，点击的时候改变对应<link>元素DOM对象的disabled属性值就可以了。

眼见为实，你可以通过在浏览器中输入地址https://www.htmlapi.cn/4/2-2.html访问来体验换肤效果。

下图所示的就是点击“红色”按钮后的红色皮肤效果。
在这里插入图片描述
rel=alternate方法的优点

兼容性非常好。IE、Chrome和Firefox均支持这种更原生的换肤效果实现。
语义非常好。用户、开发者尤其搜索引擎或者其他辅助阅读设备能够准确识别网站还有其他替换CSS样式（alternate的语义就是可替换的）。
交互体验更好。rel=alternate方法实现的换肤功能在网站样式变换的时候是瞬间切换的，用户完全无感知。因为浏览器已经把换肤的CSS文件预加载好了，比使用JavaScript改变href地址的体验更好。

2.3、资源的预加载

2.3.1、prefetch预获取

先看使用示例：
在这里插入图片描述
此时，当页面内容加载完毕且有富余的时候，浏览器就会悄悄获取main.js对应的资源，并缓存在浏览器中。

于是，当访问下一个页面的时候，对应的资源就会直接从缓存中获取，这样性能就提高了。

prefetch非常适合用于登录页、首页、引导页等页面，因为这类页面通常都比较简单，需要的资源并不多，此时，非常适合悄悄地将主站常用资源先加载起来，如公用的JavaScript文件和CSS文件等。

由于prefetch提高性能的原理是缓存，因此，静态资源千万不要设置不允许缓存，那么prefetch设置就会无效。

prefetch请求和正常请求在HTTP头上有一个区别，即prefetch请求会有特殊的Sec-Purpose：prefetch请求头，此时后端可以根据这个标示进行一些特殊的处理，如允许缓存。

prefetch加载的优先级非常低，比preload（预加载）还要低，因为prefetch加载的是下一个页面会用到的资源，而preload加载的是本页面即将使用的资源。本页面的加载优先级肯定是高于其他页面的。

另外，还有一个名为dns-prefetch的预获取类型，它是提前解析DNS的，当请求这个域名的资源时，就省去了DNS解析这一步，减少整个请求过程的耗时，多用在请求外部资源，尤其是国外资源的时候。

不过它节约的请求时间很有限，属于聊胜于无的状态，大家根据情况使用吧。

2.3.2、preload

先看使用示例：
在这里插入图片描述
相比上面的prefetch，preload在使用的时候更推荐设置as属性，精准指定需要加载的元素类型，这样做有如下好处。

更准确地确定资源加载的优先级。
被存储在缓存中，以备不时之需，可在适当的情况下重用资源。
可以应用正确的内容安全策略。
为其设置正确的Accept请求头。

然而，有些类型的资源会有多种文件格式，如图片、视频等，此时还需要通过设置type属性指定MIME type，例如：
在这里插入图片描述
注意，即使页面中有多个类型的同名视频资源，也只能预加载一个视频资源。

例如，假设页面中有如下所示的HTML代码：
在这里插入图片描述
那么，在页面的头部是没有必要将两个视频都进行预加载的，也就是下面的代码是不推荐使用的。

因为这样会导致两个视频都进行预加载，而实际渲染的视频资源只会有一个，反而带来浪费，因此，进行预加载的视频一定是主要渲染的视频。

可能造成资源浪费的还有下面这种情况：
在这里插入图片描述
这看起来没有任何问题，直到CSS代码中的@font-face规则开始生效，例如：

此时，你会发现，浏览器居然对同一个URL字体文件进行了两次加载，如图所示。

这非但没有起到预加载的作用，反而浪费了一次请求，消耗了额外的流量。

其解决方法就是设置crossorigin=“anonymous”，例如：
在这里插入图片描述
此时，当我们使用fetch()方法请求example.json文件的时候，速度就会很快，因为浏览器预先加载好了。

其实上面介绍的prefetch本质上和fetch()方法请求资源类似，准确地说是设置了priority："low"的fetch请求。

priority："low"的意思就是优先级低，那么preload的优先级是哪个级别呢？

在回答这个问题之前，我们要先了解一下网络请求优先级的概念，不妨以Chrome浏览器为代表进行了解。

工欲善其事，必先利其器。要想快速学习请求优先级，用到的最好的工具就是Chrome浏览器的开发者工具，在Network面板中可以看到每一个请求的优先级，如图所示。
在这里插入图片描述
如果你发现浏览器没有上图所示红框选中的列表，则可以试试右键面板，访问下图所示的菜单项进行开启。

在Chrome浏览器中，网络请求的优先级分成了如下5个等级。

Highest：最高，如页面HTML资源和CSS文件。
High：高，如正文图片请求资源。
Medium：中等，如页面的业务JavaScript文件请求。
Low：低，如内联的Base64资源、异步加载的JavaScript文件请求。
Lowest：最低，如发送的统计请求。

根据我的测试，prefetch请求的优先级是Lowest，preload请求的优先级是Low或High，至于具体是Low还是High，是由as属性指定的类型决定的，例如script类型对应的是High，image类型对应的是Low。

所有预加载支持的as类型参见下表。
在这里插入图片描述
可以看到，支持预加载的元素有很多，然而并不是所有元素都适合预加载。

首先，要保证当前页面一定会使用预加载的元素，如果不能保证，要使用其他方法进行优化处理。

举个简单的例子，网页右下角有一个“反馈”按钮，点击此按钮会弹出一个可以让用户输入反馈信息的对话框，这个对话框所用到的CSS和JavaScript资源就不能使用preload进行预加载，因为反馈是一个低频操作，大多数用户是不会点击“反馈”按钮的，如果使用preload进行预加载，势必会造成资源的浪费。比较好的做法是，当用户鼠标经过“反馈”按钮的时候，我们去请求对应的JavaScript资源，由于按钮操作都是先悬停再点击的，因此其中的时间差已经完全满足相关资源的加载时间了，这样既保证了良好的用户体验（减少了等待），又保证了资源不被浪费。

其次，预加载的资源一定是重要的资源。以JavaScript文件为例，正常加载的JavaScript文件的优先级是Medium，但如果使用preload进行预加载，则优先级变成了High，很显然，优先级变高了。试想，如果把一个原本不太重要的JavaScript文件进行预加载，让原本重要的资源后加载，岂不本末倒置，用户体验反而更差了？

再次，对HTML页面中直接连接的资源进行预加载的意义不大，建议预加载CSS文件或JavaScript文件中二次加载的资源，比如下面HTML代码中的preload就没什么意义。因为HTML是从上往下解析的，这两个<link>元素都“脸贴脸”了，就算有解析时间差，也是被忽略不计的，使用preload进行预加载完全没有任何意义。

在这里插入图片描述
如果是style.css中使用的字体文件，或者CSS Sprites图片，那么可以使用preload进行预加载，因为这些资源必须加载，同时触发预加载的时间和调用这些字体与图片的时间间隔足够长（前面页面一进入即触发，后者需要等待CSS文件加载完毕并解析后才能触发调用），收益明显。

最后，资源越大，预加载的收益越明显。例如，视频文件、体积较大的图像等，但并不表示资源越大就越需要预加载，关键在于开始时看是不是符合上面三点要求。

在实际开发中，同时符合上面几点的资源其实并不多，只有CSS中使用的字体文件和一些知名JavaScript工具内部加载的其他JavaScript模块文件，例如ffmpeg Web版，这是业务逻辑代码：
在这里插入图片描述
其中的ffmpeg-core.js就非常适合使用preload进行预加载。

总而言之，我个人的建议是：如果你不能保证使用preload一定会带来明显的性能收益提升，就不要使用preload。

2.3.3、media（媒体）查询

不过此特性用得并不多，因为投入产出比不高，例如下面这段代码：
在这里插入图片描述
其中，不仅<link>元素需要设置<media>查询，在业务代码层面（要么是CSS代码，要么是JavaScript）还要根据不同的<media>查询进行不同的处理，而最终所带来的收益可能仅仅是几个其实没那么重要的资源提前显示了一会儿，实在不划算。

2.3.4、fetchPriority与优先级的改变

如果你希望调整preload默认的优先级加载规则，则可以使用fetchPriority属性进行重置，此特性比上面的media属性实用得多。

例如，CSS文件中的某个图片非常重要，必须高优先级加载，则可以像下面这样设置：
在这里插入图片描述
此时，important-source.png图片资源的优先级就变成了High，而不是默认的Low，实际请求的优先级如图所示。

fetchPriority属性还可以用在<img>元素上来降低图片的请求优先级，例如：

虽然Chrome浏览器下的网络请求有5个等级，但是fetchPriority属性值可以设置的等级只有两个，Low或者High，除此之外还支持默认值auto，这三个值就是fetchPriority属性支持的所有值了。

2.3.5、modulepreload与模块的预加载

modulepreload是随着浏览器支持原生export和import语法后新增的特性，语法及作用和preload类似，区别就在于modulepreload预加载的都是JavaScript模块资源，也就是需要在

举个例子，页面中有一个main.js，此JavaScript文件还需要导入两个名为a.js和b.js的资源，其目录结构如下所示：

在这里插入图片描述
你可以使用下面的预加载代码：

DAMO开发者矩阵

DAMO开发者矩阵，由阿里巴巴达摩院和中国互联网协会联合发起，致力于探讨最前沿的技术趋势与应用成果，搭建高质量的交流与分享平台，推动技术创新与产业应用链接，围绕“人工智能与新型计算”构建开放共享的开发者生态。

更多推荐

Netflix ｜开源工程尽调｜Netflix HubCommander 静态源码评测：基于Slack的GitHub聊天运维机器人

DAMO开发者矩阵

天津口碑好的机器人焊钳工厂：左方位安装与多区域服务覆盖

机器人焊钳是汽车自动化焊接场景中核心的焊接执行设备，主要承担电阻点焊工艺的执行任务，是汽车车身焊接、零部件拼接环节不可或缺的核心装备，其性能稳定性直接决定了焊接质量与生产节拍。X型焊钳：对称布置结构，驱动力分布均匀，适合大压力焊接需求，多用于车身框架等大尺寸结构件拼接场景C型焊钳：开口式结构，便于伸入狭窄工位，多用于车身侧围、零部件焊接等场景除两大基础结构外，行业还针对铝制车身焊接需求推出了铝焊专