Έξι καλύτερες πρακτικές jQuery για βελτιωμένη απόδοση

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

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

1. Lazy scripts φόρτωσης όταν χρειάζεται

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

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

$ .getScript ("scripts / gallery.js", επανάκληση); 

Είναι μια λειτουργία ajax που θα πάρει ένα μόνο αρχείο δέσμης ενεργειών όταν το θέλετε, αλλά σημειώστε ότι το αρχείο που ανακτήθηκε δεν είναι προσωρινά αποθηκευμένο. Για να ενεργοποιήσετε την προσωρινή αποθήκευση για getScript θα πρέπει να ενεργοποιήσετε το ίδιο για όλες τις αιτήσεις αιχμής. Μπορείτε να το κάνετε χρησιμοποιώντας τον παρακάτω κώδικα:

$ .ajaxSetup (cache: true). 

2. Αποφύγετε $ (παράθυρο) .load () αν το σενάριο σας δεν χρειάζεται υπο-πόρους της σελίδας

ο $ (έγγραφο) .ready () είναι ισοδύναμο με DOMContentLoaded (όπου DOMContentLoaded είναι διαθέσιμο) και $ (παράθυρο) .load () προς το Φορτώνω. Η πρώτη εκτοξεύεται όταν φορτώνεται το δικό DOM της σελίδας, αλλά όχι εξωτερικά στοιχεία όπως εικόνες και φύλλα στυλ. Το δεύτερο εκτοξεύεται όταν τα πάντα αποτελούνται από μια σελίδα, συμπεριλαμβανομένου του δικού του περιεχομένου και των υπο-πόρων του φορτώνονται.

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

Αλλά, αν αυτό δεν συμβαίνει, είναι καλύτερα να επιμείνουμε $ (έγγραφο) .ready () επειδή το jQuery το καλεί έτοιμος χειριστή συμβάντων αν χρησιμοποιείτε $ (έγγραφο) .ready () ή όχι, γι 'αυτό χρησιμοποιήστε το όταν μπορείτε.

3. Χρησιμοποιήστε το αποσπώ για την κατάργηση στοιχείων από το DOM που χρειάστηκε να αλλάξει.

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

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

jQuery's αποσπώ() μας επιτρέπει να καταργήσουμε ένα στοιχείο από τη σελίδα, είναι διαφορετικό από αφαιρώ() επειδή θα αποθηκεύσει τα δεδομένα που σχετίζονται με το στοιχείο για όταν πρέπει να προστεθεί στη σελίδα αργότερα. Ένα αποσπασμένο στοιχείο μπορεί στη συνέχεια να επιστραφεί στη σελίδα όταν έχει τροποποιηθεί.

4. Χρησιμοποιήστε css () για να ρυθμίσετε το ύψος ή το πλάτος αντί για ύψος() και πλάτος()

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

Για τον κώδικα p.height ("300px"). εδώ είναι οι ανατροφοδοτήσεις.

Για p.css ("ύψος": "300px");

computeStyleTests χρησιμοποιείται για ορισμένες δοκιμές υποστήριξης. Είναι επίσης ονομάζεται ενώ πάρει το ύψος και το πλάτος χρησιμοποιώντας και τα δυο css () και ύψος πλάτος() , αλλά σύνθεση είναι μόνο που ζητείται ύψος πλάτος() η οποία μπορεί να μην είναι απαραίτητη, έτσι χρησιμοποιήστε css () αντι αυτου.

5. Μην έχετε πρόσβαση στις ιδιότητες της διάταξης χωρίς λόγο

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

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

6. Χρησιμοποιήστε την προσωρινή αποθήκευση όπου μπορείτε

Ορισμένες από τις λειτουργίες του jQuery έρχονται με μηχανισμούς προσωρινής αποθήκευσης που μπορούν να χρησιμοποιηθούν σωστά. Τα αιτήματα του Ajax αποθηκεύουν προσωρινά τους πόρους, αλλά δεν είναι διαθέσιμα γραφή και jsonp, οπότε αν θέλετε να αποθηκεύσετε προσωρινά δεδομένα σε όλα τα αιτήματα σας ajax, ίσως να θέλετε να το ορίσετε παγκοσμίως όπως παρακάτω.

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

Όπως ανέφερα προηγουμένως, αποσπώ() αποθηκεύει τα δεδομένα που σχετίζονται με το στοιχείο που πρόκειται να αφαιρεθεί αντίθετα αφαιρώ().κρύβω() αποθηκεύει το αρχικό CSS απεικόνιση αξία ενός στοιχείου πριν από την απόκρυψη του, ώστε να μπορεί να αποκατασταθεί αργότερα χωρίς να χάσει τα δεδομένα.

συμπέρασμα

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

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