Πώς να βελτιστοποιήσετε τις εφαρμογές JavaScript χρησιμοποιώντας Loops

Όλοι θέλουν εφαρμογές υψηλής απόδοσης - οπότε σε αυτήν την ανάρτηση, θα μάθουμε πώς να επιτύχουμε αυτόν τον στόχο.

Ένα από τα ευκολότερα και πιο παραμελημένα πράγματα που μπορείτε να κάνετε για να βελτιώσετε την απόδοση των εφαρμογών σας JavaScript είναι να μάθετε πώς να γράφετε καταστάσεις βρόχου υψηλής απόδοσης. Η ιδέα αυτού του άρθρου είναι να βοηθήσουμε με αυτό.

Θα δούμε τους κύριους τύπους βρόχων που χρησιμοποιούνται στο JavaScript και πώς μπορούμε να τους γράψουμε με επιδόσεις.

Ας ξεκινήσουμε!

Απόδοση βρόχου

Όσον αφορά την απόδοση του βρόχου, η συζήτηση είναι πάντα για το ποιος βρόχος θα χρησιμοποιηθεί. Ποιο είναι το ταχύτερο και πιο αποδοτικό; Η αλήθεια είναι ότι, από τους τέσσερις τύπους βρόχων που παρέχονται από τη JavaScript, μόνο ένας από αυτούς είναι σημαντικά πιο αργός από τους άλλους - for-inβρόχος. Η επιλογή του τύπου βρόχου πρέπει να βασίζεται στις απαιτήσεις σας και όχι σε θέματα απόδοσης .

Υπάρχουν δύο κύριοι παράγοντες που συμβάλλουν στην απόδοση του βρόχου - εργασία που γίνεται ανά επανάληψη και αριθμός επαναλήψεων .

Στις παρακάτω ενότητες θα δούμε πώς, μειώνοντάς τα, μπορούμε να έχουμε θετικό συνολικό αντίκτυπο στην απόδοση του βρόχου.

Για βρόχο

ECMA-262 (η προδιαγραφή που καθορίζει τη βασική σύνταξη και συμπεριφορά της JavaScript), η τρίτη έκδοση, καθορίζει τέσσερις τύπους βρόχων. Ο πρώτος είναι ο τυπικός forβρόχος, ο οποίος μοιράζεται τη σύνταξή του με άλλες γλώσσες τύπου C:

for (var i = 0; i < 10; i++){ //loop body}

Αυτή είναι ίσως η πιο συχνά χρησιμοποιούμενη κατασκευή βρόχου JavaScript. Για να καταλάβουμε πώς μπορούμε να βελτιστοποιήσουμε το έργο του, πρέπει να το τεμαχίσουμε λίγο.

Ανατομή

Ο forβρόχος αποτελείται από τέσσερα μέρη: αρχικοποίηση, κατάσταση δοκιμής, σώμα βρόχου και μετά την εκτέλεση. Ο τρόπος που λειτουργεί είναι ο ακόλουθος: πρώτα, εκτελείται ο κωδικός αρχικοποίησης (var i = 0;). Στη συνέχεια, η προκαταρκτική συνθήκη (i <10;). Εάν η προκαταρκτική συνθήκη αξιολογεί το to true, τότε εκτελείται το σώμα του βρόχου. Μετά από αυτό εκτελείται ο κωδικός μετά την εκτέλεση (i ++).

Βελτιστοποιήσεις

Το πρώτο βήμα για τη βελτιστοποίηση του όγκου εργασίας σε έναν βρόχο είναι η ελαχιστοποίηση του αριθμού των μελών αντικειμένων και των αναζητήσεων στοιχείων πίνακα.

Μπορείτε επίσης να αυξήσετε την απόδοση των βρόχων αντιστρέφοντας τη σειρά τους. Στο JavaScript, η αντιστροφή ενός βρόχου έχει ως αποτέλεσμα μια μικρή βελτίωση της απόδοσης για τους βρόχους, υπό την προϋπόθεση ότι θα εξαλείψετε επιπλέον λειτουργίες ως αποτέλεσμα.

Και οι δύο παραπάνω δηλώσεις ισχύουν και για τους άλλους δύο ταχύτερους βρόχους ( whileκαι do-while).

// original loop for (var i = 0; i < items.length; i++){ process(items[i]); } // minimizing property lookups for (var i = 0, len = items.length; i < len; i++){ process(items[i]); } // minimizing property lookups and reversing for (var i = items.length; i--; ){ process(items[i]); }

Ενώ βρόχος

Ο δεύτερος τύπος βρόχου είναι ο whileβρόχος. Αυτός είναι ένας απλός βρόχος pretest, που αποτελείται από μια κατάσταση pretest και ένα σώμα βρόχου.

var i = 0; while(i < 10){ //loop body i++; }

Ανατομή

Εάν η συνάρτηση pretest αξιολογηθεί true, εκτελείται το σώμα του βρόχου. Εάν όχι - παραλείπεται. Κάθε whileβρόχος μπορεί να αντικατασταθεί με forκαι αντίστροφα.

Βελτιστοποιήσεις

// original loop var j = 0; while (j < items.length){ process(items[j++]); } // minimizing property lookups var j = 0, count = items.length; while (j < count){ process(items[j++]); } // minimizing property lookups and reversing var j = items.length; while (j--){ process(items[j]); }

Βρόχος Do-While

do-whileείναι ο τρίτος τύπος βρόχου και είναι ο μόνος βρόχος μετά τη δοκιμή σε JavaScript. Αποτελείται από βρόχο σώματος και κατάσταση μετά τη δοκιμή:

var i = 0; do { //loop body } while (i++ < 10);

Ανατομή

Σε αυτόν τον τύπο βρόχου, το σώμα του βρόχου εκτελείται πάντα τουλάχιστον μία φορά. Στη συνέχεια, αξιολογείται η κατάσταση μετά τη δοκιμή και, εάν είναι true, εκτελείται ένας άλλος κύκλος βρόχου.

Βελτιστοποιήσεις

// original loop var k = 0; do { process(items[k++]); } while (k < items.length); // minimizing property lookups var k = 0, num = items.length; do { process(items[k++]); } while (k < num); // minimizing property lookups and reversing var k = items.length - 1; do { process(items[k]); } while (k--);

Βρόχος εισόδου

Ο τέταρτος και τελευταίος τύπος βρόχου ονομάζεται for-inβρόχος.Έχει έναν πολύ ειδικό σκοπό - απαριθμεί τις ονομαστικές ιδιότητες οποιουδήποτε αντικειμένου JavaScript. Εδώ είναι πώς φαίνεται:

for (var prop in object){ //loop body }

Ανατομή

Είναι παρόμοιο με τον κανονικόfor βρόχο μόνο με το όνομά του. Ο τρόπος που λειτουργεί είναι εντελώς διαφορετικός. Και αυτή η διαφορά το καθιστά πολύ πιο αργό από τους άλλους τρεις βρόχους, οι οποίοι έχουν ισοδύναμα χαρακτηριστικά απόδοσης, ώστε να μην είναι χρήσιμο να προσπαθήσουμε να προσδιορίσουμε ποια είναι η ταχύτερη.

Κάθε φορά που εκτελείται ο βρόχος, η μεταβλητή propέχει το όνομα μιας άλλης ιδιότητας, η οποία είναι μια συμβολοσειρά , στο object.It θα εκτελεστεί έως ότου επιστραφούν όλες οι ιδιότητες. Αυτές θα ήταν οι ιδιότητες του ίδιου του αντικειμένου, καθώς και αυτές που κληρονομήθηκαν μέσω της πρωτότυπης αλυσίδας του.

Σημειώσεις

Δεν πρέπει ποτέ να χρησιμοποιείτε το " for-in”για να επαναλάβετε τα μέλη ενός πίνακα .

Κάθε επανάληψη μέσω αυτού του βρόχου προκαλεί αναζήτηση ιδιοτήτων είτε στην παρουσία είτε στο πρωτότυπο, γεγονός που καθιστά τον for-inβρόχο πολύ πιο αργό από τους άλλους βρόχους. Για τον ίδιο αριθμό επαναλήψεων, θα μπορούσε να είναι επτά φορές πιο αργό από το υπόλοιπο.

συμπέρασμα

  • Η for, whileκαι do-whileθηλιές όλα έχουν παρόμοια χαρακτηριστικά απόδοσης, και έτσι κανείς δεν τύπος βρόχου είναι σημαντικά ταχύτερη ή βραδύτερη από ό, τι τα άλλα.
  • Αποφύγετε τον for-inβρόχο, εκτός εάν χρειαστεί να επαναλάβετε πολλές άγνωστες ιδιότητες αντικειμένων.
  • Οι καλύτεροι τρόποι για να βελτιώσετε την απόδοση του βρόχου είναι να μειώσετε τον αριθμό των εργασιών που πραγματοποιούνται ανά επανάληψη και να μειώσετε τον αριθμό των επαναλήψεων βρόχου .

Ελπίζω να ήταν χρήσιμο για σένα, όπως και για μένα!

Ευχαριστώ για την ανάγνωση.

Πόροι

"Υψηλής απόδοσης JavaScript" - Nicholas C. Zakas

Διαβάστε περισσότερα από τα άρθρα μου στο mihail-gaberov.eu.