Question

我们是否可以通过Web应用程序指示客户端当前的网络质量（某种类型的条，类似于手机上的n / w质量条）？

我们的网络应用程序处理数据传输，由于与客户的网络问题而导致大多数传输失败，他们显然不了解它。客户端保持报告失败，而实际问题是他们的n / w连接，我正在寻找一种方法，可以在他们使用应用程序时向他们指示相同的内容（在我的Web应用程序内）。

我知道还有其他工具可供调查，但外行用户设置不具备它们（至少我们的用户）。

感谢。

Answer 1

一种方法是使用window.navigator.onLine例如：

if (navigator.onLine) {
  alert('online')
} else {
  alert('offline');
}

或捕捉变化：

window.addEventListener("offline", function(e) {
  alert("offline");
}, false);

window.addEventListener("online", function(e) {
  alert("online");
}, false);

你可以在某些时间间隔取平均值，并开发一种算法来将连通性量化为10％，50％等......

你也可以设置一个AJAX民意调查并观察超时，但要注意不要过多增加流量：

$.ajax({
  type: "GET",
  url: "yourserver.com",
  success: function(data){
    alert("Connection active!")
  }
  error: function(XMLHttpRequest, textStatus, errorThrown) {
    if(textStatus == 'timeout') {
       alert('Connection seems dead!');
    }
  }
});

Answer 2

根据您传输数据的方式，一次传输数量以及频率，可以做出一些假设。

我首先假设您正在制作XHR请求，因为这确实是可靠地衡量我们所需指标的唯一方法。

至于多少，我希望你一次不发送兆字节。这使得测量响应时间变得更加困难（因为网络条件可能会在大量请求的生命周期内发生变化）。此外，如果用户位于某种代理之后，则代理可能会抛出超大请求。假设小于1 MB。

最后，如果您每5分钟只发送一次数据，我们显然不会有太多的性能测量数据可供使用。

话虽如此，我会通过测量每个请求的总请求时间和计算失败次数来解决这个问题。类似的东西：

var recentResults = [], history = 90000;
function sendData() {
    var start = Date.now(); // remember when we started this request
    $.post('/some/api', { some: 'data' }, function(r) {
        recentResults.push({start:start, end:Date.now() - start}); // record how long it took (ms)
    }).fail(function() {
        recentResults.push({start:start, end:null}); // record a failure
    });
}

setInterval(function() {
    var now = Date.now();
    if (recentResults.length > 0) while (now - recentResults[0].start > history) {
        recentResults.shift(); // prune old data
    }


    var sum;
    for (var i = 0, r; i < recentResults.length; r=recentResults[i++]) {
        if (r.end == null) sum += 50000;
        else sum += r.end;
    }

    var movingAverage = sum / recentResults.length;

    // use movingAverage to calculate the overall connection quality

}, 1000);

您必须根据反复试验调整我在此处使用的几个值。

history是将请求保持在移动平均线中的时间长度（以毫秒为单位）。如果您经常提出请求，可以将其关闭。如果您每分钟只发出一个请求，则可能需要增加它。
我任意指定完全失败，相当于50秒的响应时间。故障可能由于多种原因而发生，包括瞬态网络问题（例如差的WiFi信号）和服务器错误（HTTP 500）。您可能希望根据实际场景中的测试进行调整。
我每秒都会对响应时间数据进行采样。对于响应速度更快的信号仪，您可以更频繁地执行此操作，但显然会消耗更多的CPU周期来执行此操作。如果您的应用在移动设备上运行，请务必小心。

您必须进行实际测试，以确定“好”与“坏”的平均响应时间是什么样的。

Answer 3

查看http://www.igvita.com/2012/04/04/measuring-site-speed-with-navigation-timing/

这给出了关于新的W3c导航定时接口的想法。 Chrome / ffox / IE已经有了

webapp上的网络质量指标

3 个答案: