DCloud_UNI_GSQ
DCloud_UNI_GSQ
  • 发布:2020-03-16 16:22
  • 更新:2024-01-26 14:27
  • 阅读:24246

uni-app H5端 “网络不给力” 排查日记

分类:uni-app

前述

用户访问时莫名奇妙的出现“网络不给力”(连接服务器超时)的提示,可是此时用工具测试网络速度明明很给力。开发人员排查时却无法复现问题,于是开始认为是框架有问题。
作为框架的维护人员经过排查并未发现框架有相关问题,联系多位开发人员协助排查,终于总结出如下结论:

解决办法

太长不看版:使用 CDN、https 。

网络不给力

用户出现问题的时候,开发人员首先怀疑的就是这个内置的“网络不给力”错误页面,开始想办法去掉这个错误提示页面。
首先就要说一下为什么 SPA(单页应用) 都必须有这个页面,普通的 MPA(多页应用)其页面跳转(从一个html跳转到另外一个html)是浏览器负责的,页面加载失败的时候会显示浏览器的失败提示,而 SPA 是使用 ajax 异步加载页面,所以需要自己来判断页面是否加载成功,以及在加载失败的时候显示提示。如果去掉这个提示页面,仅仅是相当于掩耳盗铃,并不能解决问题。

加载超时(情况一)

之前框架默认的加载超时时间是3秒(后续才增大了默认超时时间),是相信运维人员都了解CDN的,一般的商业项目部署 H5 离不开 CDN ,一方面是为了用户体验,一方面是为了运营成本。
经过排查大部分页面加载慢导致超时的用户,都有一个特点,将资源直接部署在了自己服务器供用户访问。
服务端如果采用5兆带宽,同时10个用户访问的情况下,平均每个用户分得0.5兆,其下载速度约为0.06兆每秒,加载0.3兆的文件需要5秒,远超了默认的超时时间,而且这只是理论计算,实际带宽的分配并非均匀,有的用户分得的更小,加载的时间更长。另外服务器机房和网络线路固定,不同地区和网络运营商的用户访问体验不一致。

对此的解决办法有两种:

  1. 配置页面加载超时时间(新版的HBuilderX已经增大了默认超时时间):相关文档,优点:方便快捷,只需修改配置重新发布即可;缺点:并不能真正改善用户体验,使用服务器硬扛流量还可能会给服务器上的其他业务带来影响。
  2. 使用 CDN ,优点:相比增加服务器带宽成本更低,体验更好。

加载出错(情况二)

即使增加了页面的超时时间,仍然有部分用户访问页面时(使用http)出现错误提示,而且并未达到配置的超时时间(有的是切换页面瞬间出现),甚至刷新页面仍然无济于事。开发者调试的时候却始终无法复现。
以下是开发者让用户协助调试提供的截图(开发者未使用CDN为了避免各位访问测试造成压力,对域名进行了打码):

从图中可以看出加载此页面的js文件报错了,此时让用户直接访问这个报错的js文件地址,出现如下内容:

开发者一眼就看出js文件的内容不对,并不是页面真正的js文件,应该是遇到了网络劫持。网上搜索内容中出现的域名,发现中招的人不少:

一般办公使用的商用网络很少有劫持问题,而民用的网络层层转包不免有流氓运营商从中作梗,所以用户会出现问题,而开发者难以复现。

针对此问题,简易便捷解决办法就是升级为 https。

还是加载出错(情况三)

有开发者已经升级到了https,已经解决了网络劫持的问题,但是过了一段时间更新后,仍然有部分用户出现了“网络不给力”的问题。调试发现报错的js文件的文件名和线上的文件名不一致(主要是hash部分不同),是旧版本的文件名。说明html使用了旧版的缓存,请求的页面js文件是旧的,这个问题一般出现在微信内置浏览器中。

百度一下,发现类似的问题很多:百度:微信html缓存

搜到的处理方法基本是修改html的响应头,禁用html的缓存(不必禁用js、css等资源的缓存)。

实际这个问题有两种处理方式:
1. 禁用html缓存,让用户访问到新版
2. 每次更新时不删除旧的js、css资源,让使用旧版的用户也能继续访问

已使用CDN的用户一般未发现这个问题,因为CDN缓存了旧版的文件,即使服务器上已经删除了,CDN仍然能访问到。

结语

至此 “网络不给力” 问题排查告一段落,结论就是 CDN 和 https ,感谢一直配合调查测试的开发者,如果还有谁遇到此外的情况,请私信或者留言联系,官方会协助排查。

13 关注 分享
yorick ahhhhhhh 1***@qq.com 沧笙踏歌 头大鸭 2***@qq.com rysnone 2***@qq.com launcher 天爱天 鸡排饭加个蛋 雨夜敬清秋 DCloud_UNI_HRK

要回复文章请先登录注册

栉风

栉风

回复 栉风 :
uni-h5.es.js:7052:25见上面
2024-01-26 14:27
栉风

栉风

function useResizeSensorUpdate(rootRef, emit2, reset) {
const size = reactive({
width: -1,
height: -1
});
watch(() => extend({}, size), (value) => emit2("resize", value));
return () => {
const rootEl = rootRef.value;
size.width = rootEl.offsetWidth;
size.height = rootEl.offsetHeight;
reset();
};
}
2024-01-26 14:27
栉风

栉风

on-error TypeError: Cannot read properties of null (reading 'offsetWidth')
at uni-h5.es.js:7052:25
at callWithErrorHandling (vue.runtime.esm.js:1375:22)
at callWithAsyncErrorHandling (vue.runtime.esm.js:1384:21)
at HTMLDivElement.invoker (vue.runtime.esm.js:9729:9) object {}
2024-01-26 14:27
栉风

栉风

这个报错是什么原因呢:TypeError: null is not an object (evaluating \'t.offsetWidth\')
2024-01-23 15:20
栉风

栉风

总是有用户通过微信公众号访问页面的时候直接白屏,页面不显示任何内容
2024-01-23 15:20
2***@qq.com

2***@qq.com

我们有各项目也出现了问题二的问题、一直提示‘xxx.js<script>加载失败’,最后排查发现是腾讯云那边的缓存没清,给大家一个参考吧!
2023-08-14 16:00
guyskk

guyskk

iOS低版本上遇到同样的问题,但按理说应该兼容才对。发现是在部分14.x之前的iOS机型上,不兼容箭头函数的写法导致,参考 https://juejin.cn/post/7110841616700538911 。构建好的文件里有很多用了 `=>` 箭头函数的写法,请问如何配置解决这个兼容问题?

```
SyntaxError: Unexpected token '='. Expected an opening '(' before a method's parameter list. @ (https://xxx.com/static/js/443.fc281bb9.js:1:0)

Error.message: Unexpected token '='. Expected an opening '(' before a method's parameter list. \n Error.stack: undefined
```

兼容性配置:
```
"browserslist": [
"Android >= 4.4",
"ios >= 9"
]
```
2023-06-15 23:23
guyskk

guyskk

iOS低版本上遇到同样的问题,但按理说应该兼容才对。发现是在部分14.x之前的iOS机型上,不兼容箭头函数的写法导致,参考 https://juejin.cn/post/7110841616700538911 。构建好的文件里有很多用了 `=>` 箭头函数的写法,请问如何配置解决这个兼容问题?

```
SyntaxError: Unexpected token '='. Expected an opening '(' before a method's parameter list. @ (https://xxx.com/static/js/443.fc281bb9.js:1:0)

Error.message: Unexpected token '='. Expected an opening '(' before a method's parameter list. \n Error.stack: undefined
```

兼容性配置:
```
"browserslist": [
"Android >= 4.4",
"ios >= 9"
]
```
2023-06-15 23:23
DCloud_UNI_GSQ

DCloud_UNI_GSQ (作者)

回复 uni_chen :
通过调试或者抓包看一下网络请求响应是否有异常
2023-03-15 21:03
uni_chen

uni_chen

请问第一次跳转微信H5支付出现“连接服务器超时,点击屏幕重试”,后续跳转都不会,这是什么原因导致的?已经换了https和cdn了
2023-03-13 11:33