了解低带宽和高延迟

了解在连接不良或不可靠的情况下使用您的应用或网站的感受非常重要,并据此进行构建。一系列工具可以帮助您。

使用低带宽和高延迟进行测试

越来越多的人在移动设备上体验网络。 比例不断增加 即使在家中, 许多人也正在放弃固定宽带而转向移动网络

在这种情况下,了解在连接不良或不可靠的情况下使用您的应用或网站的感受非常重要。一系列软件工具可以帮助您 模拟 低带宽和高 延迟

模拟网络节流

在构建或更新网站时,您必须确保在各种连接条件下都有足够的性能。一些工具可以提供帮助。

浏览器工具

Chrome DevTools 使您可以使用预设或来自“网络”面板的自定义设置,以各种上传/下载速度和 往返时间 测试您的网站。请参阅 网络性能分析入门 以了解基本知识。

Chrome DevTools throttling

系统工具

如果您为 Xcode 安装了 硬件 IO 工具,则 Network Link Conditioner 是 Mac 上提供的首选项面板

Mac Network Link Conditioner control panel

Mac Network Link Conditioner settings

Mac Network Link Conditioner custom settings

设备模拟

Android 模拟器 允许您在 Android 上运行应用(包括 Web 浏览器和混合 Web 应用)时模拟各种网络条件

Android Emulator

Android Emulator settings

对于 iPhone,可以使用 Network Link Conditioner 来模拟受损的网络条件(见上文)。

从不同的位置和网络进行测试

连接性能取决于服务器位置以及网络类型。

WebPagetest 是一项在线服务,使您可以使用各种网络和主机位置为您的网站运行一组性能测试。例如,您可以尝试从印度的服务器在 2G 网络上或通过美国城市的有线网络访问您的网站。

WebPagetest settings

选择一个位置,然后从高级设置中选择连接类型。您甚至可以使用 脚本(例如,登录网站)或使用他们的 RESTful API 来自动化测试。这有助于您将连接测试纳入构建流程或性能日志记录中。

Fiddler 通过 GeoEdge 支持全局代理,其自定义规则可用于模拟调制解调器速度

Fiddler proxy

在受损网络上进行测试

软件和硬件代理使您能够模拟有问题的移动网络条件,例如带宽节流、数据包延迟和随机数据包丢失。共享代理或受损网络可以使开发人员团队在其工作流程中纳入真实世界的网络测试。

Facebook 的 增强型流量控制 (ATC) 是一组 BSD 许可的应用程序,可用于塑造流量和模拟受损的网络条件

Facebook's Augmented Traffic Control

Facebook 甚至设立了 2G 星期二,以帮助了解 2G 用户如何使用他们的产品。在星期二,员工会收到一个弹出窗口,让他们可以选择模拟 2G 连接。

Charles HTTP/HTTPS 代理可用于 调整带宽和延迟。Charles 是商业软件,但提供免费试用版。

Charles proxy bandwidth and latency settings

有关 Charles 的更多信息,请访问 codewithchris.com

处理不可靠的连接和“假 Wi-Fi”

什么是假 Wi-Fi?

术语 假 Wi-Fi 至少可以追溯到 2008 年(当时的手机看起来像 这样),指的是连接性与表面不符的情况。您的浏览器表现得好像它有连接,但由于某种原因,它实际上没有。

误解的连接性可能会导致糟糕的体验,因为浏览器(或 JavaScript)坚持尝试检索资源,而不是放弃并选择合理的后备方案。假 Wi-Fi 实际上可能比离线更糟糕;至少如果设备肯定是离线的,您的 JavaScript 可以采取适当的回避措施。

随着越来越多的人转向移动网络并远离固定宽带,假 Wi-Fi 可能会成为一个更大的问题。最新的 美国人口普查数据 显示了 远离固定宽带的趋势。下图显示了 2015 年与 2013 年相比,家庭移动互联网的使用情况

Chart from US census data
showing the move to mobile away from fixed broadband, particularly in lower-income households

使用超时来处理间歇性连接

过去,使用 XHR 的 hack 方法 已被用于测试间歇性连接,但 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 在 Supercharging page load 中详细介绍了如何解决假 Wi-Fi 问题。

反馈