Při provozování složitější aplikace je často nutné zjistit, jaké má schopnosti klientský prohlížeč a jaké je jeho připojení do světa. V tomto článku rozebereme postup, jak zjistit jeho rychlost stahování dat.

Občas je při vývoji internetových aplikací potřeba znát, jakou rychlostí je k Vám připojen klient, který aplikaci používá. Vše co bude potřeba, je jeden obrázek uložený na serveru, a kousek JavaSriptového kódu. Nepotřebujeme žádné frameworky, knihovny, nic takového.

Idea je taková, že měření provedeme v následovně : stopneme čas, začneme nahrávat obrázek a v okamžiku kdy nahrávání skončí, změříme čas podruhé. Ze zjištěného času a známé velikosti obrázku vypočteme přenosovou rychlost.

<script type="text/javascript">

var SpeedTest = function() {};

SpeedTest.prototype = {
  imgUrl: "/images/23.png"    // Where the image is located at
  ,size: 199642                // bytes
  ,run: function( options ) {

    if( options && options.onStart )
      options.onStart();

    var imgUrl = this.imgUrl + "?r=" + Math.random();
    this.startTime = (new Date()).getTime() ;

    var testImage = new Image();
    var me = this;
    testImage.onload = function() {
      me.endTime = (new Date()).getTime();
      me.runTime = me.endTime - me.startTime;

      if( options && options.onEnd )
        options.onEnd( me.getResults() );
    };
    testImage.src = imgUrl;
  }

  ,getResults: function() {
    if( !this.runTime )
      return null;

    return {
      runTime: this.runTime
      ,Kbps: ( this.size * 8 / 1024 / ( this.runTime / 1000 ) )
      ,KBps: ( this.size / 1024 / ( this.runTime / 1000 ) )
    };
  }
}

 var st = new SpeedTest();
 st.run({
    onStart: function() {
       document.getElementById("speedTest").innerHTML = "zacal vypocet...";
   }
   ,onEnd: function(speed) {
document.getElementById("speedTest").innerHTML = Math.round(speed.Kbps) + ' Kbps';
   }
 });
</script>

Takto definovaná funkce a její spouštěč se sama postará o spuštění a prezentaci výsledků, v námi uvedeném případě obojí zapisuje do elementu s id „speedtest“. Proto by bylo vhodné javaSctript vložit do stránky s následující strukturou :

<html>
 <head>
  <title>Speed Check</title>
 </head>
 <body>
  <h3> Speed check </h3>
  <br>
Speed : <span id="speedTest"></span>
</body>
</html>

Nezbývá než si celý kód ozkoušet a případně prohlédnout zdrojový kód na stránce SpeedTest

Za kompletní návod děkuji autorovi článku : http://alexle.net/archives/257