遇到 10w 条数据页面卡了怎么办？

上次更新 2024年10月12日星期六 7:59:25 字数 0 字 时长 0 分钟

• 首先要确定的事情是哪里比较慢呢，这里可能接口返回数据因为数据量级较大请求比较耗时，当然也可能是渲染数据导致的页面卡顿。
  • 这里是怎么判断的呢，看控制台 nextworker 接口请求花费时间 当然也可以监听返回数据作为耗时依据（测算）方式很多， 这里 performance、now Date、console.time、console.timeEnd 等来计算 计算页面渲染花费的时间。
  • 可以利用 devtools performance 来查看页面渲染时间 （main 主要任务渲染帧卡顿 或渲染比较耗时 呈现红色（特殊颜色））
• 一般来说 两者都会存在的 ，渲染慢了，（可以采用 减小数据量）具体形式可以是 分页 加载更多 虚拟滚动 等。
• 服务端需要优化接口返回数据，接口分页 + 缓存处理；
• 当然也可能存在网络请求 多跳传输 造成 接口耗时的问题
• 可能是由于达到了浏览器最大请求数量上限，导致浏览器卡顿；合并请求 ，曾经遇到过项目中某些数据无法直接连源头数据库，直属管理甲部门写了个接口，然后呢乙部门 写了个接口。我们当前的业务需要拿到两者的数据 之后进行融合统计，由后台统一处理，而不是前台来直接访问 代理接口。这样可以减少网络请求。