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

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

  •  
  •   skyrem · 2021-06-22 15:39:06 +08:00 · 3173 次点击
    这是一个创建于 1010 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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