一个页面请求多个api接口的问题？

Question

点击按钮触发20多个请求接口，打开页面的时候会很卡，请问有什么方法优化？

现在是将近30秒才能加载完。

期望当用户点击按钮进到页面的时候，怎么让它十秒内加载完。

Answer 1

这东西得找后端优化，前端能做的就是减少接口调用。
但减少接口调用可能就会影响部分功能，这就得找业务协商。

所以，最后结论：

• 后端优化接口，加快响应速度；以及合并接口
• 前端减少接口调用次数

---

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。

Answer 2

看你具体接口情况吧，可以尝试：

1. 减少接口，或者考虑有的可以合并成一个
2. 异步加载，先请求重要的
3. 缓存，CDN这些都可以用起来

Answer 3

1、后端把一些可以合并在一起的接口进行合并
2、前端可以看哪些接口可以延迟调用,异步请求等
3、后端可以把一些固定数据的接口进行缓存也能加快请求速度

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。

Answer 4

1. 让后端合并
2. http2 （如果不是同一个接口，那么有可能是阻塞。这条 ROI 奇高无比）
3. 让后端搞快点

当然，他们都没说如何分析。其实你要先分析当前的场景，然后针对场景出方案，不是无脑巴拉巴拉。

举个例子，让后端搞快点，这不是废话吗，是我不想上清华北大吗？

所以应该问一下为什么不快？后端说因为这是个大计算的任务，那么下面就是问能不能提前计算？或者说使用缓存？阶段计算？

当然这里面你也可以用到一些工具，比如说

1. network ，去区分是前端还是后端的问题。
2. performance 分析前端性能卡点

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。

Answer 5

一般这种业务问题，要根据业务场景来决定处理方式。
20个API，是不是都要求实时数据？
有没有一些数据，是可以先显示上一次放回的数据，然后延迟请求的？
有没有一些数据，是不影响页面呈现，可以分屏加载，延迟请求的？
从前端的方式，只能通过调整顺序来解决问题。
要从根源上解决还得在服务器端。

Answer 6

还是得具体分析：

• 请求处理本身慢

  • 这种情况就只能服务端做优化，因为这个过程大多数是他们各种 联表查询、操作，导致响应慢

• 数据量大

  • 如果说这个 20 几个接口中存在大数据，那么也会造成速度慢，一个慢在服务端查询，一个慢在 http 传输

• 前端请求处理不当导致慢

  • 前端要发起 20 几个请求，那么这个请求是不是互相独立的，会不会存在说 一个请求走完在走另一个请求的情况

• 网络堵塞

  • 通常接口请求响应是需要进行排队的，一次性发起 20 几个请求必然存在排队的情况

页面卡顿具体原因还得实际分析，要么数据量太大，一次性渲染的 dom 太多，要么就是代码中个中 监听、计算属性等等使用不合理，导致页面数据容易产生重复更新等等

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。

Answer 7

一个按钮触发 20 个接口……

我不想说前端还是后端的问题，这个问题其他各位已经说得很清楚了。

作为一个产品来说，一个按钮让用户等 30 秒，是否考虑过用户的感受？如果考虑用户的感受，那这 30 秒应该如何优化？把优化方案讨论出来，该谁的事就谁的事，说不定前端后端都不用改，需要改的是数据库……或者运维升级下服务器就能解决呢？

处理这种问题，还是不要把各个子团队分离开来，都是做产品（或项目）的，还是需要从整体的角度来考虑。

Answer 8

30秒！！！赶紧开会讨论解决方案吧。

优化思路：

• 接口合并：先分析接口的请求响应时间，然后再考虑要不要将多个接口合并成一个接口。目的是减少请求的数量和网络传输的时间。
• 异步加载：分析页面上的数据，是否可以让页面一边加载一边显示。这样能够让页面更快地展现给用户，也不会让用户感到卡顿。
• 数据缓存：将一些可能频繁使用的数据缓存到前端，避免重复请求。可以使用localStorage、sessionStorage等来缓存数据。
• 资源压缩：将JS、CSS、图片等资源进行压缩，减小文件大小。