请务必了解在连接状况不佳或不可靠时使用您的应用或网站是什么感觉,并据此进行构建。一系列工具可以为您提供帮助。
在低带宽和高延迟条件下进行测试
越来越多的人通过移动设备访问网络。即使在家中, 许多人也放弃了固定宽带,转而使用移动网络。
在这种情况下,请务必了解在连接状况不佳或不可靠时使用您的应用或网站是什么感觉。一系列软件工具可以帮助您模拟低带宽和高延迟时间。
模拟网络节流
在构建或更新网站时,您必须确保在各种连接条件下都能提供足够的性能。有多种工具可以提供帮助。
浏览器工具
Chrome 开发者工具可让您使用“网络”面板中的预设或自定义设置,以各种上传/下载速度和往返时间测试您的网站。请参阅开始使用“分析网络性能”,了解基础知识。

系统工具
Network Link Conditioner 是 Mac 上的一个偏好设置面板,如果您为 Xcode 安装了硬件 IO 工具,则可以使用该面板:



设备模拟
Android 模拟器可让您在 Android 上运行应用(包括网络浏览器和混合 Web 应用)时模拟各种网络状况:


对于 iPhone,可以使用 Network Link Conditioner 来模拟网络状况不佳的情况(见上文)。
从不同的位置和网络进行测试
连接性能取决于服务器位置以及网络类型。
WebPagetest 是一项在线服务,可让您使用各种网络和主机位置对网站运行一组性能测试。例如,您可以从印度的一台服务器上通过 2G 网络试用您的网站,也可以从美国的一个城市通过有线网络试用您的网站。

选择一个位置,然后从高级设置中选择一种连接类型。您甚至可以使用脚本(例如,登录网站)或使用其 RESTful API 自动执行测试。这有助于您将连接测试纳入构建流程或性能日志记录。
Fiddler 支持通过 GeoEdge 进行全球代理,其自定义规则可用于模拟调制解调器速度:

在受损网络上进行测试
借助软件和硬件代理,您可以模拟有问题的移动网络状况,例如带宽限制、数据包延迟和随机丢包。 共享代理或受损网络可让开发者团队将真实网络测试纳入其工作流。
Facebook 的增强型流量控制 (ATC) 是一组获得 BSD 许可的应用,可用于调整流量和模拟受损的网络条件:

Facebook 甚至设立了 2G 星期二,以帮助了解 2G 用户如何使用其产品。在周二,员工会看到一个弹出式窗口,其中提供了模拟 2G 连接的选项。
Charles HTTP/HTTPS 代理可用于调整带宽和延迟时间。Charles 是一款商业软件,但提供免费试用。

如需详细了解 Charles,请访问 codewithchris.com。
处理不稳定的连接和“假 Wi-Fi”
什么是 lie-fi?
lie-fi 一词至少可以追溯到 2008 年(当时手机看起来像这样),指的是与表面不符的连接。无论出于何种原因,当浏览器没有连接时,其行为就像有连接一样。
误判连接性可能会导致糟糕的用户体验,因为浏览器(或 JavaScript)会坚持尝试检索资源,而不是放弃并选择合理的后备方案。Lie-fi 实际上可能比离线更糟糕;至少如果设备肯定处于离线状态,您的 JavaScript 可以采取适当的规避措施。
随着越来越多的人从固定宽带转向移动网络,Lie-fi 可能会成为一个更大的问题。最近的美国人口普查数据显示,固定宽带的使用率正在下降。 下图显示了 2015 年与 2013 年相比,在家中使用移动网络的情况:

利用超时来应对间歇性连接问题
过去,使用 XHR 的黑客方法已用于测试间歇性连接性,但 Service Worker 提供了更可靠的方法来设置网络超时。只需几行代码,即可使用 Workbox 实现此目的:
workboxSW.router.registerRoute(
'/path/to/image',
workboxSW.strategies.networkFirst({networkTimeoutSeconds: 3}),
);
您可以在 Jeff Posnick 的 Chrome 开发者峰会演讲 Workbox:灵活的 PWA 库中详细了解 Workbox。
Fetch API 的超时功能也正在开发中,Streams API 应该有助于优化内容传送并避免单体式请求。Jake Archibald 在超快网页加载中提供了有关解决 lie-fi 问题的更多详细信息。