首页 注册 登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
chenlaocong
V2EX  ›  程序员

前端一次性发起多个请求发现返回的请求时间太长 ，是前端原因还是后端

  •   
  •   chenlaocong · 2019-07-08 10:21:20 +08:00 · 11550 次点击
    这是一个创建于 1963 天前的主题，其中的信息可能已经有所发展或是发生改变。

    有一个需求是前端一次性请求 10 个接口，等 10 个接口全部请求完毕之后前端再解析。 但是发现 10 个接口中总是有几个接口过慢。差不多 10 秒钟，然后后端打日志，发现数据库请求加后端程序处理只用了 2 秒左右。于是查看前端 network 的时间，发现其余的 8 秒发现是花费在了 ttfb 上，查了一下 TTFB 指的是前端发起请求到后端接受第一个字节所需要的时间。

    • 前端同时发起 10 个请求
    • 后端数据库用的是 es，每个接口也会访问 mysql，要权限认证
    • 后端总共耗时也差不多 2 秒
    • 10 个接口只有 2-3 个接口 TTFB 时间长，需要 10 秒左右，其他接口 natwork 时间 2-3 秒就可以

    那么问题就来了，这个 TTFB 是前端的原因还是后端的，会不会是 mysql 或者 es 多个访问阻塞了，或者是因为 nginx 配置，或许可能是服务器性能差？要怎么优化这个时间，有经验的大佬请回答下。 PS 我是前端，不太懂服务端这些 nginx 配置啥的

    第 1 条附言  ·  2019-07-08 16:09:11 +08:00
    PS： 不知道是不是因为服务器性能的原因 多个请求的时候服务器 cpu 直接 70%--80%了
    第 2 条附言  ·  2019-07-08 16:28:35 +08:00
    前端同时请求 6 个接口
    - java 查询 es 数据量小的时候 cpu 占用 30% 以下 最长的接口时间 2 秒左右
    - java 查询 es 数据量大的时候 cpu 占用 80% 左右 最长的接口时间 10 秒左右
    - 估计是因为 java 处理数据的时候内存占用太大了吧
    第 3 条附言  ·  2019-07-08 19:05:43 +08:00
    PPPS: 谢谢给位的解答 6 个接口 后端写成一个接口返回时间更慢了 估计就是服务器性能问题了
    第 4 条附言  ·  2019-07-08 19:12:21 +08:00
    后端接口和为一个的时候 Content Download 时间需要 8 秒了 ttfb 是 4 秒
  • TTFB
  • 请求
  • 接口
  • 前端
    45 条回复  •  2021-03-05 21:14:20 +08:00
    IsaacYoung
        1
    IsaacYoung  
       2019-07-08 10:36:59 +08:00 via iPhone
    浏览器同一域名下并发请求数量有限制
    话说你一开始就 10 个请求是不是考虑下设计上的问题
    oatw
        2
    oatw  
       2019-07-08 10:39:21 +08:00
    一楼正解。

    如果受制于后端接口，考虑一下把不在首屏显示的内容相关接口延迟请求，最好还是在接口数量的问题上做优化。
    seansong
        3
    seansong  
       2019-07-08 10:39:30 +08:00
    ttfb 是服务器响应时间吧，也就是服务器那边慢了，最好彻查一下整个完整的链路，你请求发到服务器之后，首先接收的应该是 nginx 之类的，然后才转发到后端 tomcat 之类，然后才是代码过程，卡住的不一定是代码过程
    fortunezhang
        4
    fortunezhang  
       2019-07-08 10:42:38 +08:00   ❤️ 1
    前端:promose.all
    后端：再封装一下
    zqx
        5
    zqx  
       2019-07-08 10:43:09 +08:00 via Android
    浏览器一个进程页面一般只能并发 6-8 个请求
    chenlaocong
        6
    chenlaocong  
    OP
       2019-07-08 10:45:17 +08:00
    @IsaacYoung
    @oatw
    @zqx
    谢谢 不过我把接口减少到 6 个也是有一两个是比较慢的
    chenlaocong
        7
    chenlaocong  
    OP
       2019-07-08 10:46:03 +08:00
    @fortunezhang 目前就是 promise.all 的前端 后端的话是不是因为不能同时接受这个多请求吗
    royzxq
        8
    royzxq  
       2019-07-08 10:46:16 +08:00
    一次 10 个接口，是个狼灭
    chenlaocong
        9
    chenlaocong  
    OP
       2019-07-08 10:47:08 +08:00
    @seansong 谢谢 后端代码是没问题的 估计是 nginx 或者是数据库的或者是服务器性能的问题
    learnshare
        10
    learnshare  
       2019-07-08 10:47:13 +08:00
    前端堵塞吧，把请求分两组（两个 Promise.all ）发出去试试
    chenlaocong
        11
    chenlaocong  
    OP
       2019-07-08 10:48:05 +08:00
    @royzxq 因为要 10 个接口聚合来进行前端的展示 前端传不同的参数 请求的是后端的同一个封装好的接口
    chenlaocong
        12
    chenlaocong  
    OP
       2019-07-08 10:48:33 +08:00
    @learnshare 谢谢 我分成两个试一下
    seeusoon
        13
    seeusoon  
       2019-07-08 10:48:34 +08:00
    多个接口换到不同的域名下试试
    仔细看一楼说的，同一域名下同时的网络请求数目是有限制的
    chenlaocong
        14
    chenlaocong  
    OP
       2019-07-08 10:59:01 +08:00
    @seeusoon 我在本地浏览器打开请求本地的后端 是正常速度 崩溃了
    azh7138m
        15
    azh7138m  
       2019-07-08 11:09:11 +08:00
    HTTP2，请
    15651980765
        16
    15651980765  
       2019-07-08 11:09:38 +08:00
    实在想象不到一次使用 10 个接口的场景；难道不可以让后台合并数据统一返回吗？
    之前我们项目也有个列表每一项都发一条请求，导致加载极慢，后来后台合并成一个接口，前端再拆分。
    f056917
        17
    f056917  
       2019-07-08 11:11:04 +08:00
    @chenlaocong 用 postman 试呀
    f056917
        18
    f056917  
       2019-07-08 11:12:25 +08:00
    话说回来，最好的方法还是重新设计
    CodeCore
        19
    CodeCore  
       2019-07-08 11:12:28 +08:00
    合并接口, 不同的参数, 就多传参数. 也比那么多接口好. 这还是延迟, 如果其中一两个不返回,或者延迟再高点, 不就跪了.
    glaucus
        20
    glaucus  
       2019-07-08 11:14:32 +08:00
    我和楼主一样，是一个 Dashboard 项目，需要异步同时请求 10 来个接口，看了这个帖子打算回去优化一下了
    learnshare
        21
    learnshare  
       2019-07-08 11:25:32 +08:00
    @15651980765 #15 也有可能是写接口的人不好调教
    jialing
        22
    jialing  
       2019-07-08 11:25:40 +08:00
    接口使用多域名；中间件 聚合接口；
    utf16
        23
    utf16  
       2019-07-08 11:32:57 +08:00
    为啥不优化一下 可以合下接口
    xrr2016
        24
    xrr2016  
       2019-07-08 11:36:04 +08:00 via Android
    建议合并后端接口
    keelii
        25
    keelii  
       2019-07-08 11:53:17 +08:00   ❤️ 1
    君不见淘宝，京东图片都是 img1,2,3,3 么。分流下。另外看下请求瀑布流看看到底慢在哪里？分流不好做就让后端包一层拼合的接口，批量操作。
    Mazexal
        26
    Mazexal  
       2019-07-08 11:56:05 +08:00
    一般是中间加一层, 你们用 node 来桥接下, 然后包装成一个接口给前端
    hubahuba
        27
    hubahuba  
       2019-07-08 11:58:01 +08:00
    Promise 好一些吧
    meepo3927
        28
    meepo3927  
       2019-07-08 11:59:26 +08:00
    合并成 1-2 个接口吧 ， 可以考虑引入中间层
    laravel
        29
    laravel  
       2019-07-08 12:07:51 +08:00
    我们以前都是后端用 laravel，然后中间用 nodejs 写接口，就是从 N 个接口获取数据，然后做业务处理，然后把处理后的数据返回给前端（也是我，就是这么神奇）
    laravel
        30
    laravel  
       2019-07-08 12:08:07 +08:00
    后端用 java
    heasy
        31
    heasy  
       2019-07-08 12:42:43 +08:00 via iPhone
    合并接口优化或者前端使用 Promise.all
    duan602728596
        32
    duan602728596  
       2019-07-08 12:50:30 +08:00 via iPhone
    这种基本上就是需要后端出一个接口聚合数据，而不是让前端请求 10 个接口
    chenlaocong
        33
    chenlaocong  
    OP
       2019-07-08 12:51:54 +08:00 via Android
    @heasy promise.all 也是相当于同时请求多个接口了吧。我现在就是 promise.all
    fishlium
        34
    fishlium  
       2019-07-08 14:29:43 +08:00
    10 个接口应该还好吧，看你描述不像是浏览器对域名的限制，仔细排查一下整个过程，上个 http2 可以彻底排除浏览器对域名限制这一项
    colorfulberry
        35
    colorfulberry  
       2019-07-08 15:04:02 +08:00
    需要一个 graphiql
    goofool
        36
    goofool  
       2019-07-08 16:53:20 +08:00
    只有一台服务器吗？默认长连接，有可能请求是顺序执行的。
    imbacc
        37
    imbacc  
       2019-07-08 17:34:35 +08:00
    写个 node 可以把
    fortunezhang
        38
    fortunezhang  
       2019-07-08 17:41:46 +08:00
    @chenlaocong 不是，后端在并发的情况处理好的话 10 个还是没问题的。 你可以看下浏览器的 network，感觉楼上说的同一个域名并发数有限有可能，你得看下网络，如果真的这样的话就需要加一个域名了。
    morethansean
        39
    morethansean  
       2019-07-08 18:02:02 +08:00
    卡连接池也是 pending 啊，ttfb 跟连接池有什么关系？
    Ritr
        40
    Ritr  
       2019-07-08 18:32:58 +08:00
    合并接口吧，不建议用现在的方式
    wszgrcy
        41
    wszgrcy  
       2019-07-08 18:38:39 +08:00 via Android
    @fortunezhang 哈哈哈，真实
    ochatokori
        42
    ochatokori  
       2019-07-08 19:05:47 +08:00 via Android
    http2 或许可以解决问题？
    iyaozhen
        43
    iyaozhen  
       2019-07-08 19:05:58 +08:00 via Android
    压测工具压一下就知道了
    ttfb 一般就是后端慢了，浏览器限制的话能看见请求是开始时间接着结束时间吧
    mikoshu
        44
    mikoshu  
       2019-07-09 11:36:57 +08:00
    先用 node 请求测试下 排除浏览器的问题 那就是后端或者服务器的锅了
    Yrobot
        45
    Yrobot  
       2021-03-05 21:14:20 +08:00 via Android
    合并一下 query 吧，和后端商量下搞个页面 init 时的接口。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1011 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 29ms · UTC 22:20 · PVG 06:20 · LAX 14:20 · JFK 17:20
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.