53. JS Performance

Απόδοση JavaScript


Πώς να επιταχύνετε τον κώδικα JavaScript.


Μειώστε τη δραστηριότητα σε βρόχους

Οι βρόχοι χρησιμοποιούνται συχνά στον προγραμματισμό.

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

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

Κακός κώδικας:

var i;
for (i = 0; i < arr.length; i++) {

Καλύτερος κώδικας:

var i;
var l = arr.length;
for (i = 0; i < l; i++) {

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

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


Μειώστε την πρόσβαση DOM

Η πρόσβαση στο DOM του HTML είναι πολύ αργή, σε σύγκριση με άλλες δηλώσεις JavaScript.

Αν περιμένετε να έχετε πρόσβαση σε ένα στοιχείο DOM αρκετές φορές, να κάνετε πρόσβαση μία φορά και να το χρησιμοποιήσετε ως τοπική μεταβλητή:

Παράδειγμα

var obj;
obj = document.getElementById("demo");
obj.innerHTML = "Hello";

Δοκιμάστε τον εαυτό σας »


Μειώστε το μέγεθος DOM

Διατηρήστε μικρό αριθμό στοιχείων στο HTML DOM.

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

Κάθε προσπάθεια αναζήτησης στο DOM (όπως το getElementsByTagName) θα επωφεληθεί από ένα μικρότερο DOM.


Αποφύγετε τις περιττές μεταβλητές

Μην δημιουργείτε νέες μεταβλητές αν δεν σκοπεύετε να αποθηκεύσετε τιμές.

Συχνά μπορείτε να αντικαταστήσετε τον κώδικα ως εξής:

var fullName = firstName + " " + lastName;
document.getElementById("demo").innerHTML = fullName;

Με αυτό:

document.getElementById("demo").innerHTML = firstName + " " + lastName

Καθυστέρηση φόρτωσης JavaScript

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

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

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

Μια εναλλακτική λύση είναι να χρησιμοποιήσετε defer="true"στην ετικέτα script. Το χαρακτηριστικό defer καθορίζει ότι το σενάριο πρέπει να εκτελεστεί μετά την ολοκλήρωση της ανάλυσης της σελίδας, αλλά λειτουργεί μόνο για εξωτερικά scripts.

Εάν είναι δυνατόν, μπορείτε να προσθέσετε το script σας στη σελίδα με τον κώδικα, μετά τη φόρτωση της σελίδας:

Παράδειγμα

<script>
window.onload = function() {
  var element = document.createElement("script");
  element.src = "myScript.js";
  document.body.appendChild(element);
};
</script>

Αποφύγετε τη χρήση του with

Αποφύγετε τη χρήση της λέξης-κλειδιού with. Έχει αρνητική επίδραση στην ταχύτητα. Καταστέλλει επίσης τα πεδία JavaScript.

Η λέξη-κλειδί with δεν επιτρέπεται σε αυστηρή λειτουργία.

Days
Hours
Minutes

53. JS Performance

Κοινοποίηση

Share on facebook
Share on twitter

Ακολουθήστε μας

Αρέσει σε %d bloggers: