如何检测互联网在Javascript中的速度？
我如何创build一个Javascript页面来检测用户的networking速度并将其显示在页面上？ 像你的上网速度是?? /？ KB /秒。
这可能在一定程度上，但不会是真正的准确，这个想法是加载一个已知的文件大小的图像，然后在其onload事件度量多less时间过去，直到该事件被触发，并将这个时间划分为图像文件大小。
示例可以在这里find： 使用JavaScript计算速度
testing案例应用修复build议在那里：
//JUST AN EXAMPLE, PLEASE USE YOUR OWN PICTURE! var imageAddr = "http://www.kenrockwell.com/contaxhttp://img.dovov.comg2/examples/31120037-5mb.jpg"; var downloadSize = 4995374; //bytes function ShowProgressMessage(msg) { if (console) { if (typeof msg == "string") { console.log(msg); } else { for (var i = 0; i < msg.length; i++) { console.log(msg[i]); } } } var oProgress = document.getElementById("progress"); if (oProgress) { var actualHTML = (typeof msg == "string") ? msg : msg.join("<br />"); oProgress.innerHTML = actualHTML; } } function InitiateSpeedDetection() { ShowProgressMessage("Loading the image, please wait..."); window.setTimeout(MeasureConnectionSpeed, 1); }; if (window.addEventListener) { window.addEventListener('load', InitiateSpeedDetection, false); } else if (window.attachEvent) { window.attachEvent('onload', InitiateSpeedDetection); } function MeasureConnectionSpeed() { var startTime, endTime; var download = new Image(); download.onload = function () { endTime = (new Date()).getTime(); showResults(); } download.onerror = function (err, msg) { ShowProgressMessage("Invalid image, or error downloading"); } startTime = (new Date()).getTime(); var cacheBuster = "?nnn=" + startTime; download.src = imageAddr + cacheBuster; function showResults() { var duration = (endTime - startTime) / 1000; var bitsLoaded = downloadSize * 8; var speedBps = (bitsLoaded / duration).toFixed(2); var speedKbps = (speedBps / 1024).toFixed(2); var speedMbps = (speedKbps / 1024).toFixed(2); ShowProgressMessage([ "Your connection speed is:", speedBps + " bps", speedKbps + " kbps", speedMbps + " Mbps" ]); } }
<h1 id="progress">JavaScript is turned off, or your browser is realllllly slow</h1>
正如我在StackOverflow的这个其他答案中所概述的那样，您可以通过计算各种大小的文件的下载来实现这个目的（从连接似乎允许的时候开始小，渐增），通过caching头确保文件是真的正在从远程服务器读取，而不是从caching中检索。 这并不一定要求你有自己的服务器（这些文件可能来自S3或类似的文件），但是你将需要某个地方来获取文件，以testing连接速度。
也就是说，时间点带宽testing是非常不可靠的，因为它们受到其他窗口下载的其他项的影响，服务器的速度，连接路线等等。但是，您可以得到一个粗略的想法使用这种技术。
我需要一个快速的方法来确定用户连接速度是否足够快，以启用/禁用我正在工作的网站中的一些function，我做了这个小脚本，平均下载一个（小）图像次数，在我的testing中工作相当准确，能够清楚地区分3G或Wi-Fi，也许有人可以做一个更优雅的版本，甚至是一个jQuery插件。
var arrTimes = []; var i = 0; // start var timesToTest = 5; var tThreshold = 150; //ms var testImage = "http://www.google.comhttp://img.dovov.comphd/px.gif"; // small image in your server var dummyImage = new Image(); var isConnectedFast = false; testLatency(function(avg){ isConnectedFast = (avg <= tThreshold); /** output */ document.body.appendChild( document.createTextNode("Time: " + (avg.toFixed(2)) + "ms - isConnectedFast? " + isConnectedFast) ); }); /** test and average time took to download image from server, called recursively timesToTest times */ function testLatency(cb) { var tStart = new Date().getTime(); if (i<timesToTest-1) { dummyImage.src = testImage + '?t=' + tStart; dummyImage.onload = function() { var tEnd = new Date().getTime(); var tTimeTook = tEnd-tStart; arrTimes[i] = tTimeTook; testLatency(cb); i++; }; } else { /** calculate average of array items then callback */ var sum = arrTimes.reduce(function(a, b) { return a + b; }); var avg = sum / arrTimes.length; cb(avg); } }
最好使用图像来testing速度。 但是，如果你不得不处理zip文件，下面的代码工作。
var fileURL = "your/url/here/testfile.zip"; var request = new XMLHttpRequest(); var avoidCache = "?avoidcache=" + (new Date()).getTime();; request.open('GET', fileURL + avoidCache, true); request.responseType = "application/zip"; var startTime = (new Date()).getTime(); var endTime = startTime; request.onreadystatechange = function () { if (request.readyState == 2) { //ready state 2 is when the request is sent startTime = (new Date().getTime()); } if (request.readyState == 4) { endTime = (new Date()).getTime(); var downloadSize = request.responseText.length; var time = (endTime - startTime) / 1000; var sizeInBits = downloadSize * 8; var speed = ((sizeInBits / time) / (1024 * 1024)).toFixed(2); console.log(downloadSize, time, speed); } } request.send();
这对于<10MB的文件来说效果不好。 您将不得不在多次下载尝试中运行汇总结果。
图像技巧很酷，但在我的testing中，它正在加载一些Ajax调用，我想完成。
2017年的适当解决scheme是使用工人（ http://caniuse.com/#feat=webworkers ）。
工人看起来像：
/** * This function performs a synchronous request * and returns an object contain informations about the download * time and size */ function measure(filename) { var xhr = new XMLHttpRequest(); var measure = {}; xhr.open("GET", filename + '?' + (new Date()).getTime(), false); measure.start = (new Date()).getTime(); xhr.send(null); measure.end = (new Date()).getTime(); measure.len = parseInt(xhr.getResponseHeader('Content-Length') || 0); measure.delta = measure.end - measure.start; return measure; } /** * Requires that we pass a base url to the worker * The worker will measure the download time needed to get * a ~0KB and a 100KB. * It will return a string that serializes this informations as * pipe separated values */ onmessage = function(e) { measure0 = measure(e.data.base_url + '/test/0.bz2'); measure100 = measure(e.data.base_url + '/test/100K.bz2'); postMessage( measure0.delta + '|' + measure0.len + '|' + measure100.delta + '|' + measure100.len ); };
将调用Worker的js文件：
var base_url = PORTAL_URL + '/++plone++experimental.bwtools'; if (typeof(Worker) === 'undefined') { return; // unsupported } w = new Worker(base_url + "/scripts/worker.js"); w.postMessage({ base_url: base_url }); w.onmessage = function(event) { if (event.data) { set_cookie(event.data); } };
从Plone软件包取得的代码我写道：
我需要类似的东西，所以我写了https://github.com/beradrian/jsbandwidth 。 这是对https://code.google.com/p/jsbandwidth/的重写。;
这个想法是通过Ajax进行两个调用，一个通过POST进行下载，另一个通过POST进行上传。
它应该同时使用jQuery.ajax或Angular $http 。
您可以确定页面加载时间。 尝试使用以下脚本来测量完全加载页面所需的时间：
<html> <head> <script type="text/javascript"> var start = new Date().getTime(); function onLoad() { var now = new Date().getTime(); var latency = now - start; alert("page loading time: " + latency); } </script> </head> <body onload="onLoad()"> <!- Main page body goes from here. --> </body> </html>
导航时间参见3WC页面：
https://dvcs.w3.org/hg/webperf/raw-file/tip/specs/NavigationTiming/Overview.html
