记一次VUE项目页面加载慢问题处理过程

项目采用前后端分离结构,前端使用VUE,后端Java SpringBoot实现.

现象: 开发完成的前端页面,其中一个页面响应时间达到1分钟,其他页面响应正常. 

线索1:

使用chrome开发者模式,查看接口响应情况,发现很多接口处于pending状态的访问;

 线索2:

所有pending状态的接口访问都是访问后台接口;

线索3: 

使用apiPost/PostMan模拟访问后台接口, 响应均在几ms到几十ms之间;

线索4:

响应返回结果如下: 存在几个504,其余为200正常响应

 线索5:

查看504响应timming,如下: 时间消耗在waitting阶段,很明显为接口访问时间超时

线索6:

查看200响应timming,如下: 阻塞在stalled阶段

 

结论:

答案揭晓之前有一个知识点需要补充: 浏览器存在最大并发请求数,我测试使用的chrome浏览器,该浏览器的最大并发数为6.

结合以上线索不难看出, 报504的接口数为6个, 与chrome并发访问数相等, 说明这6个访问占用了所有并发,导致后面的接口必须等待,最终造成了很多访问处在pending状态的问题.