浏览器加载外部资源主要是通过 link
标签和 script
标签,分别用于引入外部资源和执行脚本代码,在页面加载、样式渲染和交互逻辑中扮演关键角色。这些标签可以通过添加一些属性来对网页加载的性能进行优化。link
标签使用preload 和 prefetch, script
标签使用async 和 defer。下面对几个属性进行详细介绍。
preload(预加载)
作用: 高优先级地提前加载当前页面必定会用到的关键资源。
行为: 1.使用 <link rel="preload">
告诉浏览器:"这个资源非常重要,请尽快开始加载它。"
2.浏览器会以高优先级下载该资源,但不会执行它(例如,预加载的 CSS 不会立即应用样式,预加载的 JS 不会执行代码)。
3.资源只是被缓存起来,当实际用到它时(例如在页面中遇到 <script src="...">
或 <link rel="stylesheet">
),浏览器会从缓存中立即获取,从而节省了网络请求时间。
用法:
html
<link rel="preload" href="xxx.js" as="script">
rel属性:rel是relationship 的缩写,意为"关系",它定义了当前HTML文档 与被链接的外部资源 之间的关系。当rel的值为preload 的时候 必须指定as属性,通过使用as属性来明确指定被加载资源的类型。
prefetch
(预获取)
作用:低优先级地提前加载下一个页面可能用到的资源。
行为 : 1.使用 <link rel="prefetch">
告诉浏览器:"这个资源我后面可能会用,你可以在空闲的时候把它下载下来。"
2.浏览器会在空闲时间(当前页面加载完毕,网络空闲时)以低优先级下载该资源并存入缓存。
3.当用户进入下一个页面时,如果需要的资源已经被预取,就可以直接从缓存中快速加载,显著提升下一个页面的加载速度。
用法:
html
<link rel="prefetch" href="zzz.js" as="style">
在 MDN文档中虽然没有提到rel="prefetch"时必须设置as属性,但是强烈推荐使用 as 属性,在资源加载时,不同类型的资源优先级不同,例如,一个脚本(as="script"
)的优先级会与一张图片(as="image"
)或一个字体(as="font"
)的优先级不同。
正确的类型也有助于浏览器正确地缓存资源。
async(异步加载)
作用: 不阻塞 HTML 解析,尽快加载和执行脚本。 行为:
1.浏览器在遇到 async 脚本时,会立即开始异步下载该脚本,同时继续解析 HTML。
2.一旦脚本下载完成会将执行该脚本的任务添加到宏队列,在浏览器执行栈空闲的时候,HTML 解析会被暂停,浏览器会立即执行该脚本。
3.脚本内的JS代码执行完毕后,再继续解析 HTML。
4.多个 async 脚本的执行顺序是不确定的。哪个先下载完 ,哪个就先执行("加载优先"顺序)。
用法:
js
<script async src="aaa.js"></script>
带有async属性的<script>
标签对HTML的解析是下载时不阻塞,执行会阻塞
defer(延迟执行)
作用:不阻塞 HTML 解析,但在 HTML 解析完成后再按顺序执行脚本。
行为:
1.浏览器在遇到 defer 脚本时,会立即开始异步下载该脚本,同时继续解析 HTML。
2.即使脚本早已下载完成,它也会一直等待,直到整个 HTML 文档完全解析完毕
3.然后按照它们在文档中出现的顺序依次执行。
多个 defer 脚本的执行顺序是确定的,与它们在 HTML 中先后的顺序一致。
用法:
js
<script defer src="bbb.js"></script>
带有defer属性的<script>
标签对HTML的解析是完全不阻塞
以上是4个属性的用法及其作用。