如何为用户体验模拟慢速互联网连接？
How to simulate a slow internet connection for the user experience?
我想知道是否可以根据用户的选择在访问网站时限制用户的互联网速度。这是小规模测试用户对不同互联网速度的反应所必需的。我的解决方法是让用户在 chrome 开发工具中手动限制速度，但我更愿意将其作为最后一个选项。任何实现这一目标或类似目标的选择都将是惊人的。谢谢。
编辑：澄清一下，我希望在网站本身内编写节流功能代码，这样用户就不必安装某些东西或手动设置 Chrome 开发工具，正如我所知道的那样已有解决方案。
除了 Chrome 开发工具方式之外，不完全确定您想要什么体验，但这里有一个替代方案。
clumsy makes your network condition on Windows significantly worse, but in a managed and interactive manner
出于安全原因，您想要做的事情并不容易实现。 Chrome（和大多数其他浏览器）阻止从 js 脚本访问 DevTools。用户必须手动和交互地按下 DevTools 上的按钮来更改 chrome 选项卡的网络速度。
代表您，您应该让 UX 测试人员使用 DevTools。
话虽这么说，但还是有解决方案的。但它们可能很复杂！
JS 中的解决方案：
脏修复：
创建循环数据下载脚本，对客户端执行 DOS 攻击。
基本上是这样的：
let delay = 100*(Math.random() +0.5);
setInterval(/*downloadStuff*/, delay);
此修复的问题：
- 这会在客户端造成真正的网络拥塞，这可能不是最佳选择。
- 由于 CPU 使用导致网页延迟。
更好但耗时的修复：
您可以通过执行以下操作来模拟慢速网络环境：
- 定期请求.abort() some ajax and xhr requests. See here and here. And yes, you have to keep references to the remote calls. (Some inspirational code by bruth)
- 通过更改
src 属性几秒钟来随机阻止某些图像加载。参见 here。
还有……还有更多。
Iframe 很棘手，因为它们可能来自另一个域。 Chrome不支持跨域请求。要模拟慢速网络，您必须偶尔停止 iframe 并使用 src 属性刷新它，就像图像一样。您可以使用 window.frames[].stop() 来模拟 frozen/stopped iframe。
视频有时会加载 iframe，这又很难模拟网络延迟。与图像不同，重新加载视频会重置播放时间。 AFAIK，没有办法轻松模拟视频延迟（不对视频播放逻辑进行重大更改）。
还有...如果您真的喜欢它。继续并覆盖不同的事件，例如来自 GlobalEventHandlers.
的事件
除了js之外的许多解决方案
- 使用 Chrome DevTools（如上所述最简单）
- 如果站点连接到您拥有的服务器。在响应之前添加延迟以模拟服务器拥塞。
- Use/create一个Chrome改变网络速度的扩展
- 创建您自己的可以运行 站点的浏览器，并相应地更改网络速度
- 安装软件以控制 OS
上的网络设置
- 更改路由器的网络速度
我想知道是否可以根据用户的选择在访问网站时限制用户的互联网速度。这是小规模测试用户对不同互联网速度的反应所必需的。我的解决方法是让用户在 chrome 开发工具中手动限制速度，但我更愿意将其作为最后一个选项。任何实现这一目标或类似目标的选择都将是惊人的。谢谢。
编辑：澄清一下，我希望在网站本身内编写节流功能代码，这样用户就不必安装某些东西或手动设置 Chrome 开发工具，正如我所知道的那样已有解决方案。
除了 Chrome 开发工具方式之外，不完全确定您想要什么体验，但这里有一个替代方案。
clumsy makes your network condition on Windows significantly worse, but in a managed and interactive manner
出于安全原因，您想要做的事情并不容易实现。 Chrome（和大多数其他浏览器）阻止从 js 脚本访问 DevTools。用户必须手动和交互地按下 DevTools 上的按钮来更改 chrome 选项卡的网络速度。
代表您，您应该让 UX 测试人员使用 DevTools。
话虽这么说，但还是有解决方案的。但它们可能很复杂！
JS 中的解决方案：
脏修复：
创建循环数据下载脚本，对客户端执行 DOS 攻击。 基本上是这样的：
let delay = 100*(Math.random() +0.5);
setInterval(/*downloadStuff*/, delay);
此修复的问题：
- 这会在客户端造成真正的网络拥塞，这可能不是最佳选择。
- 由于 CPU 使用导致网页延迟。
更好但耗时的修复：
您可以通过执行以下操作来模拟慢速网络环境：
- 定期请求.abort() some ajax and xhr requests. See here and here. And yes, you have to keep references to the remote calls. (Some inspirational code by bruth)
- 通过更改
src属性几秒钟来随机阻止某些图像加载。参见 here。
还有……还有更多。
Iframe 很棘手，因为它们可能来自另一个域。 Chrome不支持跨域请求。要模拟慢速网络，您必须偶尔停止 iframe 并使用
src属性刷新它，就像图像一样。您可以使用 window.frames[].stop() 来模拟 frozen/stopped iframe。视频有时会加载 iframe，这又很难模拟网络延迟。与图像不同，重新加载视频会重置播放时间。 AFAIK，没有办法轻松模拟视频延迟（不对视频播放逻辑进行重大更改）。
还有...如果您真的喜欢它。继续并覆盖不同的事件，例如来自 GlobalEventHandlers.
的事件
除了js之外的许多解决方案
- 使用 Chrome DevTools（如上所述最简单）
- 如果站点连接到您拥有的服务器。在响应之前添加延迟以模拟服务器拥塞。
- Use/create一个Chrome改变网络速度的扩展
- 创建您自己的可以运行 站点的浏览器，并相应地更改网络速度
- 安装软件以控制 OS 上的网络设置
- 更改路由器的网络速度