কিভাবে জাভাস্ক্রিপ্ট ইন্টারনেট গতি সনাক্ত?


213

আমি কীভাবে একটি জাভাস্ক্রিপ্ট পৃষ্ঠা তৈরি করতে পারি যা ব্যবহারকারীর ইন্টারনেটের গতি সনাক্ত করতে পারে এবং এটি পৃষ্ঠাতে প্রদর্শিত হবে? এরকম কিছু “আপনার ইন্টারনেটের গতি ?? / ?? কেবি / গুলি "


1
@ জাকুব, @ অঙ্কিত: লোকেরা এর জন্য ফ্ল্যাশ ব্যবহার করতে পারে, তবে আপনার দরকার নেই। আপনি জাভাস্ক্রিপ্ট দিয়ে যা করতে পারবেন না তার কোনও কারণ নেই।
টিজে ক্রাউডার 13

আপনার যা প্রয়োজন এটি: স্পিডোফ.এম
অ্যাপি

উত্তর:


287

এটি কিছুটা হলেও সম্ভব তবে সত্যিই সঠিক হবে না, ধারণাটি হ'ল ফাইলের আকারের সাথে ইমেজ লোড করা উচিত 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 তে যায় :))

মনে রাখা গুরুত্বপূর্ণ বিষয়:

  1. ব্যবহৃত চিত্রটি সঠিকভাবে অনুকূলিত এবং সংকুচিত হওয়া উচিত। যদি তা না হয়, তবে ওয়েব সার্ভারের সংযোগগুলিতে ডিফল্ট সংক্ষেপণ এটির চেয়ে গতি আরও বড় দেখায়। অন্য বিকল্পটি কমপ্রেসিবল ফাইল ফর্ম্যাট ব্যবহার করছে, যেমন jpg। (এটি উল্লেখ করার জন্য রাউলি রাজান্ডে এবং আমাকে স্মরণ করিয়ে দেওয়ার জন্য ফ্লাক্সাইনকে ধন্যবাদ জানাই )

  2. উপরে বর্ণিত ক্যাশে বাস্টার প্রক্রিয়াটি হয়ত কিছু সিডিএন সার্ভারের সাথে কাজ করবে না, যা ক্যোয়ারী স্ট্রিং প্যারামিটারগুলি উপেক্ষা করার জন্য কনফিগার করা যেতে পারে, তাই ইমেজটিতেই ক্যাশে নিয়ন্ত্রণ শিরোনামকে আরও ভালভাবে সেট করা যায়। (এটি নির্দেশ করার জন্য অর্কামানকে ধন্যবাদ ) )


8
পরীক্ষা চিত্রটি যথাযথভাবে অনুকূলিত এবং সংকুচিত হয়েছে সেদিকে খেয়াল রাখুন। যদি এটি না হয়, তবে ওয়েবসার্ভারের মাধ্যমে সংযোগগুলিতে ডিফল্ট সংকোচনের চেয়ে গতিটি এটির চেয়ে বড় প্রদর্শিত হতে পারে।
রাউলি রাজান্ডে

3
আপনার চিত্রটি পরীক্ষার জন্য উপযুক্ত কিনা তা নিশ্চিত করার জন্য আমি একটি সামান্য কৌশল পেয়েছি: ক্রোম ডেভ সরঞ্জামটি থ্রোটলিং সক্ষম করে কোডটি চালান এবং দেখুন ফলাফলটি সীমাবদ্ধতার সাথে মেলে কিনা। আশা করি এটি কারও সাহায্য করতে পারে।
ব্যবহারকারী 284130

3
রাউলি রাজান্ডে যোগদান করুন: এমন ফাইলটি আরও ভাল ব্যবহার করুন যা সংকোচনের (বা প্রায়), বা ওয়েবসারভার সংকোচনের মডিউলগুলি এটিকে উল্লেখযোগ্যভাবে হ্রাস করতে পারে, পরিমাপটিকে অকার্যকর করে তুলতে পারে। একটি জেপিগ চিত্রটি একটি ভাল পছন্দ হবে।
ফ্লাক্সিন

1
যারা এই জাভাস্ক্রিপ্ট কোডটি সফলভাবে ব্যবহার করেছেন, তাদের জন্য আপনি কি প্রাথমিকভাবে "ডাউনলোড.অনলোড" তে কোনও কল পেয়েছেন? এটি হ'ল আমি যা अनुभव করছি এবং তা এখনও কেন তা অনুসন্ধান করার চেষ্টা করছি।

2
@ ছোট ছোট চিত্রের অর্থ কম নির্ভুল পরীক্ষা করা, এটি উদ্দেশ্য হিসাবে বড়। :)
শ্যাডো উইজার্ড আপনার পক্ষে

78

ঠিক আছে, এটি 2017 এর তাই কোনও ধরণের প্রাক্কলন ডাউনলিংকের গতি সম্পর্কিত তথ্য পেতে আপনার কাছে এখন নেটওয়ার্ক ইনফরমেশন এপিআই (এখনকার ব্রাউজারগুলিতে সীমিত সমর্থন থাকা সত্ত্বেও) রয়েছে :

navigator.connection.downlink

এটি প্রতি সেকেন্ডে মুবিটসে কার্যকর ব্যান্ডউইথের অনুমান। ব্রাউজারটি সম্প্রতি সক্রিয় সংযোগ জুড়ে পর্যবেক্ষণ করা অ্যাপ্লিকেশন স্তর থ্রুপুট থেকে এই অনুমান করে। বলা বাহুল্য, এই পদ্ধতির সর্বাধিক সুবিধা হ'ল আপনাকে কেবল ব্যান্ডউইথ / স্পিড গণনার জন্য কোনও সামগ্রী ডাউনলোড করার দরকার নেই।

আপনি এটি এবং অন্যান্য সম্পর্কিত গুণাবলী এখানে দেখতে পারেন

এটি সীমিত সমর্থন এবং ব্রাউজারগুলির জুড়ে বিভিন্ন বাস্তবায়নের কারণে (নভেম্বর 2017 হিসাবে), এটিকে বিশদভাবে পড়ার জোর পরামর্শ দিবে recommend


18
ক্যান আই ইউজ এ এটি প্রচুর লাল!
ফ্রান্সিসকো প্রেসেনেসিয়া

2
আমি এটি ব্যবহার করে 10MBit এর চেয়ে বেশি নম্বর পাব না। সীমা আছে কি?
টোবি

@ টোবি আমার কাছেও 10MBit এর চেয়ে বেশি পাওয়ার কথা মনে হচ্ছে না, আরও 100MBit
camjocotem

ডাউনলিংক আসলে কী? এটি ডাউনলোডের গতি বা কিছু?
গাকাট

@Tobi আমার তন্ন তন্ন, যদি গতি 10Mb শেষ হয়ে গেছে আমি পড়া 10 রাখা
Aramil

21

স্ট্যাকওভারফ্লোতে আমি এই অন্য উত্তরের রূপরেখা হিসাবে , আপনি বিভিন্ন আকারের ফাইল ডাউনলোডের সময়টি (ছোট শুরু করুন, সংযোগটি যদি এটির অনুমতি দেয় বলে মনে করেন তবে র‌্যাম্প আপ করুন), ক্যাশে শিরোলেখগুলির মাধ্যমে নিশ্চিত করে এবং ফাইলটি সত্যই সত্য রিমোট সার্ভার থেকে পড়া হচ্ছে এবং ক্যাশে থেকে পুনরুদ্ধার করা হচ্ছে না। এটি অগত্যা আপনার নিজের একটি সার্ভার থাকা দরকার (ফাইলগুলি এস 3 বা অনুরূপ থেকে আসতে পারে ) তবে সংযোগের গতি পরীক্ষা করার জন্য আপনার কোথাও ফাইলগুলি নেওয়া দরকার to

এটি বলেছিল, পয়েন্ট-ইন-টাইম ব্যান্ডউইথ পরীক্ষাগুলি কুখ্যাতভাবে অবিশ্বাস্য, কারণ এটি অন্যান্য উইন্ডোতে আপনার আইটেমগুলি ডাউনলোড করার ফলে, আপনার সার্ভারের গতি, রুটে প্রবেশের লিঙ্কগুলি ইত্যাদির দ্বারা প্রভাবিত হয় But তবে আপনি একটি মোটামুটি ধারণা পেতে পারেন এই ধরণের কৌশল ব্যবহার করে।


1
@ জাকুব: আপলোড করার জন্য আপনার কাছে জায়গা থাকতে হবে তবে আপনি একই কৌশলটি ব্যবহার করতে পারবেন না এমন কোনও কারণ নেই। আপনি ফ্লাই-এ ফ্লাই তৈরি করেন এমন ডেটা ব্যবহার করতে পারেন বা অবশ্যই ডাউনলোড পরীক্ষার জন্য আপনি ডাউনলোড করেছেন এমন কিছু ডেটা আবার ব্যবহার করতে পারেন।
টিজে ক্রাউডার

সুতরাং আপনি কীভাবে জানবেন কখন আপলোড সম্পূর্ণ হয়েছে?
জাকুব হাম্পল

2
@ জাকুব: বেশ কয়েকটি উপায়। iframeউদাহরণস্বরূপ, আপনি যদি কোনও লুক্কায়িত ফর্ম জমা দেন , তবে আপনি iframeসমাপ্তির জন্য পোল বা কুকিটি পোল করুন । আপনি যদি XMLHttpRequestপোস্টটি করতে কোনও অবজেক্ট ব্যবহার করেন তবে সম্পূর্ণ হওয়ার জন্য একটি কলব্যাক রয়েছে।
টিজে ক্রাউডার

17

আমি যে সাইটটিতে কাজ করছি তাতে কিছু বৈশিষ্ট্য সক্ষম / অক্ষম করার জন্য ব্যবহারকারী সংযোগের গতি যথেষ্ট দ্রুত ছিল কিনা তা নির্ধারণ করার জন্য আমার দ্রুত পদ্ধতির প্রয়োজন ছিল, আমি এই ছোট স্ক্রিপ্টটি তৈরি করেছি যা একটি একক (ছোট) চিত্র ডাউনলোড করতে সময় লাগে গড়ে গড়ে বহুবার, এটি আমার পরীক্ষাগুলিতে বেশ নিখুঁতভাবে কাজ করছে, উদাহরণস্বরূপ 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);
  }
}


1
সবচেয়ে নির্ভরযোগ্য উত্তর, আমার ক্ষেত্রে।
আবদাল্লা আরবব

1
আপলোড পরীক্ষা সম্পর্কে কি?
gumuruh

9

চিত্রটির কৌশলটি দুর্দান্ত তবে আমার পরীক্ষাগুলিতে এটি লোড হচ্ছিল কিছু এজ্যাক্স কল করার আগে আমি সম্পূর্ণ হতে চেয়েছিলাম।

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);
  }
};

প্লোন প্যাকেজ থেকে নেওয়া কোডটি আমি লিখেছিলাম:


5

গতি পরীক্ষার জন্য চিত্র ব্যবহার করা আরও ভাল। আপনি যদি জিপ ফাইলগুলি নিয়ে কাজ করতে চান তবে নীচের কোডটি কাজ করে।

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 ফাইলগুলির সাথে এটি খুব ভালভাবে কাজ করবে না। একাধিক ডাউনলোড প্রচেষ্টায় আপনাকে একত্রিত ফলাফলগুলি চালাতে হবে।


3
সত্যিই উত্তর সরলতা আমি এবং আমি আমার উদ্দেশ্যে এটি অভিযোজিত হয়েছে: আমি অদলবদল window.performance.now টাইমস্ট্যাম্প জন্য request.responseType = "ফোঁটা" (MIME প্রকারসমূহ বৈধ নয়), request.response.size জন্য ডাউনলোডের আকার এবং গতি গণনার জন্য 1000000 (কারণ এমবিপিএস এসআই ইউনিটে থাকা উচিত)।
রূপার্ট রাউসলে

3

আমারও তেমন কিছু দরকার ছিল, তাই আমি https://github.com/beradrian/jsbandwidth লিখেছি । এটি https://code.google.com/p/jsbandwidth/ এর পুনর্লিখন

ধারণাটি হ'ল এজ্যাক্সের মাধ্যমে দুটি কল করা, একটি ডাউনলোড করতে এবং অন্যটি পোষ্টের মাধ্যমে আপলোড করার।

এটি উভয় jQuery.ajaxবা কৌণিকের সাথে কাজ করা উচিত $http


1

গতিশীল সংযোগের গতি পরিবর্তন সনাক্ত করার জন্য পুনিত এস উত্তরের ধন্যবাদ, আপনি নিম্নলিখিত কোডটি ব্যবহার করতে পারেন:

navigator.connection.onchange = function () {
 //do what you need to do ,on speed change event
 console.log('Connection Speed Changed');
}

2
দুর্ভাগ্যক্রমে এটি সমস্ত ব্রাউজারগুলিকে সমর্থন করে না। caniuse.com/#search=netinfo
axelioo
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.