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

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

  •  
  •   chenlaocong · 44 天前 · 3839 次点击
    这是一个创建于 44 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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