性能文章>了解低带宽和高延迟>

了解低带宽和高延迟转载

2月前
204701

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

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

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

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

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

Chrome DevTools 节流

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

Mac Network Link Conditioner 控制面板

Mac Network Link Conditioner 设置

Mac Network Link Conditioner 自定义设置

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

Android Emulator

Android Emulator 设置

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

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

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

WebPagetest 设置

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

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

Fiddler 代理

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

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

Facebook 的 Augmented Traffic Control

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

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

Charles 代理带宽和延迟设置

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

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

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

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

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

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

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

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

分类:
标签:
请先登录,再评论

暂无回复,快来写下第一个回复吧~

为你推荐

一次 Node.js http 连接无法复用的问题排查
一次压测中阿里云 SLB 的并发连接数被打满了,导致服务之间的 HTTP 调用延迟很大。当时 SLB 的并发连接数情况如下图所示。登录容器终端查看,发现某个前端 Node.js 服务中的单个容器的 E
webpack5优化实战
本文围绕webpack优化进行讲述,其中也会作某些原理性地解释,尽量做到让大家知道为什么这么做,以及这么做的结果是什么。
前端性能基础:健康网站的关键指标有哪些?
概览 #Web 指标是 Google 开创的一项新计划,旨在为网络质量信号提供统一指导,这些信号对于提供出色的网络用户体验至关重要。多年来,Google 提供了许多性能测量和性能报告工具。一些开发者对这些工具的使用十分在行,而另一些开发者则发现大量的工具和指标令人应接不暇。网站所有者要想了解他
Lighthouse 如何计算网站的整体性能得分?
从为什么分数会波动,它是如何组成的,以及 Lighthouse 如何对每个单独的指标进行评分三部分来介绍lighthouse。
核心web指标对业务的影响
您是否正在努力说服您的利益相关者采用核心 Web 指标? 或者您想知道它是否真的对您的业务有帮助? 本文将通过探索已经对其用户和业务产生积极影响的公司示例,帮助您了解核心 Web 指标如何与关键业务指标相关联。为什么核心 Web 指标对您的用户和业务很重要?组织中的不同利益相关者可以有不同的优先
了解低带宽和高延迟
很重要的一点是,您需要了解应用或网站在连接不佳或不可靠时的使用情况,并相应地进行构建。有一些工具可以帮助您。在低带宽和高延迟环境中测试越来越多的人通过移动设备来体验网站。即使是在家里,有许多用户也都舍弃固定宽带而使用移动网络。在这样的趋势中,您需要理解您的应用或网站在连接不佳或不可靠的状况下表