有没有办法从 JavaScript 模拟网络状况？

Question

在 Firefox 的开发者工具中，可以选择模拟某些类型的移动数据连接等条件。有没有办法从 JavaScript 激活它，而不需要用户打开开发者控制台？

Answer 1

根据您的用例，您可以

1. 安装一个监听“fetch”事件的 service worker，然后延迟调用 event.respondWith（需要 HTTPS）；
2. 在应用程序范围内拦截对 fetch / XMLHttpRequest 的调用以做同样的事情（覆盖 window.fetch and/or window.XMLHttpRequest）——注意这不会影响加载的图像/资源直接来自 HTML;
3. 设置 HTTP cookie 或 header 并在响应之前让您的服务器/延迟（很多用户这样做可能会降低服务器并发性）

请注意，如果您想使用流式资源（例如渐进式 JPEG，HTML）模拟这种行为，最好的选择是服务工作者路由，您可以在其中构建一个 ReadableStream 直接（请参阅此处获取一些灵感：https://developers.google.com/web/updates/2016/06/sw-readablestreams）。

对于实际的流媒体行为本身，我会考虑使用类似 RxJs 管道的东西，这将使您很容易引入延迟、任意停止等来模拟不同的网络条件。