有没有办法从 JavaScript 模拟网络条件？

Question

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

Answer 1

根据您的用例，您也可以

1. 安装一个监听“fetch”事件的服务工作者，然后延迟调用event.respondWith（需要HTTPS）；
2. 在应用程序范围内拦截对 fetch / XMLHttpRequest 的调用以执行相同的操作（覆盖 window.fetch 和/或 window.XMLHttpRequest） - 请注意，这不会影响直接从 HTML 加载的图像/资源；
3. 设置 HTTP cookie 或标头并在响应之前使您的服务器/延迟（但是很多用户这样做可能会降低服务器并发性）

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

对于实际的流媒体行为本身，我会考虑使用 RxJs 管道之类的东西，这样您就可以轻松引入延迟、任意停止等来模拟不同的网络条件。