HTML 资源提示符

Administrator
发布于 2024-01-20 / 9 阅读 / 0 评论 / 0 点赞

HTML 资源提示符

什么是资源提示符

在HTML中我们有以下标签是可以加载外部资源的:<script>、<link>、<img>、<iframe>、<object>、<embed> 等。在加载外部资源时提示浏览器采用何种方式加载资源,是阻塞还是非阻塞,是同步还是异步 的提示符我们称之为 资源提示符。目前资源提示符基本使用在 <script>、<link>标签上。

常见的资源提示符有

async

<script arc="xxxx.js" async></script>

异步下载JS文件,不会阻断DOM解析,但是会在下载完成之后立即执行所下载的JS文件。

defer

<script arc="xxxx.js" defer></script>

异步下载JS文件,不会阻断DOM解析,但是会在DOM解析完成之后才执行下载的JS文件。

如果有多个设置了defer的script标签存在,会按照顺利执行所有的script。

如果有多个设置了async和defer的script标签同时存在,则会先执行设置了async的标签

preload

<link rel="preload" href="xxx.js">
<link rel="preload" href="xxx.css">

预加载,让浏览器尽快提前加载资源但是不执行,preload的优先级高于prefetch。

prefetch

<link rel="prefetch" href="xxx.js">
<link rel="prefetch" href="xxx.css">

预加载,让浏览器在空闲时下载,但是不执行。

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script

https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel


评论