如何为用户体验模拟慢速互联网连接？答案

【问题标题】：How to simulate a slow internet connection for the user experience?如何为用户体验模拟慢速互联网连接？
【发布时间】：2020-11-05 02:11:21
【问题描述】：

我想知道在访问网站时是否可以根据用户的选择来限制用户的互联网速度。这是对用户如何对不同的互联网速度做出反应的小规模测试所必需的。我的解决方法是让用户手动限制 chrome 开发工具中的速度，但我更愿意将其作为最后一个选项。实现这一目标或类似目标的任何选择都将是惊人的。谢谢。

编辑：为了澄清一下，我希望在网站本身内编写节流功能代码，这样用户就不必手动安装或设置 Chrome 开发工具，因为我已经知道这些解决方案。

【问题讨论】：

【解决方案1】：

由于安全原因，您想做的事情并不容易。 Chrome（和大多数其他浏览器）阻止从 js 脚本访问 DevTools。用户必须手动交互地按下 DevTools 上的按钮来更改 chrome 选项卡的网络速度。

您应该代表您让 UX 测试人员使用 DevTools。

话虽如此，有解决方案。但它们可能很复杂！

JS 中的解决方案：

创建对客户端执行 DOS 攻击的循环数据下载器脚本。基本上是这样的：

let delay = 100*(Math.random() +0.5);
setInterval(/*downloadStuff*/, delay);

此修复的问题：

您可以通过执行以下操作来模拟慢速网络环境：

定期做 request.abort() 一些 ajax 和 xhr 请求。请参阅 here 和 here。是的，您必须保留对远程调用的引用。（Some inspirational code bruth）
通过更改它们的src 属性几秒钟来随机阻止加载某些图像。见here。

而且……还有更多。

iframe 很棘手，因为它们可能来自另一个域。 Chrome 不支持跨域请求。要模拟慢速网络，您必须不时停止 iframe 并使用 src 属性刷新它，就像图像一样。您可以使用 window.frames[].stop() 来模拟冻结/停止的 iframe。
视频有时会加载 iframe，这又很难模拟网络延迟。与图像不同，重新加载视频将重置播放时间。 AFAIK，没有办法轻松模拟视频延迟（无需大量更改视频播放逻辑）。
而且...如果你真的喜欢它。继续并覆盖不同的事件，例如来自 GlobalEventHandlers 的事件。

【讨论】：

【解决方案2】：

除了 Chrome 开发工具方式之外，不完全确定您想要什么体验，但这里有另一种选择。

笨拙会使您在 Windows 上的网络状况明显变差，但以一种可管理和交互的方式

【讨论】：

clumsy 类似于 Chrome 开发工具，但我的问题更多是关于是否有办法通过在网站中编码来添加这种体验，这样用户就不必安装或手动在 chrome 开发工具中设置限制。谢谢。