记一次router.push切换页面缓慢的分析

Daotin 于 2024-10-30 发布 编辑

背景

今天客户反馈一个问题,说再关闭标签页的时候,很慢,要几秒钟后才能跳转到前一个页签页面。就像这样:

image

分析过程

1、打印关闭的完整链路log

由于使用的是前端若依框架,这个关闭的操作都是封装好的,所以,我想是不是在关闭的某个链路上出现了问题,就从关闭开始,到跳转页面(router.push的位置)的整个链路都加了打印信息。

发现,打印都是瞬间完成的。这么看来是router.push比较慢?这不科学啊!

2、router.push慢是不是页面太大或者接口慢导致的?

首先分析是不是接口慢导致的,但是因为这些页面都加了缓存,所以跳转的时候并没有请求接口,所以接口慢的问题也不存在。

是不是页面dom元素太多?然后,我就使用v-if=”false”屏蔽了大量的元素,依然有这个问题。

没辙了,只能去网上求助了。

3、搜索router.push跳转缓慢,卡顿

网上又人说法是,router.push如果使用querys传参,可能会有缓慢的情况,用params就不会。所以他就使用router.resovle+window.open来代替,但是肯定是不妥的。

依然没有找到好的方案,于是我换成英文搜索 (比如 $router.push query is slow),然后有了新的灵感

image

4、通过vueTools开发者工具,查看哪个页面加载时间长

这一下子就发现问题了,这是其中一个ElFormItem,可以看到它竟然花了1687ms,这就是根源所在。

image

看到具体代码是这个元素使用了el-select,接口的数据很大,导致页面切换卡顿。

以上,是整个问题的分析流程。