यह कुछ हद तक संभव है, लेकिन वास्तव में सटीक नहीं होगा, विचार एक ज्ञात फ़ाइल आकार के साथ लोड छवि है, फिर इसके onloadघटना माप में उस घटना को ट्रिगर होने तक कितना समय बीत गया, और इस बार छवि फ़ाइल आकार में विभाजित करें।
उदाहरण यहां पाया जा सकता है: जावास्क्रिप्ट का उपयोग करके गति की गणना करें
निर्धारित सुझाव को लागू करने वाला टेस्ट केस:
//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 एमबीपीएस का छोटा अंतर दिखाया गया।
परीक्षण की अखंडता सुनिश्चित करने के लिए, आप क्रोम देव टूल थ्रॉटलिंग सक्षम के साथ कोड चला सकते हैं और फिर देख सकते हैं कि परिणाम सीमा से मेल खाता है या नहीं। (श्रेय user284130 :) को जाता है )
ध्यान रखने योग्य महत्वपूर्ण बातें:
उपयोग की जा रही छवि को ठीक से अनुकूलित और संपीड़ित होना चाहिए। यदि ऐसा नहीं है, तो वेब सर्वर द्वारा कनेक्शन पर डिफ़ॉल्ट संपीड़न वास्तव में गति से बड़ा हो सकता है। एक अन्य विकल्प असंपीड़ित फ़ाइल प्रारूप का उपयोग कर रहा है, जैसे कि jpg। ( यह याद दिलाने के लिए राउली राजन्दे और मुझे याद दिलाने के लिए फ्लक्साइन धन्यवाद )
ऊपर वर्णित कैश बस्टर तंत्र कुछ CDN सर्वर के साथ काम नहीं कर सकता है, जिसे क्वेरी स्ट्रिंग मापदंडों की अनदेखी करने के लिए कॉन्फ़िगर किया जा सकता है, इसलिए छवि पर ही कैश कंट्रोल हेडर को बेहतर तरीके से सेट किया जा सकता है। (धन्यवाद के लिए orcaman इस ओर इशारा करते हुए ) )