Αρχεία ετικετών: Cache

Φτωχός προσωρινή αποθήκευση σε JavaScript

[TL;DR έκδοση: χρησιμοποιεί cookies για την αποθήκευση των αποτελεσμάτων των async κλήσεις; καθιστούν τα αποτελέσματα του παρελθόντος async κλήσεις αμέσως και στη συνέχεια επικύρωση τους μετά από τη σελίδα του φορτίου.]

Έχω εργαστεί στην τοποθεσία intranet του SharePoint για έναν πελάτη που χαρακτηρίζει, μεταξύ άλλων, μια στυλιζαρισμένη δευτερεύουσα πλοήγηση για διαχείριση των οποίων επιλογές μενού μέσω μια τακτική παλιό προσαρμοσμένη λίστα.  Η ιδέα είναι ότι ο πελάτης παίρνει για τον έλεγχο της ιστοσελίδας "τους" μενού χωρίς να επηρεάσει ή να επηρεαστεί από την παγκόσμιας πλοήγησης που τίθεται από αυτό.

(υπάρχει κάτι απίστευτα ανατρεπτική σχετικά με την προσθήκη ενός CEWP που οδηγεί σε ένα αρχείο HTML που φορτώνει κάποια CSS και JS να μεταβάλλουν ριζικά σχεδόν τα πάντα σχετικά με τη συμπεριφορά ενός ιστοτόπου..., αλλά αυτό είναι για άλλη θέση)

Τον κώδικα για αυτό το πολύ απλό:

  • Περιμένετε για την σελίδα για να τελειώσει τη φόρτωση και να κάνει μια async κλήσης να φορτώσει επάνω μενού στοιχεία από μια λίστα που χρησιμοποιεί το υπόλοιπο ή lists.asmx ή οτιδήποτε άλλο
  • Χρησιμοποιώντας jQuery, συμπλήρωση δυναμικά μια δέσμη, αν <Li>του μέσα σε ένα γονέα <UL> (Δείτε το άρθρο του Christian Pinder εδώ για μια απλοϊκή εξήγηση για αυτό το tecnnique)
  • Χρήση CSS για να κάνει όλη τη μορφοποίηση
  • Κέρδος!

Το ευαίσθητο σημείο εδώ είναι ότι κάθε φορά που κάποιος χτυπά μια από τις σελίδες του site, πρόγραμμα περιήγησης web του χρήστη που είναι το άνοιγμα να πάρει τα στοιχεία από τη λίστα.  Μόλις dev είναι πλήρης και δοκιμών έχει αποδειχθεί τα πράγματα να είναι σταθερή και πλήρης, η παρούσα πρόσκληση αποτελεί περιττή περισσότερο από 99% του χρόνου δεδομένου ότι ο κατάλογος αλλάζει σπάνια.  Έχει επίσης ένα παράξενο επηρεάσει UI, η οποία είναι κοινή σε αυτό γενναίο νέο κόσμο της υπερ-ajaxy τοποθεσίες web-σελίδα καθιστά και μόνο τότε το μενού καθιστούν.  Είναι φοβισμένος και αποσπούν την προσοχή κατά τη γνώμη μου.  Και εκνευρισμού. Έτσι, προσωρινή αποθήκευση. 

Άλλαξα τη λογική thusly:

  • Αναζητήστε ένα cookie στο πρόγραμμα περιήγησης που περιέχει το μενού όπως διάβασα τελευταία
    • Αν βρεθεί, καταστήσει αμέσως.  Μην περιμένετε για την σελίδα να τελειώσουν.  (Θα πρέπει να βεβαιωθείτε ότι σας HTML είναι στρατηγικά τοποθετημένα εδώ, αλλά δεν είναι δύσκολο να κάνει).
  • Περιμένετε για την σελίδα για να τελειώσει τη φόρτωση και να κάνει μια async κλήσης να φορτώσει επάνω μενού στοιχεία από μια λίστα που χρησιμοποιεί το υπόλοιπο ή lists.asmx ή οτιδήποτε άλλο
  • Συγκρίνετε αυτό που πήρα από το cookie
    • Αν ταιριάζει, Σταμάτα
    • Διαφορετικά, χρησιμοποιώντας jQuery, συμπλήρωση δυναμικά μια δέσμη, αν <Li>του σε ένα <UL>
  • Χρήση CSS για να κάνει όλη τη μορφοποίηση
  • Κέρδος!

Κάποιοι από εσάς θα πω, "Γεια σου! δεν υπάρχει καμία πραγματική εναποθηκεύοντας συνεχίζεται εδώ δεδομένου ότι διαβάζετε το μενού ούτως ή άλλως κάθε ενιαίος χρόνος.”  Και έχεις δίκιο-δεν είμαι δίνοντας το διακομιστή κάθε είδους διάλειμμα.  Αλλά επειδή η κλήση είναι ασύγχρονες και θα συμβεί μετά την αρχική σελίδα HTML ωφέλιμο φορτίο καθιστά πλήρως, "αισθάνεται" ανταποκρίνεται περισσότερο στο χρήστη.  Το μενού καθιστά αρκετά όσο εφιστά την σελίδα.  Αν το μενού που συμβαίνει στην αλλαγή, ο χρήστης υπόκειται σε μια εκνευρισμού εκ νέου κατάρτιση του μενού, αλλά μόνο μια στιγμή.

Υπάρχουν μερικοί τρόποι για να κάνει caching αυτό πιο αποτελεσματική και να βοηθήσει στο διακομιστή, την ίδια στιγμή:

  • Βάλτε σε έναν κανόνα ότι το cache"cookie" είναι έγκυρο για τουλάχιστον 24 ώρες ή κάποια άλλη προθεσμία. Όσο υπάρχει κανενός cookie που έληξε, Χρησιμοποιήστε το cookie του μενού στιγμιότυπο και ποτέ δεν χτύπησε το server.

Καλά..., που είναι όλα που έρχονται στο μυαλό αυτή τη στιγμή :). 

Αν κάποιος έχει οποιαδήποτε έξυπνες ιδέες εδώ, θα ήθελα πολύ να δοκοῦσί σοι ἐπίστασθαι.

Και τέλος-αυτή η τεχνική μπορεί να χρησιμοποιηθεί για άλλα πράγματα.  Σελίδα αυτή του πελάτη έχει μια σειρά από πράγματα που βασίζονται σε δεδομένα σε διάφορες σελίδες, Πολλοί από αυτούς αλλαγή σχετικά σπάνια (όπως μία φορά την εβδομάδα ή μία φορά το μήνα).  Αν στοχεύετε σε συγκεκριμένες περιοχές της λειτουργικότητας, Μπορείτε να δώσετε ένα πιο απαντητικό UI για το τράβηγμα περιεχόμενο από το κατάστημα τοπικά cookie και καθιστώντας αμέσως.  Αισθάνεται πιο γρήγορα στο χρήστη, ακόμη και αν δεν σώζετε το διακομιστή κάθε κύκλους.  Σας μπορεί να εκτός από τους κύκλους του διακομιστή αποφασίζοντας σχετικά με ορισμένες προϋποθέσεις και εναύσματα να ακυρώνει την cache αυτή τοπικό cookie.  Που είναι όλα της κατάστασης και artsy πράγματα και πραγματικά το πιο διασκεδαστικό :). 

</Τέλος>

undefinedΕγγραφείτε στο blog μου.

Συνέχεια μου για Twitter σε http://www.twitter.com/pagalvin