了解低带宽和高延迟

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

越来越多的人通过移动设备来体验网站。即使是在家里, 许多用户也都舍弃固定宽带而使用移动网络

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

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

借助 Chrome 开发者工具,您可以使用“Network”面板中的预设或自定义设置,以多种上传/下载速度和往返时间测试网站。如需了解基本知识,请参阅“分析网络性能”功能使用入门

Chrome DevTools 节流

系统工具

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

Mac Network Link Conditioner 控制面板

Mac Network Link Conditioner 设置

Mac Network Link Conditioner 自定义设置

设备模拟

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

Android 模拟器

Android 模拟器设置

对于 iPhone,Network Link Conditioner 可用于模拟欠佳的网络状况(参见上文)。

使用不同位置和网络进行测试

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

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

WebPagetest 设置

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

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

Fiddler 代理

在连接不佳的网络状态下测试

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

Facebook 的增强型流量控制 (ATC) 是以 BSD 许可证发布的一套应用,可用于控制流量和模拟连接不良的网络状况:

Facebook 的增强型流量控制

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

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

Charles 代理带宽和延迟设置

如需详细了解 Charles,请访问 codewithchris.com

处理不可靠的连接和“lie-fi”

什么是 lie-fi?

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

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

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

显示舍弃固定宽带而转为使用移动网络(尤其是低收入家庭)的美国人口普查数据图

使用超时来处理时断时续的连接

过去,使用 XHR 的笨方法用于测试时断时续的网络连接,但是服务工作线程采用更可靠的方法来设置网络超时。只需几行代码,即可使用 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 的更多详情。

反馈