• 请不要在回答技术问题时复制粘贴 AI 生成的内容
skyrem
V2EX  ›  程序员

如何以最快速度加载 H5 页面,考虑网络不佳的情况?

  •  
  •   skyrem · Jun 22, 2021 · 4400 views
    This topic created in 1961 days ago, the information mentioned may be changed or developed.

    如题,公司在做一个类似收钱吧的产品

    需要用户扫一个二维码,加载微信公众号下的付款页面

    页面内容是一个简单的数字键盘,用于输入付款的金额

    这个过程有一个微信授权的跳转,大概 200ms 左右

    服务器页面的响应大概 400ms 左右

    这是正常网络的情况,但是会有弱网络的情况,比如小县城的菜市场

    目前是单台服务器, 加载的 js 放了 cdn,然后还有个商家上传的 logo,压缩过

    老板的问题是,为什么别人(收钱吧)在(菜市场)打开很快,而我们的很慢?

    求教各位大佬,还有什么办法可以加快页面加载速度 ?

    阿里云的 SLB 负载均衡+高可用的服务,感觉是为了高并发和弹性扩容设计的,用在提高加载速度上效果是否明显?

    33 replies  •  2021-06-23 23:52:25 +08:00
    37Y37
    37Y37
    Jun 22, 2021
    1
    前端:尽量减少页面资源加载,用到的所有资源全部放到 CDN,可以浏览器 F12 看下加载了哪些资源,资源加载的时间
    3dwelcome
    3dwelcome
    Jun 22, 2021
    2
    把 logo 和 js 什么都存本地呗。

    我一个公众号页面就是,虽然有点奇葩,但是 JS/IMG 只有第一次加载,是在服务器下载一次,以后都是脚本从 local storage 直接读取塞到页面里。

    主页面就是一个空壳 HTML,很难不快。
    37Y37
    37Y37
    Jun 22, 2021❤️1
    3
    后端:接口要尽可能的快,BGP 多线网络,如果有可能服务分地区 /运营商部署,没可能的话就 BGP 吧简单点
    skyrem
    skyrem
    OP
    Jun 22, 2021
    4
    @37Y37 #1 加载资源很少,只有 h5 页面,css 样式写在页面内 , 一个放了 cdn 的 jquery.min, 一个商家 logo
    skyrem
    skyrem
    OP
    Jun 22, 2021
    5
    @3dwelcome #2 是,现在说的就是第一次访问的情况
    IvanLi127
    IvanLi127
    Jun 22, 2021
    6
    就这一个页面吗? 用 jq 写应该很小吧,你们资源有多大哦?
    skyrem
    skyrem
    OP
    Jun 22, 2021
    7
    @37Y37 #3
    分地区 /运营商部署 这是不是就是阿里云的 SLB
    多个地区多台服务器,通过入口服务器分配连接?
    skyrem
    skyrem
    OP
    Jun 22, 2021
    8
    @IvanLi127 #6 10kb 以内吧,连商家 logo
    kop1989
    kop1989
    Jun 22, 2021
    9
    如果是针对性解决的话:
    1 、可以研究一下收钱吧这个页面的 cdn 部署。
    2 、对比你的页面和收钱吧页面的业务逻辑以及素材大小有没有差距。

    这样基本上就能应对“收钱吧”快,但你们慢的问题。
    skyrem
    skyrem
    OP
    Jun 22, 2021
    10
    @skyrem #8 说错,100kb
    3dwelcome
    3dwelcome
    Jun 22, 2021
    11
    如果只是第一次下载优化,那就不用 jq, 自己 js 手写 dom,这样 jquery.min 也不需要下载了。
    IvanLi127
    IvanLi127
    Jun 22, 2021
    12
    要不考虑把 jq 去掉?毕竟这个库自己就挺大的。 不过既然有竟品可以分析,还是对照着抄抄吧?
    IvanLi127
    IvanLi127
    Jun 22, 2021
    13
    我感觉这个 cdn 的 jq 有点可疑,你有测过这个 jquery.min.js 在网络不好的情况下加载完成要多久吗?
    3dwelcome
    3dwelcome
    Jun 22, 2021❤️1
    14
    这种短链接网络优化,微信开发团队最有发言权了。

    他们文章里说 HTTPS 握手太慢,所以自己发明轮子,开发了一个 MMTLS 协议,来代替传统的 TLS/SSL,可以应对菜场里的网络极差情况。

    我去查了一下,最主要就是优化 RTT,应该挺有效果。楼主可以和老板建议一下,开发一套 MyHTTPS 。
    suzic
    suzic
    Jun 22, 2021 via Android
    15
    这种简单页面可以不用 jq 之类的库,不过看了下 100k 以内应该不算大,主要在服务端优化把
    Torpedo
    Torpedo
    Jun 22, 2021
    16
    @3dwelcome 为啥不直接用 http 缓存?
    MeteorCat
    MeteorCat
    Jun 22, 2021 via Android
    17
    这种直接 cdn 解决就行了
    cest
    cest
    Jun 22, 2021
    18
    @3dwelcome #14 http3 0rtt, 就看营运商 udp 了
    3dwelcome
    3dwelcome
    Jun 22, 2021
    19
    @Torpedo “为啥不直接用 http 缓存?” 因为是页面启动资源都很小,而资源 hash 变动后,失效后重新下载 http 缓存,是一件挺麻烦的事情。

    要是应用里大的图片资源,就走正规异步 http 缓存了。
    chezs66
    chezs66
    Jun 22, 2021❤️1
    20
    离线化优先,PWA 或者小程序
    han3sui
    han3sui
    Jun 23, 2021
    21
    模拟下弱网环境,看下各项加载,针对优化就好了吧
    genesischou
    genesischou
    Jun 23, 2021
    22
    直接做成小程序
    duduaba
    duduaba
    Jun 23, 2021
    23
    页面响应 400ms 是不是有点长了
    cyrbuzz
    cyrbuzz
    PRO
    Jun 23, 2021❤️1
    24
    在网络好的时候,页面响应要 400ms 是不是有些慢?

    感觉还是先优化下这块吧,服务器端只是返回一个 HTML 需要 400ms 这问题有点大,只经过 Nginx 怎么会需要这么长时间,弱网下 400ms 还正常一些。另外 TCP 慢启动第一个 TCP 包大小是 14kb,可以想想办法优化到 14kb...
    skyrem
    skyrem
    OP
    Jun 23, 2021
    25
    @chezs66 #20
    @genesischou #22
    小程序就不考虑了,pwa 这个之前没听过,我去研究下
    skyrem
    skyrem
    OP
    Jun 23, 2021
    26
    @IvanLi127 #13
    具体的现场我没去过,是业务人员反映的
    主要是想看看还有什么地方可以改进的
    skyrem
    skyrem
    OP
    Jun 23, 2021
    27
    @3dwelcome #14
    @cest #18
    我查了下 http3 和 quic 需要在浏览器端开启支持,这个对于使用老旧手机的用户而言不太现实
    这个 mmtls 是微信浏览器默认支持的吗?
    skyrem
    skyrem
    OP
    Jun 23, 2021
    28
    @coderfuns #23
    @cyrbuzz #24
    是的,服务器端还有优化的余地,主要公司一开始用了个很旧的框架,这个要改起来很麻烦
    skyrem
    skyrem
    OP
    Jun 23, 2021
    29
    @cyrbuzz #24
    慢启动这个概念我也没听过,意思是 14kb 以内可以极大的减少 RTT ?
    ishalla
    ishalla
    Jun 23, 2021
    31
    啊这个问题我也遇到了,不过我不是写代码的,而是做架构的,老板让我们想办法,CDN 都换过好几家,后来我就观察了一些别的号,发现其实可能也不是我们自己的页面慢,而是别家打开弹窗跳券。。
    跳出来一个优惠券,用户有的会点有的不会点,但自然感觉不到页面加载慢了。。
    ccraohng
    ccraohng
    Jun 23, 2021
    32
    全站加速。
    就一个键盘,尽量不要用库。
    图片用 secset 用 webp 。
    加快后端响应
    towry
    towry
    Jun 23, 2021
    33
    打开控制台看下 network 的 timeline 是哪些部分请求太慢。
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Privacy   ·   Solana   ·   2598 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 60ms · UTC 15:11 · PVG 23:11 · LAX 07:11 · JFK 10:11
    ♥ Do have faith in what you're doing.