vue项目router切换太慢问题

问题定位:

随着项目增大,有一天突然发现页面切换时候,要等1-2s页面才切换过去,然后就开始定位问题,刚开始以为时页面组件太多导致的,通过删除组件,发现没啥改善,然后就在两个页面打印日志,第二页面created周期时间和路由切换时间相差不大,可以排除是页面渲染耗时。然后在第一个页面的destroyed周期里面打印日志,发现destroyed->router切换耗时1.5s左右,这时候定位问题是vue的destroyed周期耗时。

destroyed周期耗时:

这时候就考虑destroyed为啥要那么久,这时候就很纳闷,第一反应肯定是页面组件太多,这是把组件都删了,还是很慢,然后页面就剩下一个表格和查询条件,然后就想是不是数据量太大导致destroyed耗时,然后就查页面接口,发现有个list接口有4000多条数据,然后去掉接口,页面切换立马流畅了;就想数据多为啥导致销毁耗时,然后就想到了这个list是下拉框,这4000多条数都渲染在页面上,销毁不耗时才怪呢。

selected下拉框数据多,导致销毁耗时

然后就想办法处理select数据多问题,第一时间想用服务端过滤,想到服务端性能跟不上,只能在前端过滤;然后就想办法在前端过滤,初始化不给值,筛选的时候才给筛选过后的值

    remoteMethod(query) {
      if (query !== "") {
        this.selectLoading = true;
        setTimeout(() => {
          this.selectLoading = false;
          this.source.storeSelectList = this.source.storeList.filter(item => {
            return (
              item.storeName && item.storeName.toLowerCase().indexOf(query.toLowerCase()) > -1
            );
          });
        }, 200);
      } else {
        this.source.storeSelectList = this.search.brandId
          ? this.source.storeList
          : [];
      }
    }

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值