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

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

相关推荐
一只毛驴5 小时前
视频播放器的编解码
前端·javascript
子兮曰6 小时前
别再手动处理API数据了!这个BFF数据转换层让你的开发效率提升300%
前端·javascript·api
知识分享小能手6 小时前
React学习教程,从入门到精通, React 入门指南:创建 React 应用程序的语法知识点(7)
前端·javascript·vue.js·学习·react.js·前端框架·anti-design-vue
golang学习记6 小时前
从0死磕全栈第2天:Vite + React 配置全解析,让你的开发效率飞起来
前端
liusheng6 小时前
fly.js 对 DELETE 请求无法传入 body 的问题
前端·javascript
前端_小_小白6 小时前
前端程序员修炼手册:从像素仔到体验守护者
前端·javascript
子兮曰6 小时前
Flex布局完全指南:20种实战方案带你玩转页面排版
前端·css·flexbox
风舞6 小时前
一文搞定JavaScript Reflect最佳实践
前端·javascript
小高0076 小时前
⚡CSS 原子化:30 行代码让样式复用率飙升 300%
前端·面试