< 前端性能优化: 资源加载优化 >

本文介绍了前端性能优化中的资源加载策略,包括路由和组件的懒加载以减少首屏加载时间,使用骨架屏优化白屏时长,以及JavaScript的6种加载模式(正常、async、defer、module、preload、prefetch)以提升加载效率。同时,讨论了图片资源处理,如图片大小控制和懒加载,以进一步优化页面性能。
摘要由CSDN通过智能技术生成

前端性能优化


👉 前言

众所周知,前端是由HTML、CSS、JS等文件资源共同作用下渲染构建出来的。现今前端项目,大多为单页面应用,单页面应用的优点非常多(点击跳转 SPA单页面讲解),但是也并非没有缺点 。由于单页面的原因,项目所需资源都需要在初次加载首屏时被加载,这就造成了首屏加载性能受到影响!

对于首屏性能优化,就衍生出了相关需要思考的问题。如何将首屏加载的资源,分段将需要的资源及时加载出来,避免页面内容不显示的同时,又能避免加载多余并非立刻需要使用的资源呢?

接下来,带着问题去阅读本篇文章,由小温梳理了一下有关资源加载优化方面的优化,希望各位小伙伴们能有所收获!

👉 一、路由懒加载

懒加载就是延时加载(也称为按需加载),即在当资源使用时,再进行加载的原理。

例如:当我们访问页面时,先将img图片的路径替换成一张占位图的路径,这样就只需请求一次,而当图片进入可视区域时才把其图片的路径替换为真正的路径,从而显示图片,达到懒加载的效果。(即:懒加载就是使用同一张占位图进行占位,然后按需获取图片真正的路径,从而实现懒加载)

在SPA 单页应用项目中,一个路由对应一个页面,如果不做处理,项目打包后,会把所有页面打包成一个文件,当用户打开首页时,会一次性加载所有的资源,造成首页加载很慢,降低用户体验

那么,我们如何去通过懒加载的方式去加载这些资源呢? 这就要请出本小节的 关键人物 了,ES6的动态地加载模块——import()。其次,要实现懒加载,就得先将进行懒加载的子模块分离出来,打包成一个单独的文件!

调用 import() 之处,被作为分离的模块起点,意思是,被请求的模块和它引用的所有子模块,会分离到一个单独的 chunk 中
——摘自《webpack——模块方法》的import()小节

> 实现代码

// 通过webpackChunkName设置分割后代码块的名字
const Home = () => import(/* webpackChunkName: "home" */ "@/views/home/index.vue");
const MetricGroup = () => import(/* webpackChunkName: "metricGroup" */ "@/views/metricGroup/index.vue");
…………
const routes = [
  {
      path: "/",
      name: "home",
      component: Home
   },
   {
      path: "/metricGroup",
      name: "metricGroup",
      component: MetricGroup
   },
   …………
]

webpackChunkName 作用是 webpack 在打包的时候,对异步引入的库代码(lodash)进行代码分割时,设置代码块的名字。webpack 会将任何一个异步模块与相同的块名称组合到相同的异步块中。

> 处理前后各文件大小情况

处理前
前
处理后

后

处理前

前
处理后
后

👉 二、组件懒加载

除了路由的懒加载外,组件的懒加载在很多场景下也有重要的作用。

例如: 在某个页面中,弹窗组件并非在页面加载时就需要显示,而是在用户点击弹窗时显示。这里我们就可以使用懒加载,使得弹窗组件对应的资源,在用户点击时再加载。以提高首页加载速度,减少首屏加载的白屏时间!

同样,在这里我们也照样是使用 import() 去实现组件的懒加载功能!

但是,所有事都是有利有弊的,懒加载也同样。 随着懒加载资源的增多,会导致浏览器资源请求过于频繁,对服务器负担也会加重!其次是在懒加载某些局部资源量大的组件,在打开时,会有少许延迟,不过从观感上来说,影响并不大!

> 实现代码

<script>
const dialogInfo = () => import(/* webpackChunkName: "dialogInfo" */ '@/components/dialogInfo');
export default {
  name: 'homeView',
  components: {
    dialogInfo
  }
}
</script>

使用懒加载后,弹窗对应的资源只有在第一次点击弹窗时进行加载!
弹窗资源加载

> 适用场景

  1. 该页面的 JS 文件体积大,导致页面打开慢,可以通过组件懒加载进行资源拆分,利用浏览器并行下载资源,提升下载速度(如:首页、大屏、工作台各流程页面
  2. 该组件不是一进入页面就展示,需要一定条件下才触发(如:弹框组件、自定义组件
  3. 该组件复用性高,很多页面都有引入,利用组件懒加载抽离出该组件,一方面可以很好利用缓存,同时也可以减少页面的 JS 文件大小(如:表格组件、图形组件等

👉 三、骨架屏优化白屏时长

使用骨架屏,可以缩短白屏时间,提升用户体验。国内大多数的主流网站都使用了骨架屏,特别是手机端的项目。

SPA 单页应用,无论 vue 还是 react,最初的 html 都是空白的,需要通过加载 JS 将内容挂载到根节点上,这套机制的副作用:会造成长时间的白屏。

常见的骨架屏插件就是基于这种原理,在项目打包时将骨架屏的内容直接放到 html 文件的根节点中
使用骨架屏插件,打包后的 html 文件(根节点内部为骨架屏)。

如果只是小范围使用,推荐使用 elementUi里面的骨架屏组件。

点击跳转:骨架屏文档地址

👉 四、JavaScript 的6种加载方式

1. 正常模式

<script src="index.js"></script>

这种情况下 JS 会阻塞 dom 渲染,浏览器必须等待 index.js 加载和执行完成后才能去做其它事情

2. async 模式

<script async src="index.js"></script>

async 模式下,它的加载是异步的,JS 不会阻塞 DOM 的渲染,async 加载是无顺序的,当它加载结束,Js 会立即执行

使用场景:若该 JS 资源与 DOM 元素没有依赖关系,也不会产生其他资源所需要的数据时,可以使用async 模式,如:埋点统计。

3. defer 模式

<script defer src="index.js"></script>

defer 模式下,JS 的加载也是异步的,defer 资源会在 DOMContentLoaded 执行之前,并且 defer 是有顺序的加载

如果有多个设置了 defer 的 script 标签存在,则会按照引入的前后顺序执行,即便是后面的 script 资源先返回

所以 defer 可以用来控制 JS 文件的执行顺序,比如 element-ui.jsvue.js,因为 element-ui.js 依赖于 vue,所以必须先引入 vue.js,再引入 element-ui.js

<script defer src="vue.js"></script>
<script defer src="element-ui.js"></script>

defer 使用场景:一般情况下都可以使用 defer,特别是需要控制资源加载顺序时。

4. module 模式

<script type="module">import { a } from './a.js'</script>

在主流的现代浏览器中,script 标签的属性可以加上 type="module",浏览器会对其内部的 import 引用发起 HTTP 请求,获取模块内容。这时 script 的行为会像是 defer 一样,在后台下载,并且等待 DOM 解析

Vite 就是利用浏览器支持原生的 es module 模块,开发时跳过打包的过程,提升编译效率。

5. preload 模式

<link rel="preload" as="script" href="index.js">

link 标签的 preload 属性:用于提前加载一些需要的依赖,这些资源会优先加载(如下图红框)
在这里插入图片描述

例如:在 Vue2 项目打包生成的 index.html 文件,会自动给首页所需要的资源,全部添加 preload,实现关键资源的提前加载。
在这里插入图片描述

> preload 特点:

  1. preload 加载的资源是在浏览器渲染机制之前进行处理的,并且不会阻塞 onload 事件;

  2. preload 加载的 JS 脚本其加载和执行的过程是分离的,即 preload 会预加载相应的脚本代码,待到需要时自行调用;

6. prefetch

<link rel="prefetch" as="script" href="index.js">

prefetch 是利用浏览器的空闲时间,加载页面将来可能用到的资源的一种机制;通常可以用于加载其他页面(非首页)所需要的资源,以便加快后续页面的打开速度。

> prefetch 特点:

  1. pretch 加载的资源可以获取非当前页面所需要的资源,并且将其放入缓存至少5分钟(无论资源是否可以缓存)

  2. 当页面跳转时,未完成的 prefetch 请求不会被中断

> 加载方式总结

asyncdeferscript 标签的专属属性,对于网页中的其他资源,可以通过 linkpreloadprefetch 属性来预加载。

如今现代框架已经将 preloadprefetch 添加到打包流程中了,通过灵活的配置,去使用这些预加载功能,同时我们也可以审时度势地向 script 标签添加 asyncdefer 属性去处理资源,这样可以显著提升性能

👉 五、图片资源处理

> 图片大小控制 或 使用云存储

在页面中,在不影响图片的查看的同时,适当调整图片的分辨率大小。能够很大程度上的减少资源加载所需时间,如下图所示,不同分辨率下的图片占用资源大小:

在这里插入图片描述
在这里插入图片描述

> 图片懒加载

对于一些图片量比较大的首页,用户打开页面后,只需要呈现出在屏幕可视区域内的图片,当用户滑动页面时,再去加载可视窗口内的图片,以优化图片的加载效果。

最常见的例子就是:淘宝、今日头条等等,数据量大的页面资源加载。

> 图片懒加载实现原理:

由于浏览器会自动对页面中的 img 标签的 src 属性发送请求并下载图片,可以通过 html5 自定义属性 data-xxx 先暂存 src 的值,然后在图片出现在屏幕可视区域的时候,再将 data-xxx 的值重新赋值到 img 的 src 属性即可。

<img src="" alt="" data-src="./images/1.jpg">
<img src="" alt="" data-src="./images/2.jpg">

这里以 vue-lazyload 插件为例。

// 安装 
npm install vue-lazyload 
// main.js 注册
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload)
// 配置项
Vue.use(VueLazyload, {
  preLoad: 1.3,
  error: 'dist/error.png', // 图片加载失败时的占位图
  loading: 'dist/loading.gif', // 图片加载中时的占位图
  attempt: 1
})
// 通过 v-lazy 指令使用
<ul>  
    <li v-for="img in list">
        <img v-lazy="img.src" :key="img.src" >
    </li>
</ul>

📃 总结

感谢各位小伙伴们,能够认真看到这里。通过本篇文章,相信大伙都对前端资源加载优化方面有了更加深入的了解!即使优化方案稍微有些简单,但是优化后的效果卓著。

相信还有更多有关前端性能优化相关的内容,在等待我们的挖掘! 仅以此文抛砖引玉,希望大家不要吝啬你们手中的赞,给小温一点支持吧!

📃 参考文献

往期内容 💨

🔥 < element-Ui表格组件:表格多选功能回显勾选时因分页问题,导致无法勾选回显的全部数据 >

🔥 < 每日闲谈:你真的了解 “ ChatGPT ” 嘛 ? >

🔥 < 每日算法 - JavaScript解析:搜索旋转排序数组 >

🔥 < CSS小技巧:类似photoShop的混合模式(mix-blend-mode / background-blend-mode)使用 >

🔥 <开源: 推荐10个开源的前端低代码项目>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

技术宅小温

你小小的鼓励,是我搬砖的动力!

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值