10 Συμβουλές και κόλπα JavaScript για βελτιστοποίηση της απόδοσης

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

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

1. Ορισμός μεταβλητών τοπικά

Ως προγραμματιστής, πρέπει να ξέρεις πώς λειτουργεί το πεδίο εφαρμογής. Υπάρχουν δύο τύποι μεταβλητών στο JavaScript: τοπικές μεταβλητές και καθολικές μεταβλητές.

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

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

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

2. Φόρτωση JavaScript Ασύγχρονη

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

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

Οι κλήσεις API είναι τέλειες για το ασύγχρονο μοτίβο, επειδή χρειάζονται χρόνο για να επιλυθούν. Έτσι, αντί να κρατά το νήμα, θα χρησιμοποιούσατε μια βιβλιοθήκη βασισμένη σε υποσχέσεις, όπως το fetch API για να ανακτήσετε τα δεδομένα ασύγχρονα. Με αυτόν τον τρόπο, μπορεί να εκτελεστεί άλλος κώδικας ενώ το πρόγραμμα περιήγησης ανακτά δεδομένα από το API.

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

3. Αποφύγετε τους περιττούς βρόχους

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

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

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

4. Ελαχιστοποίηση κώδικα JavaScript

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

Παραδείγματα ελαχιστοποιητών είναι το Google Closure Compiler, το UglifyJS και το Microsoft AJAX minifier. Μπορείτε επίσης να ελαχιστοποιήσετε με μη αυτόματο τρόπο τον κώδικά σας επιθεωρώντας τον και αναζητώντας τρόπους βελτιστοποίησής του. Για παράδειγμα, μπορείτε απλοποιήστε τις δηλώσεις if στον κώδικά σας.

5. Συμπίεση μεγάλων αρχείων με Gzip

Οι περισσότεροι πελάτες χρησιμοποιήστε το Gzip για συμπίεση και αποσυμπίεση μεγάλα αρχεία JavaScript. Όταν ένα πρόγραμμα περιήγησης ζητά έναν πόρο, ο διακομιστής μπορεί να τον συμπιέσει για να επιστρέψει ένα μικρότερο αρχείο στην απάντηση. Όταν ο πελάτης λάβει το αρχείο, το αποσυμπιέζει. Συνολικά, αυτή η προσέγγιση εξοικονομεί εύρος ζώνης και μειώνει την καθυστέρηση, βελτιώνοντας την απόδοση της εφαρμογής.

6. Ελαχιστοποιήστε την πρόσβαση DOM

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

Μπορείτε επίσης να χρησιμοποιήσετε μια βιβλιοθήκη όπως το React που κάνει αλλαγές στο εικονικό DOM πριν τις προωθήσει στο πραγματικό DOM. Ως αποτέλεσμα, το πρόγραμμα περιήγησης ενημερώνει τα μέρη της εφαρμογής που χρειάζονται ενημέρωση, αντί να ανανεώνει ολόκληρη τη σελίδα.

7. Αναβολή περιττού φορτίου JavaScript

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

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

Μπορείτε επίσης να συμπεριλάβετε τη μικρότερη ποσότητα CSS και JavaScript στο στοιχείο κεφαλής σας, ώστε να φορτώνεται αμέσως. Ο δευτερεύων κώδικας μπορεί στη συνέχεια να βρίσκεται σε ξεχωριστά αρχεία .css και .js. Αυτή η τεχνική απαιτεί αξιοπρεπή γνώση πώς λειτουργεί το DOM.

8. Χρησιμοποιήστε ένα CDN για τη φόρτωση JavaScript

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

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

9. Αφαιρέστε τις διαρροές μνήμης

Οι διαρροές μνήμης μπορούν να επηρεάσουν αρνητικά την απόδοση μιας εφαρμογής. Διαρροές συμβαίνουν όταν η φορτωμένη σελίδα καταλαμβάνει όλο και περισσότερη μνήμη.

Ένα παράδειγμα διαρροής μνήμης είναι όταν το πρόγραμμα περιήγησής σας αρχίζει να επιβραδύνει μετά από μια μακρά περίοδο εργασίας με την εφαρμογή.

Μπορείτε να χρησιμοποιήσετε τα Εργαλεία προγραμματιστή του Chrome για να εντοπίσετε διαρροές μνήμης στην εφαρμογή σας. Το εργαλείο καταγράφει τη γραμμή χρόνου στην καρτέλα απόδοση. Πολλές διαρροές μνήμης συμβαίνουν ως αποτέλεσμα της αφαίρεσης στοιχείων DOM. Ο συλλέκτης απορριμμάτων θα απελευθερώσει μνήμη μόνο όταν όλες οι μεταβλητές που αναφέρονται σε αυτά τα στοιχεία είναι εκτός πεδίου εφαρμογής.

Εργαλεία όπως το Lighthouse, το Google PageSpeed ​​Insights και το Chrome μπορούν να σας βοηθήσουν να εντοπίσετε προβλήματα. Το Lighthouse ελέγχει για ζητήματα προσβασιμότητας, απόδοσης και SEO. Το Google PageSpeed ​​μπορεί να σας βοηθήσει να βελτιστοποιήσετε το JavaScript για να βελτιώσετε την απόδοση της εφαρμογής σας.

Το πρόγραμμα περιήγησης Chrome παρέχει μια λειτουργία Εργαλεία προγραμματιστή την οποία μπορείτε να αλλάξετε κάνοντας κλικ στο F12 στη λέξη-κλειδί σας. Μπορείτε να χρησιμοποιήσετε την ανάλυση απόδοσης για να ενεργοποιήσετε και να απενεργοποιήσετε το δίκτυο και να ελέγξετε την κατανάλωση CPU. Ελέγχει επίσης άλλες μετρήσεις για να αποκαλύψει προβλήματα που επηρεάζουν τον ιστότοπό σας.

Ως προγραμματιστής ιστού, θα εργάζεστε πολύ στο πρόγραμμα περιήγησής σας. Τα περισσότερα προγράμματα περιήγησης διαθέτουν μια σειρά εργαλείων προγραμματιστών για να σας βοηθήσουν στην αντιμετώπιση προβλημάτων ιστοτόπων. Η λειτουργία Εργαλεία προγραμματιστή του Google Chromes έχει πολλές λειτουργίες για να σας βοηθήσει.