ajax - 来自带有 AJAX 的页面的神秘隐藏 TCP 连接

标签 ajax http tcp

我正在观察这种奇怪的情况。我有一个页面,我想从中对本地服务器进行一些 AJAX 请求以进行测试。我注意到第一次请求时 TTFB 有很大的滞后,大约 10-15 秒。服务器几乎什么都不做,Curl 在 100 毫秒内得到响应。经过一点挖掘,我感觉浏览器启动了一些“隐藏”连接。为了证明这一点,我运行了 Wireshark,结果证明我的假设是正确的。但这只会变得更奇怪。

浏览器启动与服务器的裸 TCP 连接,不发送任何内容并在 10 秒后关闭它们。在网络选项卡的调试工具中看不到这些连接。最奇怪的部分是那些连接是在我触发 AJAX 请求之前启动的,实际上即使我没有在页面上做任何事情,连接也会启动,根本没有任何 AJAX。我似乎能够为任何服务器重现,这里是 JSFiddle以例子。在我打开或刷新此页面的那一刻,我的浏览器向服务器发出 TCP 连接:

enter image description here

这是来自 jsfiddle 的页面,

<button id='l'>list</button>

$('#l').click(function () {
    $.get(
        'http://63.245.215.53/test/'
    )
    .done(function (data) {});
});

我的机器,Mac OS 10.10.3,Chrome 版本 43.0.2357.130(64 位)

所以问题:

为什么浏览器会发起这样的连接?它们似乎没有被重用,当我实际发起 AJAX 请求时浏览器打开新的 TCP 连接。 浏览器如何知道要连接到哪个地址 IP 地址?显然浏览器出于某种原因记得我从页面请求了哪些服务器。

最佳答案

我找到了答案。 Chrome 会根据以前的经验启动所谓的推测或预测连接。有很好的解释here .

总结:

The second way that speculative connections emerge is based on "previous experience" visiting a site. For example, if you vistit www.cnn.com, you'll (today) see that you'll need to get about 48 resources (and/or connections) to i.cdn.turner.com. This list uses a smoothing heuristic, to attempt to remember how many other connections were needed in the past. Chromium can then make up to 6 connections speculatively to the subresource site (e.g., i.cdn.turner.com) when a connection is made to the containing resource (e.g., www.cnn.com).

因此 Chrome 会记住来自该页面的 AJAX 请求,并预测该页面可能会再次发送请求。有趣的是,如果我停止本地服务器并且 AJAX 请求结果出错,下次 Chrome 将不会打开预测连接。如果我再次启动服务器,只有在我刷新页面几次后,Chrome 才会开始打开预测连接,显然这样做是为了防止不可靠资源的浪费。

阻止 Chrome 创建此类连接的一种方法是使用此命令行键运行它:

--disable-preconnect

关于ajax - 来自带有 AJAX 的页面的神秘隐藏 TCP 连接,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31147636/

相关文章:

json - JSON 数据如何在 http 请求中发送?

c# - 如何以编程方式登录雅虎网站

android - 为什么我得到 Android : The target server failed to respond?

http - websocket 如何知道服务器已关闭?

java - 使用 Java 套接字发送文件,丢失数据

c# - 使用 C# 异步套接字读取面向行的数据

ajax - Grails 和 AJAX : remoteLink causes redirect, 未更新 div

javascript - 使用 jQuery 重置文本,存在 AJAX 调用

java - 如何在 Wicket 的 Ajax 响应中设置自定义 HTTP 响应 header ?

jquery - $(selector).load ('page.html #id' ) 与 $.get 和过滤/查找 #id