如何在JavaScript中检测互联网速度?
如何创建一个JavaScript页面来检测用户的互联网速度并将其显示在页面上?比如“你的互联网速度是??/??Kb/s”。
如何创建一个JavaScript页面来检测用户的互联网速度并将其显示在页面上?比如“你的互联网速度是??/??Kb/s”。
在某种程度上是可能的,但并不真正准确,这个想法是加载具有已知文件大小的图像,然后在其事件中测量触发该事件之前经过的时间,并将此时间除以图像文件大小。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 开发工具限制的情况下运行代码,然后查看结果是否与限制匹配。(信用归用户284130:))
要记住的重要事项: