如何创建一个JavaScript页面来检测用户的互联网速度并将其显示在页面上?诸如 “您的互联网速度为?? / ??”之类的信息 Kb / s”。
可能在某种程度上但不是很准确,其想法是加载具有已知文件大小的图像,然后在其onload事件中测量触发该事件之前经过的时间,然后将此时间除以图像文件大小。
onload
可以在这里找到示例:使用javascript计算速度
应用了建议的修复的测试用例:
//JUST AN EXAMPLE, PLEASE USE YOUR OWN PICTURE! var imageAddr = "http://www.kenrockwell.com/contax/images/g2/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>
与“真实”速度测试服务快速比较显示,使用大尺寸图像时,相差0.12 Mbps。
为了确保测试的完整性,您可以在启用Chrome开发者工具限制的情况下运行代码,然后查看结果是否符合限制。 (贷记给user284130)
要记住的重要事项:
使用的图像应适当优化和压缩。如果不是,则Web服务器对连接的默认压缩可能会显示比实际更大的速度。另一种选择是使用不可压缩的文件格式,例如jpg。
上述缓存无效化机制可能不适用于某些CDN服务器,可以将其配置为忽略查询字符串参数,从而更好地在映像本身上设置缓存控制标头。