Devacron.com

Κωδικας για να μετραμε τις επιδοσεις των browser σε javascript.

admin

Ειναι αρκετοι οι browser που κυκλοφορουν πλεον αφου η εποχη του μονοπωλειου του Internet Explorer εχει περασει ανεπιστρεπτη. Ομως η Google ως γνωστον πιεζει τους developers να χρησιμοποιουν οσο περισσοτερο γινεται την javascript. Κατα τη γνωμη μου λοιπον ο browser που θα επικρατησει τα επομενα χρονια ειναι αυτος που θα ειναι πιο γρηγορος σε υπολογισμους της javascript.

Ενας ευκολος και γρηγορος τροπος για να μετρησουμε την επιδοση του καθενος ειναι μεσω ενος μαθηματικου υπολογισμου αφου καταγραψουμε την ημερομηνια πριν και μετα τον υπολογισμο. Επειτα εκτελουμε μια απλη αφαιρεση και το αποτελεσμα που μας μενει σε ms ειναι ο χρονος που χρειαστηκε ο φυλλομετρητης. Στο παρακατω κωδικα  δημιουργω δυο arrays, και γεμιζω το ενα απο τα δυο μεσω ενος loop με αριθμους. Για την ακριβεια 500.000 ετσι ωστε η διαφορα να ειναι εμφανη. Υστερα χρησιμοποιω δυο γνωστες μεθοδους για να προσθεσω τα περιεχομενα του δευτερου array στο πρωτο. Η πρωτη μεθοδος ειναι με την push και η δευτερη με την concat. Τελος μεσω ενος jquery chart plugin περναω τα αποτελεσματα σε ενα div για να δουμε και γραφικα την διαφορα των επιδοσεων. Ο κωδικας εχεις ως εξης: 

<html lang="en">
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script src="http://jqbargraph.googlecode.com/files/jqBarGraph.1.1.js" type="text/javascript"></script>
</head>
<body>
    <div id="main"></div>
    <script type="text/javascript">
        var d1, d2, d3, d4, arr1 = [1, 2], arr2 = [], i = 0, len;

        for (; i < 500000; i++) {arr2[i] = i;}
        i = 0;
        len = arr2.length;

        d1 = new Date().getTime();

        for (; i < len; i++) {arr1.push(arr2[i]);}

        d2 = new Date().getTime();

        arr1 = [1, 2];
        d3 = new Date().getTime();

        arr1 = arr1.concat(arr2);

        d4 = new Date().getTime();

        arrayOfData = new Array([d2 - d1, 'looping and pushing', '#cccccc'],[d4 - d3, "array's concat", '#333333']);
        $('#main').jqBarGraph({ data: arrayOfData });
    </script>
</body>
</html>

Και αυτα ειναι τα αποτελεσματα που παιρνω σε chrome 18 , firefox 11 και Internet Explorer 9. (Οσο χαμηλοτερα τοσο καλυτερα)

 

 

 

Οπως βλεπετε κι εσεις o chrome και ο IE ειναι πιο γρηγοροι στον πρωτο τροπο υπολογισμου σε αντιθεση με τον Firefox που ειναι πιο δυνατος στην push. Μπορειτε να σωσετε το παρακατω html αρχειακι και να το τρεχετε οταν βγαινουν νεες εκδοσεις για συγκριση με παλαιοτερες. Διαφορετικα μπορειτε να το τρεξετε live απο εδω.

Exit mobile version