Jogg.About::$Me->RaVbaker

Jak szybkie może być dodawanie... w JavaScripcie

Dzięki wewnątrzfirmowej korespondencji natknąłem się dzisiaj na dosyć interesujący wpis z bloga developerów Internet Explorera na temat zaleceń co do pisania optymalnego kodu JavaScript w IE. Autor wpisu podsunął w ostatniej częsci wpisu również kawałek kodu testującego performance przeglądarki na podstawie zwykłej operacji dodawania wykonywanej z odczytem/zapisem do właściwości obiektu, właściwości prototypu oraz zwykłej operacji na atrybutach obiektu.

Kod zaproponowany przez developera przeglądarki wygląda następująco:

 
<script>
// Slow Car definition
function SlowCar()
{
      this.m_tireSize = 17;
      this.m_maxSpeed = 250; // One can always dream!
      this.GetTireSize = SlowCar_get_tireSize;
      this.SetTireSize = SlowCar_put_tireSize;
}
function SlowCar_get_tireSize()
{
      return this.m_tireSize;
}
function SlowCar_put_tireSize(value)
{
      this.m_tireSize = value;
}
</script>


<script>
// Faster Car, no more property accessors
function FasterCar()
{
      this.m_tireSize = 17;
      this.m_maxSpeed = 250; // One can always dream!
} 
</script>


<script>
// Prototype Car, use the language features!
function PrototypeCar()
{
      this.m_tireSize = 17;
      this.m_maxSpeed = 250; // One can always dream!
}

PrototypeCar.prototype.GetTireSize = function() { return this.m_tireSize; };
PrototypeCar.prototype.SetTireSize = function(value) { this.m_tireSize = value; }; 
</script>


<script>
function TestDrive()
{
      var slowCar = new SlowCar(); // Safe and reliable, probably not fast
      var fasterCar = new FasterCar(); // Lacks air-bags, probably faster
      var protoCar = new PrototypeCar(); // Can technology win the day?


      var start = (new Date()).getTime();
      for(var i = 0; i < 100000; i++) { slowCar.SetTireSize(slowCar.GetTireSize() + 1); }
      var end = (new Date()).getTime();
      output.innerHTML += "Slow Car " + (end - start) + "<br>";
     

      start = (new Date()).getTime();
      for(var i = 0; i < 100000; i++) { fasterCar.m_tireSize += 1; }
      end = (new Date()).getTime();
      output.innerHTML += "Faster Car " + (end - start) + "<br>";


      start = (new Date()).getTime();
      for(var i = 0; i < 100000; i++) { protoCar.SetTireSize(protoCar.GetTireSize() + 1); }
      end = (new Date()).getTime();
      output.innerHTML += "Prototype Car " + (end - start) + "<br>";
}
</script>

<button onclick="TestDrive();">Test Drive Cars!</button>
<div id="output"></div>            

A oto jak działa

Spróbowałem wykonać powyższy kod na kilku przeglądarkach jakie miałem pod ręką aby sprawdzić jakie są tak naprawdę między nimi różnice:

Na screenie widać:

1. Opera 9.51
2. Safari 3
3. Firefox 3
4. Google Chrome
5. Internet Explorer 6
6. Firefox 2
7. Safari 4beta

Gdy tylko zainstaluję sobie najnowsze Safari 4beta to i tę przeglądarkę dodam do testu.Bartosz w komentarzu podrzucił screen od siebie.

Tym co najbardziej mnie zszokowało, to prędkość z jaką powyższy kod wykonał Chrome. Wcale nie zdziwiłbym się, gdyby tak atomowe operacje w tej przeglądarce zostały napisane w czystym Assemblerze. Wprost niesamowite czasu liczone nawet nie w dziesiątkach milisekund. Piszę też o tym dlatego, że performance przeglądarek z racji realizowanej pracy leży mi jakoś bardziej na sercu. Być może niedługo napiszę nieco wiecej o moich z nimi związanych spostrzeżeniach.

A co Wy myślicie o takim testowaniu prędkości przeglądarek?