专栏文章 [bug 排查] H5 校区详情页面刷新慢问题排查

飞狐 · April 17, 2019 · 72 hits

问题描述
(chrome)在校区列表,选择一个校区,点击查看校区详情,结果校区完全渲染完毕,耗时5秒左右;
单独刷新这个页面,也大致耗时5秒左右

  1. 其他几位童鞋的MAC上无此问题
  2. 我的电脑 使用safari浏览器验证,也无此问题

问题排查:

  1. F12查看打开校区详情页面的时候,监控浏览器的网络行为 涉及接口: /manage/classroom/list #查询教室列表

耗时: 45.31ms

/manage/school/7 # 查看校区详情

耗时:45.94ms

PS: 红框圈住是很关键的一个点,代表这个请求处理是在队列中开始时间,从这块数值很明显的看到 整个浏览器加载完成所需的耗时,是耗费在哪一个环节

从第一步分析结果: -->接口的响应时间不影响整个校区页面加载慢的原因

  1. 继续排查加载情况

在我的电脑上出现了307重定向,而其他童鞋没有出现这个问题,且一次307重定向耗时在1秒左右
查原因:

  1. 查询校区接口,返回的pictures 列表中的 图片地址是 http开头,而不是 https开头

我们采用7牛的CDN,已经配置了https方式,从而会自动进行307重定向
-->后续让服务端童鞋修改底层http拼接方式,返回https,我的浏览器不再出现307重定向

  1. 为什么别人电脑没出现307,而我的电脑出现了307问题

主要我的MAC之前做过这块配置,从而导致访问http不会直接跳转https

  1. 307重定向问题解决之后,发现问题仍然存在,还是卡,继续排查

1.校区信息接口返回从4.39ms + 响应时间 54.93ms

  1. 图片开始下载时间从 5.63s开始,说明整个页面渲染耗时5秒多 这中间到底经历了啥,前端童鞋介入排查

前端采用 vue框架,template模版进行渲染, 渲染 校区教室的时候,使用了 v-if标签,每次请求数据改变 loading 状态会造成多个模块渲染(比如modal 的 mount 和 unmount)影响渲染的性能

前端童鞋移除 v-if标签之后,问题解决

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
No Reply at the moment.
需要 Sign In 后方可回复, 如果你还没有账号请点击这里 Sign Up