执笔看墨花开💜千千 执笔看墨花开💜千千
首页
  • JavaScript
  • Vue
  • React
  • HTML
  • CSS
  • 算法
  • 工具教程
  • 面试题清单
  • 大前端
  • HTML
  • CSS
  • JS
  • Vue
  • React
  • 零碎
  • 杂言碎语
  • 前端
  • 工具
  • 设计 & CSS
  • 社区 & 平台 & 博客
  • 网站
  • 推荐库
  • 值得一读
  • 分类
  • 标签
  • 归档
  • 心情杂货
  • 友情链接
  • 关于
GitHub (opens new window)

执笔看墨花开

顺其自然
首页
  • JavaScript
  • Vue
  • React
  • HTML
  • CSS
  • 算法
  • 工具教程
  • 面试题清单
  • 大前端
  • HTML
  • CSS
  • JS
  • Vue
  • React
  • 零碎
  • 杂言碎语
  • 前端
  • 工具
  • 设计 & CSS
  • 社区 & 平台 & 博客
  • 网站
  • 推荐库
  • 值得一读
  • 分类
  • 标签
  • 归档
  • 心情杂货
  • 友情链接
  • 关于
GitHub (opens new window)
  • JS文章

  • Vue文章

  • 跨端开发

  • React文章

  • 杂文

    • Webstorm排查插件问题
    • 为什么前端监控要用GIF打点
    • Bilibili短链生成器
    • Typora Bilibili图床插件
    • 防盗链那些事之referer
    • 获取B站SESSDATA
    • serverless+webpack解决node_modules空间大的问题
    • SPA单页应用直接使用百度统计
    • 先concat再去重引发的性能问题
    • 利用引用与时间戳解决一次性能问题
    • 批量新建工作项界面卡顿
    • 大用户数量加载慢分析
  • CSS

  • 前端
  • 杂文
执笔看墨花开
2021-08-12

大用户数量加载慢分析

问题描述 打开项目概览/工作项列表/附件预览时。感觉卡顿

问题根因 成员数量太多,取了不需要的组织成员数据 使用了性能低下的方法 待补充

故障排查过程 通过工作项列表,录下的用户的performance图

这两段部分为取了全量的team member和org member。分别都是2s左右,其中后半部分orgmember在大部分界面是不需要使用的,可以不获取。但目前的获取阻塞了后续的渲染。

这两段为取完了数据后,前端将数据存在内存时所执行的方法。可以看到这两个位置主要对应的全都是js在执行。并且可以看下面的细节发现主要都是执行normalize的方法。根据以往的经验,这里可以从2s缩减到300ms左右。

该位置的info接口耗时5s,但看图得知同时有js在进行大量处理。

目前尚不能确定是否是因为js的执行阻塞了请求,导致请求变慢。

因为是保存的文件,需要后续再确定对应执行的代码是否有性能问题。

故障修复方法

  • 除了组织成员管理界面以外,不获取组织成员(可优化时间:请求时间2s,处理对应数据时间3s)
  • 重写处理team member的代码,提升优化速度(可优化时间:1.5s)
  • 作为性能问题负责人,希望修改配置后不获取全量数据,以提升修改时的性能体验
  • 工作项列表分页预取数量减少到50,以提升首次加载的性能

后续改进 #183076 分析 info 接口的性能优化点

参考资料

编辑 (opens new window)
#性能优化
上次更新: 2021/08/12, 14:18:30
批量新建工作项界面卡顿
CSS教程和技巧收藏

← 批量新建工作项界面卡顿 CSS教程和技巧收藏→

最近更新
01
Vue2
08-26
02
JS编程题
08-26
03
前言
08-26
更多文章>
Theme by Vdoing

© 2021-2021 执笔看墨花开

粤ICP备2021110554号
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式
×