如何使用javascript在瀏覽器中測試從用戶到服務器的延遲？

Question

我想使用我網站的訪問者收集一些信息。
我需要的是讓每個訪問者 ping 3 個不同的主機名，然后將以下信息保存到數據庫中。

Visitor IP, latency 1,latency 2, latency 3

當然，一切都必須對訪問者透明，而不能以任何方式打擾他。 這可能嗎？ 你可以給我一個例子嗎？ 是否有任何 jQuery 插件或使其更容易的東西

編輯

這是我到目前為止jsfiddle.net/dLVG6 所擁有的，但數據太隨機了。 它從 50 躍升至 190

Answer 1

這會比你想象的更痛苦。

您的第一個問題是 Javascript 沒有 ping。 Javascript 擅長的主要是 HTTP 和一些表親協議。

第二個問題是你不能只發出一些 ajax 請求並對結果進行計時（這太明顯了）。 同源策略將阻止您使用 ajax 與頁面來自的服務器以外的服務器通信。 您需要使用 JSONP，或更改圖像標簽的 src，或其他更間接的方法。

您的第三個問題是您不想做任何會導致返回大量數據的事情。 您不希望數據傳輸時間或大量服務器處理干擾測量延遲。

第四，您不能要求可能緩存的 URL。 如果對象碰巧在緩存中，您將獲得非常低的“延遲”測量值，但這沒有意義。

我的解決方案是使用沒有src屬性的圖像標簽。 在文檔加載時，將src設置為指向有效服務器但使用無效端口。 通常，服務器簡單地拒絕您的連接比生成正確的 404 錯誤響應更快。 您所要做的就是測量從圖像中獲取錯誤事件所需的時間。

來自小提琴：

var start = new Date().getTime();
$('#junkOne').attr('src', 'http://fate.holmes-cj.com:8886/').error(function () {
    var end = new Date().getTime();
    $('#timer').html("" + (end - start) + "ms");
});

這項技術可能會得到改進。 這里有一些想法：

1. 使用 IP 地址而不是 DNS 主機名。
2. 多次“ping”，扔掉最高和最低的分數，然后平均其余的分數。
3. 如果您的網頁正在進行大量繁重的處理，請嘗試在您認為 UI 負載最輕時進行測試。

Answer 2

使用jQuery你可以： $.ajax(url,settings) （ http://api.jquery.com/jQuery.ajax/ ），並采取從時間beforeSend和complete通過Date.now()減去那些時代- >然后你有時間請求（雖然不完全是“Ping”）

Answer 3

2021 年：

為我正在構建的 React 應用程序再次嘗試了這個。 我不認為准確性太大。

const ping = () => {
    var start = new Date().getTime();
    api.get('/ping').then((res) => {
        console.log(res)
        var end = new Date().getTime();
        console.log(`${end-start} ms`)
    }, (err) => {
        console.log(err)
    })
};

編寫了我自己的小 API，但我想在請求期間發生的事情太多了。

在終端中，我對我的服務器的 ping 時間大約為 23 毫秒。使用它可以達到 200-500 毫秒。