浏览器加载外部资源性能优化

浏览器加载外部资源主要是通过 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个属性的用法及其作用。

相关推荐
trsoliu几秒前
通用视口自动置底工具(createAutoScroller)技术指南(含完整源码)
前端
二进制_博客1 分钟前
什么是B域?
大数据·面试
WY6 分钟前
利用scp2和ssh2完成前端项目自动化部署解决方案 1.0
前端
ZJ_19 分钟前
功能按钮权限控制(使用自定义指令控制权限)
前端·javascript·vue.js
JQShan20 分钟前
iOS 开发核心知识点全解析(面试必备)
面试
鹤顶红65323 分钟前
Python -- 人生重开模拟器(简易版)
服务器·前端·python
幸运小圣26 分钟前
Sass和Less的区别【前端】
前端·less·sass
BXCQ_xuan35 分钟前
软件工程实践八:Web 前端项目实战(SSE、Axios 与代理)
前端·axios·api·sse
xrkhy36 分钟前
SpringBoot面试
spring boot·后端·面试