Archive for the ‘performance’ Category

Javascript: Klickst du schneller

by snirgel 06 Aug 0 Comments

Ganz vergessen vorm Urlaub zu veröffentlichen:

Jaja…immer noch die onclick – Geschichte. Dies wird dann aber der letzte Post dazu, versprochen. Ich hab da aber nach langem Rumdiskutieren und Recherchieren mal ein wenig getestet und will euch die Ergebnisse nicht vorenthalten, falls ihr mal vor dem selben Problem steht.

Die Sache war nämlich die, dass mein CTO und ich nicht auf einen Nenner gekommen sind, ob wir trotz der großartigen Erkenntnis mit dem data-attr nicht doch onclick benutzen sollen. Argumente für und gegen Beides gab es ausreichend. Es mußten also Fakten her und die sollten sich daraus generieren, was nun beim initialen Laden letztendlich schneller ist.

Um dies rauszufinden bin ich zunächst hergegangen und habe eine Seite gebaut, die mir 1000 links erzeugt hat und mir einen Timer je ans Anfang und Ende des Body-Elements gesetzt:

<body>
  <script>console.time('timerName');</script>
  <?php for(i=0, i<2000, i++) { ?>
    <a href="/">dumdidum</a>
  <?php } ?>
  <script type="text/javascript" src="meinescripte.min.js"></script>
  <script>console.timeEnd('timerName');</script>
</body>

Die Seite habe ich jetzt 30 mal geladen und die Zeit gemessen um einen Referenzwert zu bekommen.
Um den Durchschnitt zu bilden habe ich von den gesammelten Zeiten je die schnellste und langsamste Zeit rausgestrichen, also folgende Rechnung durchgeführt:

Durchschnitt = ∑(time(1…29))/28 (->ich bin nicht so gut in Formeln aufstellen wie man merkt, aber ich denke, ihr wißt, was ich meine)

Dann habe ich meinen Link mit einem onclick bestückt:

<body>
  <script>console.time('timerName');</script>
  <?php for(i=0, i<2000, i++) { ?>
    <a href="/" onclick="myfunction({'id':'<?php echo $i ?>'})">dumdidum</a>
  <?php } ?>
  <script type="text/javascript" src="meinescripte.min.js"></script>
  <script>console.timeEnd('timerName');</script>
</body>

Selbiges noch einmal in der bind-click-unobstrusive-data-attr Variante:

<body>
  <script>console.time('timerName');</script>
  <div id="parentid">
    <?php for(i=0, i<2000, i++) { ?>
      <a href="/" class="my-link" data-obj='{"id":"<?php echo $i; ?>"}'>dumdidum</a>
    <?php } ?>
  </div>
  <script type="text/javascript" src="meinescripte.min.js"></script>

  <script>
    jQuery(document).ready( function() {
      jQuery('#parentid .my-link').live('click', function(){
        return false;
      });
    });
    console.timeEnd('timerName');
  </script>
</body>

Nach wiederum je 30 Reloads und obiger Rechnung ergaben sich zum allgemeinen Erstaunen folgende Ergebnisse:

Ohne Klick: 1577,50 Sekunden
Late Binding: 1726,03 Sekunden
onclick: 1885,07 Sekunden

Irgendwie hatte ich nicht damit gerechnet, dass das late-binding wirklich schneller ist, als das gute alte onclick. Warum das so ist, kann ich mir auch nicht ganz erklären. Ich schätze mal, dass es daran liegen könnte, dass bei jedem onclick ein Event-Objekt instanziiert wird und das wohl seine Zeit dauert, wenn das bei jedem onclick extra gemacht wird, als eben gesammelt nachher. Aber wie gesagt, im Detail hab ich keinen Plan.

Ich hoffe mal, dass das Ganze jetzt nicht zu sehr nach Milchmädchenrechnung aussieht, denn natürlich könnte man meinen, dass nach 30 Reloads und bei der Art der Messung wahrhaftig keine validen Ergebnisse zustande kommen. Aber meiner Ansicht nach, ist eine klare Tendenz zu erkennen, dass das late-binding etwas performanter abläuft.