Javascript Google Chrome:HTTP访问本地主机，加载时间不一致

在我的Angular2项目中，我有一个通过HTTP加载JSON数据的组件，并将其作为网格显示在页面上。网格具有分页功能，每次请求新的网格页面时，组件都会执行新的HTTP GET。dev站点和webservice一样托管在localhost上，但它们使用不同的端口号

该组件工作时没有任何错误。然而，我注意到，在谷歌浏览器中，HTTP GET响应时间似乎没有明显的原因而上下波动。这只发生在Chrome中。在Firefox中没有任何问题

当我将站点部署到live时，Chrome或Firefox中没有任何问题，因此这个问题特定于Chrome+my dev environment/可能是localhost URL

以下是我在开发网站上的Google Chrome网络标签的屏幕截图：

如果查看时间列，您可以看到每个连续请求的时间在大约80ms到380ms之间波动。380ms几乎是5x长，因此，正如您预期的那样，每次响应较慢时，网格组件刷新都会明显延迟。同样，这只发生在Chrome中

深入挖掘，下面是一个缓慢HTTP GET的时间截图：

您可以从上面的示例中看到，webservice的响应时间约为75毫秒，但Chrome报告整个操作耗时377毫秒？！看看计时，我不知道377ms是从哪里来的，因为其他数字加起来显然不等于377ms。然而，从视觉计时条上看，在

DNS查找

和

初始连接

之间存在巨大的差距

下面是一个更快HTTP GET的屏幕截图：

从上面的计时可以看出，没有

DNS查找

或

初始连接

部分，就像前面的屏幕截图一样，这有点奇怪

有没有人对我如何在这里进行针指向和解决问题有任何建议

---

如果有任何帮助，我们将不胜感激：）

快速更新：我最终通过为我的开发站点使用不同的主机名解决了这个问题

我将

127.0.0.1测试站点

添加到我的主机文件中，然后将我的开发服务器URL更改为

http://testsite:3000

。我以前使用的是

http://localhost:3000

。在此之后，HTTP将全部删除到一致的80ms ish，并且在开发人员工具的“网络”选项卡中不再存在DNS查找问题

---

不完全确定源代码，但是使用

localhost

，因为主机在某个地方引起了问题。

我的建议是，您应该尝试一些方法。1） 如果出现同样的问题，请尝试Firefox 2）使用JSON get客户端，例如postman或甚至curl，并查看它是否是api服务器。当你的标题提到chrome时，我会假设你已经在chrome上试过了，但信息不足以确定这是浏览器问题还是代码问题。我已经试过Firefox了，正如我在问题中提到的。Firefox完全没有问题。我已经对.NET核心Web服务进行了基准测试，它每次大约在80毫秒内返回一个响应。我认为有相当多的证据表明浏览器问题或本地开发环境设置问题是Chrome不喜欢的。首先，我注意到你缓慢的HTTP Get屏幕截图在连接设置下有额外的DNS查找。你的快速Http获取不到的地方。我也检查了我的，没有dns查找。通常，chrome会有很长的暂停时间，但这不会显示在你缓慢的屏幕截图中。假设这是一个失速，你的TTFB时间和你的快车差不多。存在与您的类似的问题。感谢您的反馈。我通过使用与“localhost”不同的名称来修复它。我将

127.0.0.1测试站点

添加到我的主机文件中，然后将我的开发服务器url更改为

http//testsite:3000

。我真的不知道为什么会这样，但Chrome似乎对

localhost

的dns感到困惑。非常奇怪：）奇怪但有趣的问题。如果您使用的是linux，那么本地主机与主机文件中的

testsite

define几乎相同。不过，很高兴你能找到问题。也许你可以尝试的另一件事是，你可以清除chrome的dns缓存，chrome://net-internals/#dns. 查看是否有帮助。如果无法编辑主机文件（托管计算机等），运行也会解决此问题！今天chrome和edge也有同样的问题