# Έργο Επέκτασης Περιηγητή Μέρος 3: Μάθετε για τις Εργασίες Υποβάθρου και την Απόδοση Έχετε αναρωτηθεί ποτέ τι κάνει κάποιες επεκτάσεις περιηγητή να φαίνονται γρήγορες και ευέλικτες, ενώ άλλες φαίνονται αργές; Το μυστικό βρίσκεται σε όσα συμβαίνουν πίσω από τις σκηνές. Ενώ οι χρήστες κάνουν κλικ στη διεπαφή της επέκτασής σας, υπάρχει ένας ολόκληρος κόσμος διεργασιών υποβάθρου που διαχειρίζεται ήσυχα την ανάκτηση δεδομένων, τις ενημερώσεις εικονιδίων και τους πόρους του συστήματος. Αυτό είναι το τελευταίο μας μάθημα στη σειρά επεκτάσεων περιηγητή, και θα κάνουμε τον ανιχνευτή αποτυπώματος άνθρακα σας να λειτουργεί ομαλά. Θα προσθέσετε δυναμικές ενημερώσεις εικονιδίων και θα μάθετε πώς να εντοπίζετε προβλήματα απόδοσης πριν γίνουν προβλήματα. Είναι σαν να ρυθμίζετε ένα αγωνιστικό αυτοκίνητο - μικρές βελτιστοποιήσεις μπορούν να κάνουν τεράστια διαφορά στο πώς λειτουργούν όλα. Μέχρι να τελειώσουμε, θα έχετε μια καλοδουλεμένη επέκταση και θα κατανοείτε τις αρχές απόδοσης που ξεχωρίζουν τις καλές εφαρμογές ιστού από τις εξαιρετικές. Ας βουτήξουμε στον κόσμο της βελτιστοποίησης περιηγητή. ## Ερωτηματολόγιο Πριν το Μάθημα [Ερωτηματολόγιο πριν το μάθημα](https://ff-quizzes.netlify.app/web/quiz/27) ### Εισαγωγή Στα προηγούμενα μαθήματα, δημιουργήσατε μια φόρμα, τη συνδέσατε με ένα API και αντιμετωπίσατε την ασύγχρονη ανάκτηση δεδομένων. Η επέκτασή σας παίρνει ωραία μορφή. Τώρα πρέπει να προσθέσουμε τις τελευταίες πινελιές - όπως να κάνουμε το εικονίδιο της επέκτασης να αλλάζει χρώματα με βάση τα δεδομένα άνθρακα. Αυτό μου θυμίζει πώς η NASA έπρεπε να βελτιστοποιήσει κάθε σύστημα στο διαστημόπλοιο Apollo. Δεν μπορούσαν να αντέξουν χαμένες διεργασίες ή μνήμη γιατί η απόδοση ήταν ζωτικής σημασίας. Ενώ η επέκταση του περιηγητή μας δεν είναι τόσο κρίσιμη, οι ίδιες αρχές ισχύουν - ο αποδοτικός κώδικας δημιουργεί καλύτερες εμπειρίες χρήστη. ## Βασικά της Απόδοσης Ιστού Όταν ο κώδικάς σας λειτουργεί αποδοτικά, οι άνθρωποι μπορούν πραγματικά να *αισθανθούν* τη διαφορά. Ξέρετε εκείνη τη στιγμή που μια σελίδα φορτώνει αμέσως ή μια κίνηση ρέει ομαλά; Αυτή είναι η καλή απόδοση σε δράση. Η απόδοση δεν αφορά μόνο την ταχύτητα - αφορά τη δημιουργία εμπειριών ιστού που αισθάνονται φυσικές αντί για αδέξιες και απογοητευτικές. Στις πρώτες μέρες της πληροφορικής, η Grace Hopper κρατούσε ένα νανοδευτερόλεπτο (ένα κομμάτι σύρμα περίπου ένα πόδι μακρύ) στο γραφείο της για να δείξει πόσο μακριά ταξιδεύει το φως σε ένα δισεκατομμυριοστό του δευτερολέπτου. Ήταν ο τρόπος της να εξηγήσει γιατί κάθε μικροδευτερόλεπτο έχει σημασία στην πληροφορική. Ας εξερευνήσουμε τα εργαλεία ανίχνευσης που σας βοηθούν να καταλάβετε τι επιβραδύνει τα πράγματα. > "Η απόδοση ιστοσελίδας αφορά δύο πράγματα: πόσο γρήγορα φορτώνει η σελίδα και πόσο γρήγορα εκτελείται ο κώδικας σε αυτήν." -- [Zack Grossbart](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/) Το θέμα του πώς να κάνετε τις ιστοσελίδες σας εξαιρετικά γρήγορες σε κάθε είδους συσκευές, για κάθε είδους χρήστες, σε κάθε είδους καταστάσεις, είναι αναμενόμενα εκτενές. Ακολουθούν ορισμένα σημεία που πρέπει να έχετε υπόψη σας καθώς δημιουργείτε είτε ένα τυπικό έργο ιστού είτε μια επέκταση περιηγητή. Το πρώτο βήμα για τη βελτιστοποίηση του ιστότοπού σας είναι να κατανοήσετε τι συμβαίνει πραγματικά κάτω από την επιφάνεια. Ευτυχώς, ο περιηγητής σας διαθέτει ισχυρά εργαλεία ανίχνευσης ενσωματωμένα. Για να ανοίξετε τα Εργαλεία Προγραμματιστή στο Edge, κάντε κλικ στις τρεις τελείες πάνω δεξιά, στη συνέχεια πηγαίνετε στα Περισσότερα Εργαλεία > Εργαλεία Προγραμματιστή. Ή χρησιμοποιήστε τη συντόμευση πληκτρολογίου: `Ctrl` + `Shift` + `I` στα Windows ή `Option` + `Command` + `I` στο Mac. Μόλις φτάσετε εκεί, κάντε κλικ στην καρτέλα Απόδοση - εδώ θα κάνετε την έρευνά σας. **Ακολουθεί το εργαλείο ανίχνευσης απόδοσης:** - **Ανοίξτε** τα Εργαλεία Προγραμματιστή (θα τα χρησιμοποιείτε συνεχώς ως προγραμματιστής!) - **Πηγαίνετε** στην καρτέλα Απόδοση - σκεφτείτε το σαν το fitness tracker της εφαρμογής σας - **Πατήστε** το κουμπί Εγγραφή και παρακολουθήστε τη σελίδα σας σε δράση - **Μελετήστε** τα αποτελέσματα για να εντοπίσετε τι επιβραδύνει τα πράγματα Ας το δοκιμάσουμε. Ανοίξτε έναν ιστότοπο (το Microsoft.com λειτουργεί καλά για αυτό) και κάντε κλικ στο κουμπί 'Εγγραφή'. Τώρα ανανεώστε τη σελίδα και παρακολουθήστε τον profiler να καταγράφει όλα όσα συμβαίνουν. Όταν σταματήσετε την εγγραφή, θα δείτε μια λεπτομερή ανάλυση του πώς ο περιηγητής 'σενάρια', 'αποδίδει' και 'ζωγραφίζει' τον ιστότοπο. Μου θυμίζει πώς το κέντρο ελέγχου παρακολουθεί κάθε σύστημα κατά την εκτόξευση πυραύλου - έχετε δεδομένα σε πραγματικό χρόνο για το τι συμβαίνει και πότε.  ✅ Η [Τεκμηρίωση της Microsoft](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) έχει πολλές περισσότερες λεπτομέρειες αν θέλετε να εμβαθύνετε. > Συμβουλή: Καθαρίστε την προσωρινή μνήμη του περιηγητή σας πριν από τη δοκιμή για να δείτε πώς αποδίδει ο ιστότοπός σας για επισκέπτες που τον επισκέπτονται για πρώτη φορά - συνήθως είναι αρκετά διαφορετικό από τις επαναλαμβανόμενες επισκέψεις! Επιλέξτε στοιχεία της χρονογραμμής προφίλ για να εστιάσετε σε γεγονότα που συμβαίνουν ενώ φορτώνει η σελίδα σας. Πάρτε ένα στιγμιότυπο της απόδοσης της σελίδας σας επιλέγοντας ένα μέρος της χρονογραμμής προφίλ και κοιτάζοντας το παράθυρο σύνοψης:  Ελέγξτε το παράθυρο καταγραφής συμβάντων για να δείτε αν κάποιο συμβάν πήρε περισσότερο από 15 ms:  ✅ Γνωρίστε τον profiler σας! Ανοίξτε τα εργαλεία προγραμματιστή σε αυτόν τον ιστότοπο και δείτε αν υπάρχουν σημεία συμφόρησης. Ποιο είναι το πιο αργό φορτωμένο στοιχείο; Το πιο γρήγορο; ## Τι να Αναζητήσετε Κατά την Ανάλυση Η εκτέλεση του profiler είναι μόνο η αρχή - η πραγματική δεξιότητα είναι να γνωρίζετε τι σας λένε αυτά τα πολύχρωμα γραφήματα. Μην ανησυχείτε, θα συνηθίσετε να τα διαβάζετε. Οι έμπειροι προγραμματιστές έχουν μάθει να εντοπίζουν τα προειδοποιητικά σημάδια πριν γίνουν πλήρη προβλήματα. Ας μιλήσουμε για τους συνήθεις ύποπτους - τους προβληματικούς παράγοντες απόδοσης που τείνουν να εισχωρούν σε έργα ιστού. Όπως η Marie Curie έπρεπε να παρακολουθεί προσεκτικά τα επίπεδα ακτινοβολίας στο εργαστήριό της, πρέπει να παρακολουθούμε ορισμένα μοτίβα που υποδεικνύουν ότι κάτι δεν πάει καλά. Η έγκαιρη ανίχνευση αυτών θα σας γλιτώσει (και τους χρήστες σας) από πολλή απογοήτευση. **Μεγέθη στοιχείων**: Οι ιστότοποι έχουν γίνει "βαρύτεροι" με τα χρόνια, και μεγάλο μέρος αυτού του επιπλέον βάρους προέρχεται από εικόνες. Είναι σαν να γεμίζουμε όλο και περισσότερο τις ψηφιακές μας βαλίτσες. ✅ Ελέγξτε το [Internet Archive](https://httparchive.org/reports/page-weight) για να δείτε πώς έχουν αυξηθεί τα μεγέθη σελίδων με την πάροδο του χρόνου - είναι αρκετά αποκαλυπτικό. **Πώς να διατηρήσετε τα στοιχεία σας βελτιστοποιημένα:** - **Συμπιέστε** αυτές τις εικόνες! Σύγχρονες μορφές όπως το WebP μπορούν να μειώσουν δραματικά τα μεγέθη αρχείων - **Εξυπηρετήστε** το σωστό μέγεθος εικόνας για κάθε συσκευή - δεν χρειάζεται να στείλετε τεράστιες εικόνες για επιτραπέζιους υπολογιστές σε τηλέφωνα - **Ελαχιστοποιήστε** το CSS και το JavaScript σας - κάθε byte μετράει - **Χρησιμοποιήστε** την καθυστερημένη φόρτωση ώστε οι εικόνες να κατεβαίνουν μόνο όταν οι χρήστες τις βλέπουν **Περιηγήσεις DOM**: Ο περιηγητής πρέπει να δημιουργήσει το Μοντέλο Αντικειμένου Εγγράφου (DOM) με βάση τον κώδικα που γράφετε, οπότε είναι προς το συμφέρον της καλής απόδοσης σελίδας να διατηρείτε τις ετικέτες σας ελάχιστες, χρησιμοποιώντας και στιλάρωντας μόνο ό,τι χρειάζεται η σελίδα. Για αυτό το θέμα, το υπερβολικό CSS που σχετίζεται με μια σελίδα θα μπορούσε να βελτιστοποιηθεί; Στιλ που χρειάζονται μόνο σε μία σελίδα δεν χρειάζεται να περιλαμβάνονται στο κύριο φύλλο στυλ, για παράδειγμα. **Βασικές στρατηγικές για βελτιστοποίηση DOM:** - **Ελαχιστοποιήστε** τον αριθμό των στοιχείων HTML και των επιπέδων φωλιάσματος - **Αφαιρέστε** αχρησιμοποίητους κανόνες CSS και ενοποιήστε αποτελεσματικά τα φύλλα στυλ - **Οργανώστε** το CSS ώστε να φορτώνει μόνο ό,τι χρειάζεται για κάθε σελίδα - **Δομήστε** το HTML με σημασιολογικό τρόπο για καλύτερη ανάλυση από τον περιηγητή **JavaScript**: Κάθε προγραμματιστής JavaScript πρέπει να προσέχει τα 'σενάρια που μπλοκάρουν την απόδοση', τα οποία πρέπει να φορτωθούν πριν το υπόλοιπο DOM μπορεί να αναλυθεί και να ζωγραφιστεί στον περιηγητή. Σκεφτείτε να χρησιμοποιήσετε `defer` με τα ενσωματωμένα σενάριά σας (όπως γίνεται στη μονάδα Terrarium). **Σύγχρονες τεχνικές βελτιστοποίησης JavaScript:** - **Χρησιμοποιήστε** το χαρακτηριστικό `defer` για να φορτώσετε σενάρια μετά την ανάλυση του DOM - **Εφαρμόστε** διαχωρισμό κώδικα για να φορτώσετε μόνο την απαραίτητη JavaScript - **Χρησιμοποιήστε** καθυστερημένη φόρτωση για μη κρίσιμες λειτουργίες - **Ελαχιστοποιήστε** τη χρήση βαριών βιβλιοθηκών και πλαισίων όπου είναι δυνατόν ✅ Δοκιμάστε μερικούς ιστότοπους σε έναν [ιστότοπο δοκιμής ταχύτητας](https://www.webpagetest.org/) για να μάθετε περισσότερα σχετικά με τους συνήθεις ελέγχους που γίνονται για να προσδιοριστεί η απόδοση του ιστότοπου. Τώρα που έχετε μια ιδέα για το πώς ο περιηγητής αποδίδει τα στοιχεία που του στέλνετε, ας δούμε τα τελευταία πράγματα που πρέπει να κάνετε για να ολοκληρώσετε την επέκτασή σας: ### Δημιουργήστε μια συνάρτηση για τον υπολογισμό χρώματος Τώρα θα δημιουργήσουμε μια συνάρτηση που μετατρέπει αριθμητικά δεδομένα σε χρώματα με νόημα. Σκεφτείτε το σαν ένα σύστημα φωτεινού σηματοδότη - πράσινο για καθαρή ενέργεια, κόκκινο για υψηλή ένταση άνθρακα. Αυτή η συνάρτηση θα πάρει τα δεδομένα CO2 από το API μας και θα καθορίσει ποιο χρώμα αντιπροσωπεύει καλύτερα την περιβαλλοντική επίπτωση. Είναι παρόμοιο με το πώς οι επιστήμονες χρησιμοποιούν χρωματική κωδικοποίηση σε θερμικούς χάρτες για να οπτικοποιήσουν σύνθετα μοτίβα δεδομένων - από θερμοκρασίες ωκεανών έως σχηματισμό αστέρων. Ας το προσθέσουμε στο `/src/index.js`, ακριβώς μετά από αυτές τις μεταβλητές `const` που ορίσαμε νωρίτερα: ```javascript function calculateColor(value) { // Define CO2 intensity scale (grams per kWh) const co2Scale = [0, 150, 600, 750, 800]; // Corresponding colors from green (clean) to dark brown (high carbon) const colors = ['#2AA364', '#F5EB4D', '#9E4229', '#381D02', '#381D02']; // Find the closest scale value to our input const closestNum = co2Scale.sort((a, b) => { return Math.abs(a - value) - Math.abs(b - value); })[0]; console.log(`${value} is closest to ${closestNum}`); // Find the index for color mapping const num = (element) => element > closestNum; const scaleIndex = co2Scale.findIndex(num); const closestColor = colors[scaleIndex]; console.log(scaleIndex, closestColor); // Send color update message to background script chrome.runtime.sendMessage({ action: 'updateIcon', value: { color: closestColor } }); } ``` **Ας αναλύσουμε αυτήν την έξυπνη μικρή συνάρτηση:** - **Ορίζει** δύο πίνακες - έναν για τα επίπεδα CO2, έναν για τα χρώματα (πράσινο = καθαρό, καφέ = βρώμικο!) - **Βρίσκει** την πιο κοντινή αντιστοιχία στην πραγματική τιμή CO2 μας χρησιμοποιώντας κάποια έξυπνη ταξινόμηση πίνακα - **Παίρνει** το αντίστοιχο χρώμα χρησιμοποιώντας τη μέθοδο findIndex() - **Στέλνει** ένα μήνυμα στο σενάριο υποβάθρου του Chrome με το επιλεγμένο χρώμα μας - **Χρησιμοποιεί** πρότυπα συμβολοσειρών (αυτά τα backticks) για καθαρότερη μορφοποίηση συμβολοσειρών - **Κρατά** τα πάντα οργανωμένα με δηλώσεις const Το `chrome.runtime` [API](https://developer.chrome.com/extensions/runtime) είναι σαν το νευρικό σύστημα της επέκτασής σας - διαχειρίζεται όλη την επικοινωνία και τις εργασίες πίσω από τις σκηνές: > "Χρησιμοποιήστε το API chrome.runtime για να ανακτήσετε τη σελίδα υποβάθρου, να επιστρέψετε λεπτομέρειες σχετικά με το manifest και να ακούσετε και να απαντήσετε σε γεγονότα στον κύκλο ζωής της εφαρμογής ή της επέκτασης. Μπορείτε επίσης να χρησιμοποιήσετε αυτό το API για να μετατρέψετε τη σχετική διαδρομή των URL σε πλήρως προσδιορισμένα URL." **Γιατί το Chrome Runtime API είναι τόσο χρήσιμο:** - **Επιτρέπει** στα διάφορα μέρη της επέκτασής σας να επικοινωνούν μεταξύ τους - **Διαχειρίζεται** την εργασία υποβάθρου χωρίς να παγώνει τη διεπαφή χρήστη - **Διαχειρίζεται** τα γεγονότα κύκλου ζωής της επέκτασής σας - **Κάνει** τη μεταφορά μηνυμάτων μεταξύ σεναρίων εξαιρετικά εύκολη ✅ Αν αναπτύσσετε αυτήν την επέκταση περιηγητή για το Edge, μπορεί να σας εκπλήξει ότι χρησιμοποιείτε ένα API του Chrome. Οι νεότερες εκδόσεις του περιηγητή Edge λειτουργούν στη μηχανή περιηγητή Chromium, οπότε μπορείτε να αξιοποιήσετε αυτά τα εργαλεία. > **Συμβουλή**: Αν θέλετε να αναλύσετε την απόδοση μιας επέκτασης περιηγητή, ανοίξτε τα εργαλεία προγραμματιστή από την ίδια την επέκταση, καθώς είναι μια ξεχωριστή περίπτωση περιηγητή. Αυτό σας δίνει πρόσβαση σε μετρήσεις απόδοσης που είναι ειδικές για την επέκταση. ### Ο Ακολουθεί μια ενδιαφέρουσα αποστολή ντετέκτιβ: επιλέξτε μερικές ιστοσελίδες ανοιχτού κώδικα που υπάρχουν εδώ και χρόνια (σκεφτείτε Wikipedia, GitHub ή Stack Overflow) και εξετάστε το ιστορικό των commits τους. Μπορείτε να εντοπίσετε πού έκαναν βελτιώσεις στην απόδοση; Ποια προβλήματα εμφανίζονταν συνεχώς; **Προσέγγιση για την έρευνά σας:** - **Αναζητήστε** μηνύματα commit με λέξεις όπως "optimize," "performance," ή "faster" - **Παρατηρήστε** μοτίβα - διορθώνουν συνεχώς τα ίδια είδη προβλημάτων; - **Εντοπίστε** τους συνήθεις "ενόχους" που επιβραδύνουν τις ιστοσελίδες - **Μοιραστείτε** όσα ανακαλύψετε - άλλοι προγραμματιστές μαθαίνουν από παραδείγματα πραγματικού κόσμου ## Κουίζ μετά το μάθημα [Κουίζ μετά το μάθημα](https://ff-quizzes.netlify.app/web/quiz/28) ## Ανασκόπηση & Αυτομελέτη Σκεφτείτε να εγγραφείτε σε ένα [newsletter για την απόδοση](https://perf.email/) Ερευνήστε μερικούς από τους τρόπους που οι browsers αξιολογούν την απόδοση ιστοσελίδων, εξετάζοντας τις καρτέλες απόδοσης στα εργαλεία τους. Βρίσκετε σημαντικές διαφορές; ## Εργασία [Αναλύστε μια ιστοσελίδα για την απόδοση](assignment.md) --- **Αποποίηση ευθύνης**: Αυτό το έγγραφο έχει μεταφραστεί χρησιμοποιώντας την υπηρεσία αυτόματης μετάφρασης [Co-op Translator](https://github.com/Azure/co-op-translator). Παρόλο που καταβάλλουμε προσπάθειες για ακρίβεια, παρακαλούμε να έχετε υπόψη ότι οι αυτόματες μεταφράσεις ενδέχεται να περιέχουν λάθη ή ανακρίβειες. Το πρωτότυπο έγγραφο στη μητρική του γλώσσα θα πρέπει να θεωρείται η αυθεντική πηγή. Για κρίσιμες πληροφορίες, συνιστάται επαγγελματική ανθρώπινη μετάφραση. Δεν φέρουμε ευθύνη για τυχόν παρεξηγήσεις ή εσφαλμένες ερμηνείες που προκύπτουν από τη χρήση αυτής της μετάφρασης.