আমি কীভাবে একটি জাভাস্ক্রিপ্ট পৃষ্ঠা তৈরি করতে পারি যা ব্যবহারকারীর ইন্টারনেটের গতি সনাক্ত করতে পারে এবং এটি পৃষ্ঠাতে প্রদর্শিত হবে? এরকম কিছু “আপনার ইন্টারনেটের গতি ?? / ?? কেবি / গুলি " ।
আমি কীভাবে একটি জাভাস্ক্রিপ্ট পৃষ্ঠা তৈরি করতে পারি যা ব্যবহারকারীর ইন্টারনেটের গতি সনাক্ত করতে পারে এবং এটি পৃষ্ঠাতে প্রদর্শিত হবে? এরকম কিছু “আপনার ইন্টারনেটের গতি ?? / ?? কেবি / গুলি " ।
উত্তর:
এটি কিছুটা হলেও সম্ভব তবে সত্যিই সঠিক হবে না, ধারণাটি হ'ল ফাইলের আকারের সাথে ইমেজ লোড করা উচিত onload
ইভেন্টের পরিমাপের event ইভেন্টটি চালিত হওয়া অবধি কতটা সময় কেটে গেছে, এবং এই বারটি চিত্রের ফাইল আকারে ভাগ করুন।
উদাহরণ এখানে পাওয়া যাবে: জাভাস্ক্রিপ্ট ব্যবহার করে গতি গণনা করুন
টেস্ট কেস সেখানে প্রস্তাবিত ফিক্স প্রয়োগ করে:
//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>
"বাস্তব" গতি পরীক্ষা পরিষেবার সাথে দ্রুত তুলনা Quick বড় ছবি ব্যবহার করার সময় 0.12 এমবিপিএসের ছোট পার্থক্য দেখায়।
পরীক্ষার অখণ্ডতা নিশ্চিত করতে, আপনি ক্রোম দেব সরঞ্জাম থ্রোটলিং সক্ষম করে কোডটি চালাতে পারেন এবং তারপরে ফলাফলটি সীমাবদ্ধতার সাথে মেলে কিনা তা দেখুন। (ক্রেডিট ব্যবহারকারী 284130 তে যায় :))
মনে রাখা গুরুত্বপূর্ণ বিষয়:
ব্যবহৃত চিত্রটি সঠিকভাবে অনুকূলিত এবং সংকুচিত হওয়া উচিত। যদি তা না হয়, তবে ওয়েব সার্ভারের সংযোগগুলিতে ডিফল্ট সংক্ষেপণ এটির চেয়ে গতি আরও বড় দেখায়। অন্য বিকল্পটি কমপ্রেসিবল ফাইল ফর্ম্যাট ব্যবহার করছে, যেমন jpg। (এটি উল্লেখ করার জন্য রাউলি রাজান্ডে এবং আমাকে স্মরণ করিয়ে দেওয়ার জন্য ফ্লাক্সাইনকে ধন্যবাদ জানাই )
উপরে বর্ণিত ক্যাশে বাস্টার প্রক্রিয়াটি হয়ত কিছু সিডিএন সার্ভারের সাথে কাজ করবে না, যা ক্যোয়ারী স্ট্রিং প্যারামিটারগুলি উপেক্ষা করার জন্য কনফিগার করা যেতে পারে, তাই ইমেজটিতেই ক্যাশে নিয়ন্ত্রণ শিরোনামকে আরও ভালভাবে সেট করা যায়। (এটি নির্দেশ করার জন্য অর্কামানকে ধন্যবাদ ) )
ঠিক আছে, এটি 2017 এর তাই কোনও ধরণের প্রাক্কলন ডাউনলিংকের গতি সম্পর্কিত তথ্য পেতে আপনার কাছে এখন নেটওয়ার্ক ইনফরমেশন এপিআই (এখনকার ব্রাউজারগুলিতে সীমিত সমর্থন থাকা সত্ত্বেও) রয়েছে :
navigator.connection.downlink
এটি প্রতি সেকেন্ডে মুবিটসে কার্যকর ব্যান্ডউইথের অনুমান। ব্রাউজারটি সম্প্রতি সক্রিয় সংযোগ জুড়ে পর্যবেক্ষণ করা অ্যাপ্লিকেশন স্তর থ্রুপুট থেকে এই অনুমান করে। বলা বাহুল্য, এই পদ্ধতির সর্বাধিক সুবিধা হ'ল আপনাকে কেবল ব্যান্ডউইথ / স্পিড গণনার জন্য কোনও সামগ্রী ডাউনলোড করার দরকার নেই।
আপনি এটি এবং অন্যান্য সম্পর্কিত গুণাবলী এখানে দেখতে পারেন
এটি সীমিত সমর্থন এবং ব্রাউজারগুলির জুড়ে বিভিন্ন বাস্তবায়নের কারণে (নভেম্বর 2017 হিসাবে), এটিকে বিশদভাবে পড়ার জোর পরামর্শ দিবে recommend
স্ট্যাকওভারফ্লোতে আমি এই অন্য উত্তরের রূপরেখা হিসাবে , আপনি বিভিন্ন আকারের ফাইল ডাউনলোডের সময়টি (ছোট শুরু করুন, সংযোগটি যদি এটির অনুমতি দেয় বলে মনে করেন তবে র্যাম্প আপ করুন), ক্যাশে শিরোলেখগুলির মাধ্যমে নিশ্চিত করে এবং ফাইলটি সত্যই সত্য রিমোট সার্ভার থেকে পড়া হচ্ছে এবং ক্যাশে থেকে পুনরুদ্ধার করা হচ্ছে না। এটি অগত্যা আপনার নিজের একটি সার্ভার থাকা দরকার (ফাইলগুলি এস 3 বা অনুরূপ থেকে আসতে পারে ) তবে সংযোগের গতি পরীক্ষা করার জন্য আপনার কোথাও ফাইলগুলি নেওয়া দরকার to
এটি বলেছিল, পয়েন্ট-ইন-টাইম ব্যান্ডউইথ পরীক্ষাগুলি কুখ্যাতভাবে অবিশ্বাস্য, কারণ এটি অন্যান্য উইন্ডোতে আপনার আইটেমগুলি ডাউনলোড করার ফলে, আপনার সার্ভারের গতি, রুটে প্রবেশের লিঙ্কগুলি ইত্যাদির দ্বারা প্রভাবিত হয় But তবে আপনি একটি মোটামুটি ধারণা পেতে পারেন এই ধরণের কৌশল ব্যবহার করে।
iframe
উদাহরণস্বরূপ, আপনি যদি কোনও লুক্কায়িত ফর্ম জমা দেন , তবে আপনি iframe
সমাপ্তির জন্য পোল বা কুকিটি পোল করুন । আপনি যদি XMLHttpRequest
পোস্টটি করতে কোনও অবজেক্ট ব্যবহার করেন তবে সম্পূর্ণ হওয়ার জন্য একটি কলব্যাক রয়েছে।
আমি যে সাইটটিতে কাজ করছি তাতে কিছু বৈশিষ্ট্য সক্ষম / অক্ষম করার জন্য ব্যবহারকারী সংযোগের গতি যথেষ্ট দ্রুত ছিল কিনা তা নির্ধারণ করার জন্য আমার দ্রুত পদ্ধতির প্রয়োজন ছিল, আমি এই ছোট স্ক্রিপ্টটি তৈরি করেছি যা একটি একক (ছোট) চিত্র ডাউনলোড করতে সময় লাগে গড়ে গড়ে বহুবার, এটি আমার পরীক্ষাগুলিতে বেশ নিখুঁতভাবে কাজ করছে, উদাহরণস্বরূপ 3 জি বা ওয়াই-ফাইয়ের মধ্যে স্পষ্টভাবে পার্থক্য করতে সক্ষম হতে পারে, কেউ হয়তো আরও মার্জিত সংস্করণ বা এমনকি একটি jQuery প্লাগইন তৈরি করতে পারে।
var arrTimes = [];
var i = 0; // start
var timesToTest = 5;
var tThreshold = 150; //ms
var testImage = "http://www.google.com/images/phd/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);
}
}
চিত্রটির কৌশলটি দুর্দান্ত তবে আমার পরীক্ষাগুলিতে এটি লোড হচ্ছিল কিছু এজ্যাক্স কল করার আগে আমি সম্পূর্ণ হতে চেয়েছিলাম।
2017 এর সঠিক সমাধানটি হ'ল কোনও শ্রমিক ( 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
);
};
জেএস ফাইল যা শ্রমিককে অনুরোধ করবে:
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);
}
};
প্লোন প্যাকেজ থেকে নেওয়া কোডটি আমি লিখেছিলাম:
গতি পরীক্ষার জন্য চিত্র ব্যবহার করা আরও ভাল। আপনি যদি জিপ ফাইলগুলি নিয়ে কাজ করতে চান তবে নীচের কোডটি কাজ করে।
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 ফাইলগুলির সাথে এটি খুব ভালভাবে কাজ করবে না। একাধিক ডাউনলোড প্রচেষ্টায় আপনাকে একত্রিত ফলাফলগুলি চালাতে হবে।
আমারও তেমন কিছু দরকার ছিল, তাই আমি https://github.com/beradrian/jsbandwidth লিখেছি । এটি https://code.google.com/p/jsbandwidth/ এর পুনর্লিখন ।
ধারণাটি হ'ল এজ্যাক্সের মাধ্যমে দুটি কল করা, একটি ডাউনলোড করতে এবং অন্যটি পোষ্টের মাধ্যমে আপলোড করার।
এটি উভয় jQuery.ajax
বা কৌণিকের সাথে কাজ করা উচিত $http
।
গতিশীল সংযোগের গতি পরিবর্তন সনাক্ত করার জন্য পুনিত এস উত্তরের ধন্যবাদ, আপনি নিম্নলিখিত কোডটি ব্যবহার করতে পারেন:
navigator.connection.onchange = function () {
//do what you need to do ,on speed change event
console.log('Connection Speed Changed');
}