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

前述

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

解决办法

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

网络不给力

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

加载超时（情况一）

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

对此的解决办法有两种：

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

加载出错（情况二）

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

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

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

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

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

还是加载出错（情况三）

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

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

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

实际这个问题有两种处理方式：