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

Question

我想知道是否可以根据用户的选择在访问网站时限制用户的互联网速度。这是小规模测试用户对不同互联网速度的 react 所必需的。我的解决方法是让用户在 chrome 开发工具中手动调节速度，但我更希望将其作为最后一个选项。实现这一目标或类似目标的任何选择都将是惊人的。谢谢你。
编辑:只是为了澄清我希望在网站本身内编写 throttle 功能，这样用户就不必手动安装某些东西或设置 Chrome 开发工具，因为我已经知道这些解决方案。

Answer 1

由于安全原因，您想要做的事情并不容易。 Chrome(和大多数其他浏览器)阻止从 js 脚本访问 DevTools。用户必须手动和交互地按下 DevTools 上的按钮来更改 chrome 选项卡的网络速度。
您应该代表您让 UX 测试人员使用 DevTools。
话虽如此，对此有解决方案。但它们可能很复杂!

JS中的解决方案:
脏修复:
创建对客户端执行 DOS 攻击的循环数据下载程序脚本。
基本上是这样的:

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

此修复程序的问题:

这会在客户端上造成真正的网络拥塞，这可能不是最佳的。

由于 CPU 使用率而导致网页延迟。

更好但耗时的修复:
您可以通过执行以下操作来模拟慢速网络环境:

定期做请求 .abort()一些 ajax 和 xhr 请求。见 here和 here .是的，您必须保留对远程调用的引用。 ( Some inspirational code 来自 bruth )

通过更改 src 随机阻止某些图像加载属性几秒钟。见 here .

而且……还有更多。

iframe 很棘手，因为它们可能来自另一个域。 Chrome 不支持跨域请求。要模拟慢速网络，您必须不时停止 iframe 并使用 src 刷新它。属性，就像图像一样。您可以使用 window.frames[].stop() 来模拟卡住/停止的 iframe。

视频有时会加载 iframe，这再次很难模拟网络延迟。与图像不同，重新加载视频将重置播放时间。 AFAIK，没有办法轻松模拟视频延迟(无需大量更改视频播放逻辑)。

而且......如果你真的喜欢它。继续并覆盖不同的事件，例如来自 GlobalEventHandlers 的事件。 .

除了js之外的许多解决方案

使用 Chrome DevTools(最简单的方法)

如果该站点连接到您拥有的服务器。在响应之前添加延迟以模拟服务器拥塞。

使用/创建更改网络速度的 Chrome 扩展程序

创建自己的可以运行站点的浏览器，并相应地更改网络速度

安装软件以控制操作系统上的网络设置

更改路由器上的网速