前端性能优化

前端性能优化思路
一、网络性能优化
1、网络请求个数优化
a)异步引用资源
i).vue文件中

defineAsyncComponent(() => import("vue文件地址"))

ii).js/.ts文件中
1、import()异步加载
2、import.meta.glob(“地址”,{eager:false})
3、vue-router中的component自带defineAsyncComponent解析功能，可以直接传入import()
b)异步插入
i)插入script：通过onMounted调用函数，函数中判断当前script中是否存在指定资源的url，存在则不请求，不存在则动态插入script
ii)插入link css：与插入script相同
c)文件优化
i)上传功能优化
1、上传队列控制

/**
 * @class QueueLoader
 * @classdesc 图片加载队列
 */
export class QueueLoader {
   
  // 私有静态实例，用于实现单例模式
  private static instance: QueueLoader;

  // 任务队列，存储回调函数
  private taskQueue: Array<() => Promise<boolean>> = [];

  // 当前活跃任务数
  private activeTasks: number = 0;

  // 最大并发请求数
  private maxConcurrentRequests: number = 4;

  // 私有构造函数，防止实例化
  private constructor() {
   }

  /**
   * 获取单例实例的方法
   * @returns {QueueLoader} 单例的 QueueLoader 实例
   */
  public static getInstance(): QueueLoader {
   
    if (!QueueLoader.instance) {
   
      QueueLoader

原文地址：https://blog.csdn.net/qq_41306452/article/details/143679517

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！