了解低带宽和高延迟

作者：Sam Dutton

很重要的一点是，您需要了解应用或网站在连接不佳或不可靠时的使用情况，并相应地进行构建。有一些工具可以帮助您。

在低带宽和高延迟环境中测试

在这样的趋势中，您需要理解您的应用或网站在连接不佳或不可靠的状况下表现如何。有很多软件工具可以帮助您模拟或仿真低带宽和高延迟。

在建立或更新网站时，您必须确保在不同连接条件下提供足够性能。多种工具可以帮助您。

Chrome DevTools让您能使用 Chrome DevTools Network 面板的预设或自定义设置，以多种上传/下载速度和往返时间测试网站：

如果您安装了适用于 Xcode 的硬件 IO 工具，Mac 上即会提供一个名为 Network Link Conditioner 首选面板。

Android Emulator允许您模拟在 Android 设备上运行应用（包括网络浏览器和混合式网络应用）时可能遇到的各种网络状况：

对于 iPhone，Network Link Conditioner 可用于模拟欠佳的网络状况（参见上文）。

连接性能依服务器位置和网络类型而定。

WebPagetest是一种在线服务，让您的网站能以各种网络和主机位置运行性能测试。例如，您可以通过 2G 网络从位于印度的服务器或通过网络电缆从位于美国的服务器测试您的网站。

选择一个位置，然后从高级设置中选择连接类型。您甚至可以使用脚本（例如，登录到某个网站）或通过使用其RESTful API实现自动化测试。这可以帮助您在构建流程中纳入连接测试或性能记录。

Fiddler支持通过GeoEdge进行全局代理，并且可以使用其自定义规则来模拟调制解调器的速度。

利用软件和硬件代理，您可以模拟有问题的移动网络状况，例如带宽限制、封包延迟和随机丢包。利用共享代理或欠佳网络，开发团队可以将网络实战测试纳入工作流程。

Facebook 的Augmented Traffic Control(ATC) 是以 BSD 许可证发布的一套应用，可用于控制流量和模拟连接不良的网络状况：

Facebook 甚至推出2G Tuesdays项目来帮助了解 2G 网络用户的产品体验。在周二，员工会收到一个弹出提示，让他们选择模拟 2G 连接。

CharlesHTTP/HTTPS 代理可用来调节带宽和延迟。Charles 是商业软件，但提供有免费试用版。

有关 Charles 的更多信息，请参见codewithchris.com。

lie-fi一词至少可追溯到 2008 年（那时候手机看起来像这样），是指看似连接而实际未连接的情况。浏览器看似已连接上网络，但由于某种原因，实际并未连接。

像这种虚假连接会导致糟糕的体验，因为浏览器（或 JavaScript）会持续不断地尝试检索资源，而不是放弃并选择有效的备用连接。实际上，Lie-fi 比离线更糟，因为如果确实离线的话，至少 JavaScript 可以采取相应的规避措施。

现在，越来越多的人舍弃固定宽带而转为使用移动网络，因此，Lie-fi 问题也越来越严峻。最新的美国人口普查数据显示，越来越多的人舍弃固定宽带而转为使用移动网络。下图是 2015 年和 2013 年在家使用移动互联网的数据比较：

过去，使用 XHR 的笨方法用于测试时断时续的网络连接，但是服务工作线程采用更可靠的方法来设置网络超时。Jeff Posnick 在其通过服务工作线程实现瞬时加载演讲中，解释了如何使用sw-toolbox超时来实现这一目的：

toolbox.router.get(
  '/path/to/image',
  toolbox.networkFirst,
  {networkTimeoutSeconds: 3}
);

此外，超时选项也即将在Fetch API中实现 - 而且Streams API会通过优化内容交付和避免庞大的请求来提供帮助。Jake Archibald 在超负荷页面加载中给出了有关如何解决 lie-fi 的更多详情。