了解低带宽和高延迟

请务必了解在连接不佳或不可靠时使用您的应用或网站的体验,并相应地进行构建。有一些工具可以帮助您。

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

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

在这种情况下,您必须理解您的应用或网站在连接不佳或不可靠时的体验。一系列软件工具可帮助您模拟和模拟低带宽和高延迟

模拟网络节流

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

浏览器工具

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

Chrome 开发者工具节流

系统工具

如果您安装了适用于 Xcode 的硬件 IO 工具,则 Mac 上会提供 Network Link Conditioner 偏好设置面板:

Mac Network Link Conditioner 控制台

Mac Network Link Conditioner 设置

Mac Network Link Conditioner 自定义设置

设备模拟

借助 Android 模拟器,您可以在 Android 上运行应用(包括网络浏览器和混合 Web 应用)时模拟各种网络条件:

Android 模拟器

Android 模拟器设置

对于 iPhone,Network Link Conditioner 可用于模拟出现故障的网络状况(参见上文)。

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

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

WebPagetest 是一种在线服务,支持使用各种网络和主机位置为您的网站运行一组性能测试。例如,您可以通过位于印度的服务器通过 2G 网络试用您的网站,或者通过位于美国某个城市的电缆来试用您的网站。

WebPagetest 设置

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

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

Fiddler 代理

在发生故障的网络上进行测试

借助软件和硬件代理,您可以模拟有问题的移动网络状况,例如带宽限制、数据包延迟和随机丢包。共享代理或受损网络可让开发团队将实际网络测试整合到其工作流中。

Facebook 的 Augmented Traffic Control (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 年相比,2015 年在家使用移动互联网的情况:

美国人口普查数据图表,显示了从固定宽带改用移动网络的趋势,尤其是低收入家庭

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

过去,使用 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 在 Supercharging page load(页面加载大提速)中提供了有关如何解决 lie-fi 问题的更多详情。

反馈