Ở một mức độ nào đó có thể nhưng sẽ không thực sự chính xác, ý tưởng là tải hình ảnh với kích thước tệp đã biết sau đó trong onloadsự kiện của nó đo thời gian trôi qua cho đến khi sự kiện đó được kích hoạt và chia thời gian này cho kích thước tệp hình ảnh.
Ví dụ có thể được tìm thấy ở đây: Tính tốc độ bằng cách sử dụng javascript
Trường hợp thử nghiệm áp dụng các sửa chữa được đề xuất ở đó:
//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>
So sánh nhanh với dịch vụ kiểm tra tốc độ "thực" cho thấy sự khác biệt nhỏ 0,12 Mbps khi sử dụng hình ảnh lớn.
Để đảm bảo tính toàn vẹn của kiểm tra, bạn có thể chạy mã với công cụ điều chỉnh Chrome dev được bật và sau đó xem kết quả có khớp với giới hạn không. (tín dụng chuyển đến user284130 :))
Những điều quan trọng cần ghi nhớ:
Hình ảnh đang được sử dụng phải được tối ưu hóa và nén đúng cách. Nếu không, thì nén mặc định trên các kết nối của máy chủ web có thể hiển thị tốc độ lớn hơn thực tế. Một tùy chọn khác là sử dụng định dạng tệp không nén được, ví dụ jpg. (cảm ơn Rauli Rajande đã chỉ ra điều này và Fluxine đã nhắc nhở tôi )
Cơ chế buster cache được mô tả ở trên có thể không hoạt động với một số máy chủ CDN, có thể được cấu hình để bỏ qua các tham số chuỗi truy vấn, do đó tốt hơn là thiết lập các tiêu đề kiểm soát bộ đệm trên chính hình ảnh. (cảm ơn orcaman đã chỉ ra điều này ) )