Τα δεδομένα και η προσωρινή αποθήκευση πάνε χέρι-χέρι για απόδοση
Καθώς οι εφαρμογές μας γίνονται μεγαλύτερες, η ανάγκη για απόδοση αυξάνεται. Η απόδοση μπορεί να επιτευχθεί με προσωρινή αποθήκευση. Αυτή είναι μια σημαντική στρατηγική για μόχλευση σε εφαρμογές web, επειδή η φόρτωση ιστοσελίδων απαιτεί χρόνο και πόρους. Όταν μειώνουμε το χρόνο και τους πόρους, οι εφαρμογές μας γίνονται πιο γρήγορες και πιο αποδοτικές. Επιπλέον, αυτό αυξάνει τα θετικά σχόλια στην εμπειρία χρήστη για τους χρήστες μας.
Η εμπειρία χρήστη είναι τεράστια και αξιοποιώντας την προσωρινή αποθήκευση μπορείτε να επιτύχετε σπουδαία πράγματα, όπως να βελτιώσετε την κατάταξη των αποτελεσμάτων αναζήτησής σας.
Σε αυτήν την ανάρτηση θα εξετάσουμε ισχυρούς τρόπους με τους οποίους η προσωρινή αποθήκευση μπορεί να βελτιώσει τον τρόπο που σκέφτεστε και γράφετε αποτελεσματικό κώδικα.
Η προσωρινή αποθήκευση μπορεί να χρησιμοποιηθεί για να "αναβιώσει" την εφαρμογή σας σε δύσκολους καιρούς
Όταν ο ιστότοπός σας καταχωρείται στο ευρετήριο στα αποτελέσματα αναζήτησης της Google, το Googlebot λαμβάνει ένα στιγμιότυπο κάθε φορά που τα ρομπότ ανιχνεύονται στον ιστότοπό σας. Όταν το κάνει αυτό, διατηρεί ένα "backup" του ιστότοπού σας. Αυτό ονομάζεται προσωρινή μνήμη Google.
Για παράδειγμα, εάν ο ιστότοπός σας παραβιάστηκε ή καταργήθηκε για κάποιο περίεργο λόγο, η Google συγκρίνει την εμφάνιση του τρέχοντος ιστότοπού σας με την τελευταία εμφάνιση. Εάν ο ιστότοπός σας ανταποκρίνεται με 404, τότε η Google είναι σε θέση να εξυπηρετήσει την τελευταία κατάσταση "λειτουργίας" του ιστότοπού σας από την κρυφή μνήμη του, εξοικονομώντας αποτελεσματικά τον ιστότοπό σας από το να προκαλέσει τους χρήστες να αναπηδήσουν κάπου αλλού.
Μπορούμε να μάθουμε από αυτό εφαρμόζοντας παρόμοιες τεχνικές, όπως η αποθήκευση στην κρυφή μνήμη των πόρων της εφαρμογής μας για να παρέχουμε μια εμπειρία εκτός σύνδεσης όταν ο χρήστης αποσυνδεθεί από το διαδίκτυο.
Εμπειρία εκτός σύνδεσης
Στον σύγχρονο κόσμο, οι εμπειρίες εκτός σύνδεσης για τους χρήστες έχουν γίνει πιο σημαντικές από ποτέ.
Για παράδειγμα, όταν οι χρήστες έχουν ενεργοποιημένη τη λειτουργία πτήσης, μπορούμε να τους παρέχουμε μια εμπειρία εκτός σύνδεσης, ώστε να μπορούν να συνεχίσουν να χρησιμοποιούν τις εφαρμογές μας.
Μπορούμε να αξιοποιήσουμε την προσωρινή αποθήκευση για αυτό. Ένας τρόπος είναι να αποθηκεύσετε την τελευταία κατάσταση χρήσης του DOM σας, καταχωρώντας έναν ακροατή όπως φαίνεται παρακάτω:
Αυτή είναι μια γενική ιδέα ενός παραδείγματος για να ξεκινήσετε για μια πιο επίσημη ή ασφαλή λύση.
Το υπέροχο με το JavaScript είναι ότι μπορεί να αξιοποιήσει ξεχωριστές τεχνολογίες χωρίς να χρειάζεται ποτέ να μάθει μια νέα γλώσσα.
Μπορούμε να αξιοποιήσουμε τους εργαζομένους σε υπηρεσίες (που ζουν σε ένα πλαίσιο χωριστό από το DOM) για την εκ των προτέρων αποθήκευση πόρων και την παρακολούθηση αιτημάτων, ώστε να λαμβάνουν ταχύτερους χρόνους απόκρισης. Είναι ακόμα πιο ασφαλές αφού εκτελεί τις λειτουργίες σε ξεχωριστό νήμα.
Υπάρχουν πολλές άλλες στρατηγικές προσωρινής αποθήκευσης που μπορείτε να χρησιμοποιήσετε από τους εργαζόμενους σε υπηρεσίες για να παρέχετε μια πιο ισχυρή εμπειρία χρήστη στους χρήστες σας.
Σε περίπτωση που δεν είστε εξοικειωμένοι με τους Εργάτες, ακολουθεί ένα σύντομο παράδειγμα για το πώς μπορεί να μοιάζει η σύνταξή του όταν εργάζεστε μαζί τους:
Για αφιερωμένους εργαζόμενους:
Για εργαζομένους σε υπηρεσίες:
Για κοινούς εργαζόμενους:
Οι εργαζόμενοι πρέπει να διαχωριστούν καθώς εκτελούνται σε ξεχωριστό περιβάλλον, επομένως θα πρέπει να απομονώνονται στα δικά τους αρχεία:
myServiceWorker.js
myWorker.js
Μπορείτε να μάθετε περισσότερα για τους εργαζόμενους εδώ.
Μερικά εξαιρετικά παραδείγματα εμπειριών εκτός σύνδεσης είναι το Spotify και το Netflix. Τις περισσότερες φορές δεν μπορούσαμε να παρατηρήσουμε όταν το τηλέφωνό μου δεν έχει σήμα όταν ακούω Spotify χάρη στην προσωρινή αποθήκευση.
"Πλαστεύοντας" Καλή Απόδοση
Η δύναμη της προσωρινής αποθήκευσης λάμπει πολύ καλά στην «παραποίηση» πραγμάτων. Η λέξη "Faking" έχει μια πολύ κακή χροιά όταν χρησιμοποιείται στον πραγματικό κόσμο, αλλά στο πλαίσιο του DOM είναι θετική! Ο νούμερο ένα (αναμφισβήτητα) στόχος στις εφαρμογές ιστού είναι να κάνουμε τους χρήστες μας ευτυχισμένους και με την προσποίηση καλής απόδοσης βοηθάτε πραγματικά τον χρήστη να αισθάνεται ότι είναι σε καλά χέρια.
Ακολουθούν μερικοί τρόποι με τους οποίους η προσωρινή αποθήκευση μπορεί να βοηθήσει στην ψευδή καλή απόδοση για τους χρήστες:
1. Εξυπηρέτηση θέσεων κράτησης θέσης κατά τη φόρτωση των εικόνων
Οι χρήστες δεν πρέπει να αναγκάζονται να περιμένουν τη φόρτωση των εικόνων για να νιώσουν σαν στο σπίτι τους στις σελίδες μας. Χρησιμοποιώντας εικόνες κράτησης θέσης μπορούμε να επιτρέψουμε στον χρήστη να έχει μια εύκολη εμπειρία αμέσως με τις σελίδες μας, αν αντικαταστήσουμε μεγάλες εικόνες με κάτι άλλο (όπως ένα SVG με ίχνη) ενώ τελειώσει η φόρτωση της πραγματικής. Μπορούμε είτε να αποθηκεύσουμε προσωρινά την πραγματική εικόνα που θα φορτωθεί αμέσως την επόμενη φορά που θα επισκεφτεί ο χρήστης είτε να αποθηκεύουμε προσωρινά τις διαστάσεις που μας επιτρέπουν να εμφανίζουμε αμέσως κάτι σαν μια σιλουέτα με προβλεπόμενο μέγεθος κατά τη φόρτωσή της.
Εάν δεν είστε εξοικειωμένοι με το τι είναι ένα ανιχνευμένο SVG, μπορεί να μοιάζει με αυτό, όπου το αριστερό είναι η πλήρως φορτωμένη εικόνα και η δεξιά είναι το μερικό (ιχνηλατημένο SVG) σύμβολο κράτησης θέσης:
2. Τεμπέλης φόρτωση
Το Lazy loading είναι ένας δημοφιλής όρος στην ανάπτυξη ιστού. Είναι μια χρήσιμη στρατηγική που ζητά δεδομένα για τον πελάτη χρήστη μόνο όταν χρειάζεται. Η προσωρινή αποθήκευση μπορεί να βοηθήσει στην επιτάχυνση της τεμπέλης φόρτωσης, εάν αποθηκεύσουμε στην κρυφή μνήμη πόρους που θα ζητηθούν όταν έρθει η ώρα. Αυτή είναι μια έννοια εισαγωγής επειδή πολλά δεδομένα σε εφαρμογές ιστού δεν ζητούνται σχεδόν ποτέ από τον πελάτη χρήστη. Η τεμπέλης φόρτωση σάς βοηθά να σκεφτείτε τι να αποθηκεύσετε στην προσωρινή μνήμη, ώστε να καταναλώνεται μόνο όταν σας ζητηθεί. Πιθανότατα αλληλεπιδράσατε με κάποιο στοιχείο σε μια ιστοσελίδα χρησιμοποιώντας αυτήν την έννοια.
Για παράδειγμα, οποιαδήποτε ιστοσελίδα που αποδίδει κάποια μορφή σελιδοποίησης αποτελεί υλοποίηση αυτής της προσέγγισης.
3. Επαναχρησιμοποίηση απαντήσεων αιτημάτων
Νωρίτερα μιλήσαμε για τους εργαζόμενους σε υπηρεσίες και αξίζει να αναφέρουμε εδώ ότι εκεί πραγματικά λάμπουν στο να προσποιούνται μια εφαρμογή εξαιρετικής απόδοσης για τους χρήστες σας.
Στην εταιρεία στην οποία εργάζομαι, έμεινα έκπληκτος με τα θετικά σχόλια που έλαβα μετά την εφαρμογή αποκρίσεων προσωρινής αποθήκευσης μέσω εργαζομένων στην υπηρεσία. Οι τακτικοί χρήστες (και ως τακτικοί αναφέρομαι σε άτομα που δεν είναι προγραμματιστές) δεν έχουν ιδέα ότι οι σελίδες τους συλλέγονται απλώς από μια προηγούμενη περίοδο λειτουργίας του προγράμματος περιήγησής τους κατά τη διάρκεια των χρόνων "άμεσης απόκρισης" που λαμβάνουν όταν οι εργαζόμενοι στο παρασκήνιο αποθήκευσαν προσωρινά τις επισκέψεις τους.
Ένα άλλο σημαντικό πράγμα που πρέπει να λάβουμε από αυτό είναι ότι παραλείπουμε επίσης τα επιπλέον αιτήματα όταν προβάλλουμε αποθηκευμένες αποκρίσεις (υποθέτοντας ότι το περιεχόμενο δεν θα αλλάζει συχνά), κάτι που αποτελεί πλεονέκτημα στην εξοικονόμηση εύρους ζώνης και πόρων.
Γρήγορες λειτουργίες
Μπορούμε να κάνουμε τις λειτουργίες μας να επεξεργάζονται δεδομένα γρηγορότερα με την πάροδο του χρόνου αποθηκεύοντας τα αποτελέσματά τους στην κρυφή μνήμη, κάτι που μπορεί να γίνει ουσιαστικά σημαντική ενίσχυση της απόδοσης στις εφαρμογές μας.
Ως μηχανικοί, είναι απολύτως απαραίτητο να εξετάσουμε ποια τμήματα των δεδομένων μας θα πρέπει να αποθηκευτούν στην κρυφή μνήμη. Είναι επίσης σημαντικό να γνωρίζετε ποια στρατηγική προσωρινής αποθήκευσης χρησιμοποιείται καλύτερα ανάλογα με την κατάσταση.
Ειδικότερα θα πρέπει να εξετάσουμε:
- Πότε να ενημερώσουμε ή να ακυρώσουμε δεδομένα από την κρυφή μας μνήμη. Δεν είναι ασυνήθιστο στην ανάπτυξη ιστού ο λάθος χειρισμός της προσωρινής αποθήκευσης όταν πρόκειται για τη διατήρηση μιας ενημερωμένης προσωρινής μνήμης.
- Αποθήκευση δεδομένων με συχνή πρόσβαση και τα οποία μπορούμε να ανακτήσουμε για χρήση αργότερα όταν δεν είναι απαραίτητο να εκτελέσουμε χρονοβόρες ή δαπανηρές λειτουργίες. Οι χρήστες είναι σημαντικοί, επομένως πρέπει επίσης να εξετάσουμε το ενδεχόμενο ενημέρωσης της προσωρινής μνήμης περιοδικά, ώστε να μπορούν να βλέπουν τις πιο πρόσφατες πληροφορίες.
Για παράδειγμα, όταν έχουμε μια συνάρτηση υπεύθυνη για την ανάκτηση και την επιστροφή δεδομένων, μπορούμε να χρησιμοποιήσουμε μια στρατηγική που ονομάζεται απομνημόνευση για να ανακτήσουμε δεδομένα από την κρυφή μνήμη, εάν είχαν ήδη ληφθεί πριν:
Με την αποστολή ανεπιθύμητης αλληλογραφίας αυτής της συνάρτησης, θα εκτελέσει την ανάκτηση μόνο την πρώτη φορά και θα επιστρέψει αμέσως τα αποθηκευμένα δεδομένα σε επόμενες κλήσεις:
Αυτή η στρατηγική είναι εν μέρει γνωστή ως το μοτίβο της προσωρινής αποθήκευσης, μόλις τοποθετήσετε μια στρατηγική ακύρωσης όπως ένα TTL.
Σενάρια πραγματικού κόσμου
- Ο Gatsby αποθηκεύει προσωρινά τις ενσωματώσεις σε αντικείμενα JSON, τα οποία συλλέγονται σε επόμενες εκδόσεις, προκειμένου να γίνει ταχύτερη η διαδικασία των εκδόσεων
- Το SWR εκμεταλλεύεται μια στρατηγική ακύρωσης της κρυφής μνήμης HTTP που ονομάζεται state-while-revalidate για να παρέχει γρήγορες απαντήσεις ενώ υπόσχεται να ενημερώνεται για τα δεδομένα
- Το Chrome μηχανή V8 αποθηκεύει προσωρινά κώδικα μεταγλωττισμένο κώδικα σε τρία στάδια που είναι γρήγορο και αποτελεσματικό
συμπέρασμα
Και αυτό κλείνει το τέλος αυτής της ανάρτησης! Ελπίζω να το βρήκατε πολύτιμο και να αναζητήσετε περισσότερα στο μέλλον!
