Το τεμπέλης φόρτωσης και η ενυδάτωση της εφαρμογής αλληλεπιδρούν με πολύπλοκο και συχνά αντιφατικό τρόπο, κυρίως επειδή η ενυδάτωση απαιτεί την εκτέλεση του κώδικα εφαρμογής με ανυπομονησία, γεγονός που υπονομεύει τα οφέλη της τεμπέλης φόρτωσης.
Πώς λειτουργεί η ενυδάτωση και ο αντίκτυπός της στην τεμπέλης φόρτωσης
Η ενυδάτωση είναι η διαδικασία με την οποία μια σελίδα HTML που έχει προσληφθεί από το διακομιστή είναι "ενεργοποιημένη" στην πλευρά του πελάτη εκτελώντας JavaScript για να επισυνάψετε τους ακροατές συμβάντων, να επαναφέρετε την κατάσταση εξαρτημάτων και να κάνετε τη σελίδα διαδραστική. Αυτή η διαδικασία περιλαμβάνει την εκτέλεση των στοιχείων της εφαρμογής ξεκινώντας από τη ρίζα και διασχίζει το δέντρο των εξαρτημάτων για να κατανοήσει την κατάσταση, τις δεσμεύσεις και τους χειριστές συμβάντων.
Επειδή η ενυδάτωση πρέπει να επισκέπτεται κάθε στοιχείο στο τρέχον δέντρο Render για να διαπιστώσει εάν χρειάζεται να είναι διαδραστική, αναγκάζει όλα αυτά τα εξαρτήματα να φορτωθούν και να εκτελεστούν με ανυπομονησία. Αυτό σημαίνει ότι ακόμη και αν επισημάνετε ορισμένα εξαρτήματα για τεμπέλης φόρτωσης, η ενυδάτωση θα τους προκαλέσει να φορτωθούν αμέσως εάν αποτελούν μέρος του αρχικού δέντρου. Η ενυδάτωση είναι διαδοχική και δεν μπορεί να παραλείψει τα ενδιάμεσα συστατικά για να ενυδατώσει άμεσα τα συστατικά του παιδιού, έτσι ώστε όλα τα γονικά συστατικά να πρέπει να ενυδατωθούν πρώτα [1] [6].
Γιατί η ενυδάτωση σαμποτάζ του τεμπέλης φόρτωσης
- Πρόθυμη εκτέλεση: Η ενυδάτωση απαιτεί την εκτέλεση όλων των εξαρτημάτων στο δέντρο απόδοσης, γεγονός που εμποδίζει την τεμπέλης φόρτωσης από την αναβολή της φόρτωσης του κώδικα για αυτά τα εξαρτήματα.
- εξαρτήσεις εξαρτημάτων: Τα συστατικά των παιδιών εξαρτώνται από τα στηρίγματα από τα γονικά εξαρτήματα, οπότε οι γονείς πρέπει να ενυδατωθούν πρώτα, αναγκάζοντας μια αλυσίδα ανυπόφορης φόρτωσης.
- Οι χειριστές συμβάντων και η κατάσταση: Η ενυδάτωση πρέπει επίσης να δημιουργήσει ακροατές συμβάντων και να επαναφέρει την κατάσταση, η οποία απαιτεί εκ των προτέρων τον κώδικα εξαρτημάτων.
- επιβάρυνση προγραμματιστών: Για να επιτευχθεί τεμπέλης φόρτωσης κατά τη διάρκεια της ενυδάτωσης, οι προγραμματιστές πρέπει να διαχειρίζονται με μη αυτόματο τρόπο τη διάσπαση και τη διάσπαση κώδικα, οι οποίες μπορεί να είναι πολύπλοκες και επιρρεπείς σε σφάλματα [6] [7].
όταν τα τεμπέλης φόρτωσης λειτουργεί παρά την ενυδάτωση
Το τεμπέλης φόρτωσης μπορεί να εξακολουθεί να είναι αποτελεσματική για εξαρτήματα που δεν αποτελούν μέρος του αρχικού δέντρου και επομένως δεν επισκέπτονται κατά τη διάρκεια της ενυδάτωσης. Παραδείγματα περιλαμβάνουν:
- Διαλόγοι ή τρόποι που ανοίγουν στην αλληλεπίδραση χρήστη
- Τα εξαρτήματα σε διαφορετικές διαδρομές που δεν έχουν καθοριστεί αρχικά
Σε αυτές τις περιπτώσεις, τα εξαρτήματα μπορούν να φορτωθούν πραγματικά, επειδή η ενυδάτωση δεν αναγκάζει την άμεση εκτέλεση τους [6].
Τεχνικές για τη βελτιστοποίηση της ενυδάτωσης και της τεμπέλης φόρτωσης
Ορισμένα σύγχρονα πλαίσια και βιβλιοθήκες προσπαθούν να βελτιστοποιήσουν αυτήν την αλληλεπίδραση εφαρμόζοντας τεμπέλης ενυδάτωσης ή επιλεκτικής ενυδάτωσης, όπου τα εξαρτήματα ενυδατώνονται μόνο όταν χρειάζεται, όπως όταν γίνονται ορατά στο παράθυρο προβολής:
-Βιβλιοθήκες όπως το `επόμενο τετράγωνο-υδραυλικό-on-scroll` στο Next.js επιτρέπουν την αναβολή της ενυδάτωσης μέχρις ότου ένα συστατικό κύλινδρο σε προβολή.
- Χρησιμοποιώντας το API IntersectionObserver, τα εξαρτήματα μπορούν να φορτωθούν και να ενυδατωθούν μόνο όταν εισέρχονται στο παράθυρο προβολής.
-Σε Vue/Nuxt, τεμπέλης τεχνικές ενυδάτωσης και plugins (π.χ., «Nuxt-τεμπέλη-υδραυλική-υδραυλική») επιτρέπουν την καθυστέρηση της ενυδάτωσης έως ότου το κύριο νήμα είναι αδρανές ή το συστατικό είναι ορατό, βελτιώνοντας το χρόνο σε διαδραστικές και πρώτες μετρήσεις καθυστέρησης εισόδου [4] [5].
Περίληψη
Η ενυδάτωση και η τεμπέλης φόρτωσης είναι θεμελιωδώς σε αντίθεση, επειδή η ενυδάτωση απαιτεί πρόθυμη εκτέλεση εξαρτημάτων στο δέντρο απόδοσης, γεγονός που εμποδίζει την τεμπέληρη φόρτωση από την αναβολή της εκτέλεσης κώδικα. Ωστόσο, η τεμπέληλη φόρτωση παραμένει αποτελεσματική για τα εξαρτήματα εκτός του αρχικού πεδίου ενυδάτωσης. Οι αναδυόμενες τεχνικές, όπως η τεμπέλης ενυδάτωση, στοχεύουν να συμβιβαστούν αυτή η σύγκρουση, αναβάλλοντας την ίδια την ενυδάτωση, βελτιώνοντας την απόδοση και την εμπειρία των χρηστών.
Στην ουσία, η ενυδάτωση σαμποτάρει τεμπέλης φόρτωσης κατά τη διάρκεια της αρχικής φόρτωσης της σελίδας, αλλά με προσεκτικές αρχιτεκτονικές επιλογές και εξειδικευμένα εργαλεία, οι προγραμματιστές μπορούν να βελτιστοποιήσουν πότε και πώς τα εξαρτήματα ενυδατωθούν για να ανακτήσουν τα οφέλη της τεμπέλης φόρτωσης [1] [6] [7].
Αναφορές:
[1] https://www.infoq.com/presentations/hydration-lazy-loading/
[2] https://qconsf.com/presentation/oct2023/hydration-and-lazy-loading-are-incompatible
[3] https://github.com/vercel/next.js/discussions/29751
[4] https://www.wisp.blog/blog/lazy-loading-in-nextjs-the-future-of-resource-optimization
[5] https://vueschool.io/articles/vuejs-tutorials/lazy-hydration-and-server-components-in-nuxt-vue-js-3-ferformance/
[6] https://www.builder.io/blog/hydration-sabotages-lazy-toading
[7] https://www.linkedin.com/posts/misko-hevery-3883b1_lazy-loading-is-like-exercise-everyone-says-activity-7115086933935984641-5oxk
[8] https://www.techtarget.com/searchsoftwarequality/definition/lazy-loading