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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 1249 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

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

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

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

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

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

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

老板的问题是，为什么别人（收钱吧）在（菜市场）打开很快，而我们的很慢？

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

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

页面

菜市场

付款

CDN

33 条回复 • 2021-06-23 23:52:25 +08:00

37Y37

2021-06-22 15:42:56 +08:00

前端：尽量减少页面资源加载，用到的所有资源全部放到 CDN，可以浏览器 F12 看下加载了哪些资源，资源加载的时间

3dwelcome

2021-06-22 15:45:20 +08:00

把 logo 和 js 什么都存本地呗。

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

主页面就是一个空壳 HTML，很难不快。

37Y37

2021-06-22 15:45:30 +08:00

后端：接口要尽可能的快，BGP 多线网络，如果有可能服务分地区 /运营商部署，没可能的话就 BGP 吧简单点

skyrem

2021-06-22 15:45:53 +08:00

@37Y37 #1 加载资源很少,只有 h5 页面，css 样式写在页面内，一个放了 cdn 的 jquery.min, 一个商家 logo

skyrem

2021-06-22 15:50:22 +08:00

@3dwelcome #2 是，现在说的就是第一次访问的情况

IvanLi127

2021-06-22 15:51:45 +08:00

就这一个页面吗？用 jq 写应该很小吧，你们资源有多大哦？

skyrem

2021-06-22 15:54:59 +08:00

@37Y37 #3
分地区 /运营商部署这是不是就是阿里云的 SLB
多个地区多台服务器，通过入口服务器分配连接？

skyrem

2021-06-22 15:56:08 +08:00

@IvanLi127 #6 10kb 以内吧，连商家 logo

kop1989

2021-06-22 16:00:52 +08:00

如果是针对性解决的话：
1 、可以研究一下收钱吧这个页面的 cdn 部署。
2 、对比你的页面和收钱吧页面的业务逻辑以及素材大小有没有差距。

这样基本上就能应对“收钱吧”快，但你们慢的问题。

skyrem

2021-06-22 16:08:27 +08:00

@skyrem #8 说错，100kb

3dwelcome

2021-06-22 16:11:37 +08:00

如果只是第一次下载优化，那就不用 jq, 自己 js 手写 dom，这样 jquery.min 也不需要下载了。

IvanLi127

2021-06-22 16:11:58 +08:00

要不考虑把 jq 去掉？毕竟这个库自己就挺大的。不过既然有竟品可以分析，还是对照着抄抄吧？

IvanLi127

2021-06-22 16:13:06 +08:00

我感觉这个 cdn 的 jq 有点可疑，你有测过这个 jquery.min.js 在网络不好的情况下加载完成要多久吗？

3dwelcome

2021-06-22 16:16:30 +08:00

这种短链接网络优化，微信开发团队最有发言权了。

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

我去查了一下，最主要就是优化 RTT，应该挺有效果。楼主可以和老板建议一下，开发一套 MyHTTPS 。

suzic

2021-06-22 18:17:57 +08:00 via Android

这种简单页面可以不用 jq 之类的库，不过看了下 100k 以内应该不算大，主要在服务端优化把

Torpedo

2021-06-22 18:21:21 +08:00

@3dwelcome 为啥不直接用 http 缓存？

MeteorCat

2021-06-22 18:23:33 +08:00 via Android

这种直接 cdn 解决就行了

cest

2021-06-22 18:26:13 +08:00

@3dwelcome #14 http3 0rtt, 就看营运商 udp 了

3dwelcome

2021-06-22 21:05:57 +08:00

@Torpedo “为啥不直接用 http 缓存？” 因为是页面启动资源都很小，而资源 hash 变动后，失效后重新下载 http 缓存，是一件挺麻烦的事情。

要是应用里大的图片资源，就走正规异步 http 缓存了。

chezs66

2021-06-22 22:52:45 +08:00

离线化优先，PWA 或者小程序

han3sui

2021-06-23 08:57:19 +08:00

模拟下弱网环境，看下各项加载，针对优化就好了吧

genesischou

2021-06-23 10:21:36 +08:00

直接做成小程序

duduaba

2021-06-23 10:22:59 +08:00

页面响应 400ms 是不是有点长了

cyrbuzz

2021-06-23 10:32:26 +08:00

在网络好的时候，页面响应要 400ms 是不是有些慢？

感觉还是先优化下这块吧，服务器端只是返回一个 HTML 需要 400ms 这问题有点大，只经过 Nginx 怎么会需要这么长时间，弱网下 400ms 还正常一些。另外 TCP 慢启动第一个 TCP 包大小是 14kb，可以想想办法优化到 14kb...

skyrem

2021-06-23 13:06:40 +08:00

@chezs66 #20
@genesischou #22
小程序就不考虑了，pwa 这个之前没听过，我去研究下

skyrem

2021-06-23 13:08:23 +08:00

@IvanLi127 #13
具体的现场我没去过，是业务人员反映的
主要是想看看还有什么地方可以改进的

skyrem

2021-06-23 13:10:51 +08:00

@3dwelcome #14
@cest #18
我查了下 http3 和 quic 需要在浏览器端开启支持，这个对于使用老旧手机的用户而言不太现实
这个 mmtls 是微信浏览器默认支持的吗？

skyrem

2021-06-23 13:12:35 +08:00

@coderfuns #23
@cyrbuzz #24
是的，服务器端还有优化的余地，主要公司一开始用了个很旧的框架，这个要改起来很麻烦

skyrem

2021-06-23 13:27:25 +08:00

@cyrbuzz #24
慢启动这个概念我也没听过，意思是 14kb 以内可以极大的减少 RTT ？

cyrbuzz

2021-06-23 13:46:50 +08:00

@skyrem

可以看下 MDN 上的说明：

https://developer.mozilla.org/zh-CN/docs/Web/Performance/How_browsers_work#tcp_%E6%85%A2%E5%BC%80%E5%A7%8B_14kb_%E8%A7%84%E5%88%99

ishalla

2021-06-23 14:06:56 +08:00

啊这个问题我也遇到了，不过我不是写代码的，而是做架构的，老板让我们想办法，CDN 都换过好几家，后来我就观察了一些别的号，发现其实可能也不是我们自己的页面慢，而是别家打开弹窗跳券。。
跳出来一个优惠券，用户有的会点有的不会点，但自然感觉不到页面加载慢了。。

ccraohng

2021-06-23 22:12:39 +08:00

全站加速。
就一个键盘，尽量不要用库。
图片用 secset 用 webp 。
加快后端响应

towry

2021-06-23 23:52:25 +08:00

打开控制台看下 network 的 timeline 是哪些部分请求太慢。