Σε αυτόν τον οδηγό, θα σας δείξω πώς να χρησιμοποιήσετε το εργαλείο Profiler στα Εργαλεία ανάπτυξης του Chrome για να εντοπίσετε και να βελτιστοποιήσετε τα σημεία συμφόρησης της απόδοσης στον κώδικα JavaScript σας. Ο βελτιστοποιημένος κώδικας όχι μόνο βελτιώνει την εμπειρία του χρήστη, αλλά μπορεί επίσης να μειώσει σημαντικά τους χρόνους φόρτωσης του ιστότοπού σας. Αφού επεξεργαστείτε αυτόν τον οδηγό, θα είστε σε θέση να αναλύετε καλύτερα τις διαδικτυακές σας εφαρμογές, να εντοπίζετε τις αδυναμίες και να αναλαμβάνετε τα κατάλληλα μέτρα για τη βελτίωσή τους.
Βασικά συμπεράσματα
- Το εργαλείο Profiler είναι απαραίτητο για την ανάλυση των επιδόσεων των εφαρμογών ιστού.
- Μπορείτε να ανακτήσετε λεπτομερείς πληροφορίες σχετικά με την εκτέλεση σεναρίων, την απόδοση και την κατανάλωση μνήμης.
- Οι στοχευμένες καταγραφές σας επιτρέπουν να αξιολογήσετε την απόδοση της εφαρμογής σας σε διάφορα σενάρια χρήσης.
Οδηγός βήμα προς βήμα
Βήμα 1: Πρόσβαση στο εργαλείο profiler
Για να χρησιμοποιήσετε το εργαλείο profiler στα Εργαλεία ανάπτυξης του Chrome, ανοίξτε πρώτα τα εργαλεία ανάπτυξης πατώντας F12 ή κάνοντας δεξί κλικ στη σελίδα και επιλέγοντας "Εξερεύνηση". Θα βρείτε διάφορες καρτέλες στο επάνω μενού. Κάντε κλικ στην καρτέλα "Απόδοση", η οποία βρίσκεται εξ ορισμού δίπλα στην καρτέλα "Δίκτυο".
Βήμα 2: Ξεκινήστε μια εγγραφή
Για να ξεκινήσετε μια εγγραφή επιδόσεων, μπορείτε είτε να επαναφορτώσετε τη σελίδα ενώ η εγγραφή είναι ενεργή είτε να χρησιμοποιήσετε τη χειροκίνητη εγγραφή. Για να ξεκινήσετε απευθείας την καταγραφή προφίλ, κάντε κλικ στο κουμπί "Start profiling and reload page" (Έναρξη καταγραφής προφίλ και επαναφόρτωση σελίδας). Αυτό είναι ιδιαίτερα χρήσιμο εάν έχετε μια σύνθετη σελίδα που περιέχει πολλά σενάρια που πρέπει να βελτιστοποιηθούν.
Βήμα 3: Διακοπή της εγγραφής
Εάν πιστεύετε ότι έχετε συλλέξει αρκετά δεδομένα, μπορείτε να σταματήσετε την καταγραφή χειροκίνητα. Για να το κάνετε αυτό, απλώς κάντε κλικ στο κουμπί Stop (Διακοπή) στην καρτέλα Performance (Απόδοση). Τώρα θα λάβετε μια οπτική επισκόπηση των δεδομένων επιδόσεων που καταγράφηκαν κατά τη φόρτωση και την απόδοση της σελίδας σας.
Βήμα 4: Ανάλυση των δεδομένων επιδόσεων
Μόλις σταματήσει η εγγραφή, θα δείτε μια γραφική αναπαράσταση του αρχείου καταγραφής επιδόσεων. Αυτό δείχνει το χρονικό ιστορικό των διαφόρων δραστηριοτήτων, συμπεριλαμβανομένης της φόρτωσης, της απόδοσης και της σχεδίασης της σελίδας. Μπορείτε να προσαρμόσετε την προβολή κάνοντας ζουμ για να λάβετε πιο λεπτομερείς πληροφορίες ή για να αναλύσετε συγκεκριμένες χρονικές περιόδους.
Βήμα 5: Αναλύστε λεπτομερώς το χρόνο σεναρίων
Για να αναλύσετε λεπτομερέστερα τα δεδομένα επιδόσεων, ρίξτε μια ματιά στην ενότητα "Scripting", η οποία δείχνει πόσος χρόνος δαπανήθηκε για την εκτέλεση λειτουργιών JavaScript. Ιδιαίτερα μεγάλοι χρόνοι διάρκειας σε αυτή την περιοχή μπορεί να υποδεικνύουν μη αποδοτικό κώδικα. Μπορείτε να μεταβείτε στη συγκεκριμένη ενότητα για να δείτε ποια λειτουργία απαιτεί τον περισσότερο χρόνο.
Βήμα 6: Εντοπισμός προβλημάτων απόδοσης
Ένα άλλο κρίσιμο μέρος είναι ο χρόνος απόδοσης. Εδώ μπορείτε να εντοπίσετε πού δαπανάται ο περισσότερος χρόνος για τη διάταξη, τη ζωγραφική και τη σύνθεση. Η απόδοση για πολύ μεγάλο χρονικό διάστημα μπορεί να προκαλέσει την απόκριση της διεπαφής χρήστη με καθυστέρηση ή τη μη ομαλή απόδοση. Δώστε προσοχή στο αν υπάρχουν πολλά συμβάντα διάταξης ή ζωγραφικής και βελτιστοποιήστε τα, αν είναι απαραίτητο.
Βήμα 7: Ανάλυση της κατανάλωσης μνήμης
Μεταβείτε στην ενότητα "Μνήμη" στα δεδομένα επιδόσεων. Εδώ εμφανίζεται η κατανάλωση μνήμης της εφαρμογής σας κατά την εκτέλεση της δέσμης ενεργειών. Μια συνήθης αιτία προβλημάτων απόδοσης είναι η υπερβολική κατανάλωση μνήμης λόγω της δημιουργίας μεγάλων αντικειμένων ή πινάκων. Με τη συλλογή σκουπιδιών, μπορείτε να δείτε πόση μνήμη πραγματικά απελευθερώνεται.
Βήμα 8: Σύντομη σύνοψη των αποτελεσμάτων
Μόλις ολοκληρώσετε την ανάλυση, συγκεντρώστε τα ευρήματα και σχεδιάστε τα επόμενα βήματα. Σκεφτείτε ποιες λειτουργίες κοστίζουν περισσότερο σε απόδοση και πού είναι δυνατές οι βελτιστοποιήσεις. Είναι χρήσιμο να εκτελείτε αυτά τα βήματα επαναληπτικά για να διασφαλίσετε ότι οι αλλαγές οδηγούν πράγματι σε αύξηση της απόδοσης.
Σύνοψη
Σε αυτόν τον οδηγό, μάθατε πώς να χρησιμοποιείτε το εργαλείο Profiler στα Εργαλεία Προγραμματιστή του Chrome για να αναλύετε την απόδοση του κώδικα JavaScript. Είδατε πώς να ξεκινάτε καταγραφές, να αναλύετε τα δεδομένα που συλλέγονται και να εντοπίζετε ευπάθειες. Με τη συνεχή παρακολούθηση και βελτιστοποίηση, μπορείτε να βελτιώσετε σημαντικά την απόδοση των εφαρμογών σας.
Συχνές ερωτήσεις
Τι πρέπει να κάνω αν έχω εντοπίσει μια δυσχέρεια απόδοσης; Αναλύστε το συγκεκριμένο τμήμα κώδικα που προκαλεί τη δυσχέρεια και εξετάστε πώς μπορείτε να το βελτιστοποιήσετε, π.χ. μειώνοντας τον αριθμό των στοιχείων DOM ή βελτιστοποιώντας τους βρόχους.
Μπορώ να εξάγω τα δεδομένα επιδόσεων;Ναι, μπορείτε να εξάγετε τα δεδομένα επιδόσεων κάνοντας δεξί κλικ στην καταγραφή επιδόσεων και αποθηκεύοντας τα δεδομένα.
Πόσο συχνά πρέπει να ελέγχω τις επιδόσεις της εφαρμογής μου;Συνιστάται να ελέγχετε τακτικά τις επιδόσεις, ιδίως μετά από σημαντικές αλλαγές στον κώδικα ή στη διεπαφή χρήστη.
