Readymag Under the Hood: Ταχύτερη εφαρμογή Vertical Viewer

Τον Δεκέμβριο του 2017, η Readymag εγκαινίασε το Faster Vertical Viewer, το οποίο επιτρέπει πιο ομαλή εμπειρία προβολής για έργα με σταθερά γραφικά και βαριά κινούμενα σχέδια. Σε αυτό το άρθρο ο σχεδιαστής προϊόντων Readymag Eugene Petrov περιγράφει πώς το κάναμε και τι επιτύχαμε.

Όλα ήταν εύκολα πρώτα

Το 2013 η Readymag ξεκίνησε με ένα ενιαίο οριζόντιο πρόγραμμα προβολής. Ένα έργο που χρησιμοποιεί αυτό το είδος θεατή παρουσιάζει ένα σύνολο κάθετων σελίδων μεταξύ των οποίων ο αναγνώστης μεταβαίνει χρησιμοποιώντας τα βέλη πλοήγησης στα αριστερά και στα δεξιά της σελίδας. Σε ένα οριζόντιο πρόγραμμα προβολής, κάθε μία σελίδα θα μπορούσε επίσης να μετακινηθεί κάθετα από πάνω προς τα κάτω αν δεν ταιριάζει στην οθόνη.

Σελίδες σε οριζόντιο πρόγραμμα προβολής

Στη συνέχεια εισήγαμε τα Fixed Widgets - κολλούν σε μια συγκεκριμένη θέση στο παράθυρο του προγράμματος περιήγησης και δεν μετακινούνται κατά τη μετακίνηση της σελίδας. Αλλά όταν μετακομίζετε σε άλλη σελίδα, τα σταθερά γραφικά στοιχεία απομακρύνονται μαζί με την προηγούμενη σελίδα όπου ανήκουν. Για τη δισδιάστατη κύλιση, αρκεί να χρησιμοποιούμε ιδιότητα CSS με ευρεία υποστήριξη "θέση: σταθερή".

Πέρα από τον οριζόντιο προβολέα

Προβλήματα προέκυψαν όταν ξεκινήσαμε να στοιβάζουμε σελίδες το ένα πάνω στο άλλο για να τις παρουσιάσουμε σε νέο Vertical Viewer.

Σελίδες σε κάθετο πρόγραμμα προβολής

Σε αυτήν την περίπτωση, τα Fixed Widgets πρέπει να παραμείνουν στην οθόνη κατά τη διάρκεια της σελίδας τους. Αλλά, θα πρέπει να ξεφύγουν από τη θέα όταν εμφανιστεί μια νέα σελίδα - όχι από την πλευρά όπως σε οριζόντια έργα κύλισης, αλλά από το κάτω μέρος της οθόνης. Η ιδιότητα 'θέση: σταθερή' δεν θα μπορούσε να λύσει αυτή την εργασία: τα στοιχεία δεν είναι πλέον σταθερά καθορισμένα κατά μήκος του ύψους της σελίδας (κάθετος άξονας), αλλά πρέπει να ελέγξουν αν υπάρχει μια καινούργια σελίδα και να αλλάξει ανάλογα την κατάστασή τους. στατικός.

Για να λυθεί αυτό το θέμα, έπρεπε να μιμηθούμε τη «θέση: κολλώδη» με τη δική μας εφαρμογή javascript. Ο κώδικας μετακινεί τις σελίδες κάθετα όταν ο αναγνώστης μετακινείται μέσω αυτών και μετακινεί τα Fixed Widgets μαζί με το δοχείο τους.

Τα μειονεκτήματα αναδύθηκαν αναπόφευκτα με τις πρόσφατες ενημερώσεις στα προγράμματα περιήγησης. Δεδομένου ότι εφαρμόσαμε τη δική μας συμπεριφορά κύλισης με προγράμματα περιήγησης javascript δεν μπόρεσαν να προβλέψουν τη θέση των στοιχείων και να βελτιστοποιήσουν τη διαδικασία απόδοσης. Κάθε μετακίνηση περιεχομένου προκάλεσε πλήρη επανατύπωση παραθύρων: η διαδικασία που απαιτεί υψηλότερη μνήμη και αυξάνει σημαντικά τα φορτία CPU και GPU. Με τη σειρά του, τα κινούμενα σχέδια μερικές φορές καθυστέρησαν κατά τη διάρκεια της κύλισης, επειδή τα προγράμματα περιήγησης δεν πυροδότησαν το γεγονός "onscroll" σε κάθε κίνηση. Φαινόταν σαν να παραλείπονται τα πλαίσια σε μια ταινία κινουμένων σχεδίων. Από όλα τα προγράμματα περιήγησης, το Safari ήταν μια πλήρης καταστροφή: με κάθε ενημέρωση, η Apple έκανε λιγότερο καταναλώνοντας ενέργεια περιορίζοντας σοβαρά τους διαθέσιμους πόρους.

Η θέση "κολλητική" έρχεται στο φως

Όλα άλλαξαν τον Μάρτιο του 2017, όταν όλα τα μεγάλα προγράμματα περιήγησης για υπολογιστές και επιτραπέζιους υπολογιστές πρόσθεσαν τελικά την υποστήριξη για την ιδιότητα "θέση: κολλητική" CSS. Το Chrome ήταν το τελευταίο που το εισήγαγε στην έκδοση 61 στις 5 Σεπτεμβρίου 2017. Από τότε το καθήκον να αφαιρεθούν τα σταθερά στοιχεία από την προβολή μαζί με το κοντέινερ τους έγινε ασήμαντο.

Η εγγενή υποστήριξη για τη "θέση: κολλητική" σημαίνει ότι οι προγραμματιστές δεν χρειάζεται πλέον να μιμούνται αυτή τη συμπεριφορά μέσω αργής javascript. Οι περιηγητές γνωρίζουν καλύτερα ποιο περιεχόμενο μπορεί να ζητήσει, ανάλογα με την κατεύθυνση στην οποία γίνεται η μετακίνηση της σελίδας. Ή απελευθερώστε από τη μνήμη αυτά τα στοιχεία σελίδας που δεν είναι πλέον ορατά σε μια οθόνη. Αυτό κάνει ιδιαίτερα την αξία για τα προγράμματα περιήγησης για κινητά: οι πόροι είναι σπάνιοι, γι 'αυτό είναι ο μόνος τρόπος για να μπορέσουν να ανταποκριθούν στις εντολές ακόμα και όταν ο αναγνώστης βλέπει πολύ μεγάλες σελίδες. Και δεδομένου ότι το Chrome 61 ενημερώνει τις περισσότερες από τις τελευταίες συσκευές Android, μπορεί όχι μόνο να προβάλει, αλλά και να υποστηρίξει εγγενώς το Vertical Viewer.

Ταχύτερος κατακόρυφος προβολέας: οι κύριες αλλαγές

Είδαμε αυτή την πρόκληση ως μια ευκαιρία να επανεξετάσουμε ριζικά την εφαρμογή του προγράμματος προβολής. Το αποτέλεσμα είναι το νέο μας Faster Scroll Viewer - όταν είναι ενεργοποιημένο, το πρόγραμμα περιήγησης ερμηνεύει την ακολουθία σελίδων των οποίων το έργο αποτελείται από φυσικά ψηλό σώμα σελίδας HTML (σαν να ακολουθούν οι σελίδες η ροή στην οποία εμφανίζονται όλα τα στοιχεία HTML σε μια σελίδα ). Με αυτό τον τρόπο το έργο μας με όλες τις περίπλοκες λογικές του μοιάζει με μια συμβατική μακρά ιστοσελίδα όπως κάθε άλλη ιστοσελίδα.

Ξεχωριστές σελίδες στο Vertical Viewer

Αυτή η ενημέρωση επέτρεψε την ταχύτερη και πιο ομαλή απόδοση προβολής, ειδικά σε σελίδες με κινούμενα και σταθερά γραφικά στοιχεία.

Ωστόσο, υπάρχουν μερικά δευτερεύοντα μειονεκτήματα. Πρώτον, όταν είναι ενεργοποιημένη, η Ταχύτερη κύλιση δεν υποστηρίζει τη μετάβαση σε Slide-in. Αφήσαμε αυτήν την επιλογή στις ρυθμίσεις, αλλά πρέπει να σας προειδοποιήσουμε ότι χρησιμοποιεί την παλιά εφαρμογή του προγράμματος προβολής με όλα τα μειονεκτήματά του.

Δεύτερον, τα κινούμενα γραφικά "σε κύλιση" - που κινούνται ως κύλιση των επισκεπτών - θα μπορούσαν να υστερούν σε ορισμένα προγράμματα περιήγησης. Αυτό οφείλεται στον λόγο που έχουμε περιγράψει νωρίτερα: με έκπληξη, οι φυλλομετρητές δεν μπορούν να πυροδοτήσουν το συμβάν "onscroll" ταυτόχρονα με το κύλινδρο. Αυτό ουσιαστικά σημαίνει ότι δεν μπορούμε να τρέξουμε το σενάριο που κινεί τα κινούμενα γραφικά στοιχεία σε κάθε κίνηση κύλισης. Πονάει ιδιαίτερα όταν χρησιμοποιείτε κινούμενες εικόνες "σε κύλιση" για να κλειδώσετε ένα γραφικό στοιχείο σε μια οθόνη ενώ το υπόλοιπο περιεχόμενο μεταφέρεται. Ευτυχώς, υπάρχει μια λύση: κάντε τα κινούμενα στοιχεία σας σταθερά. Σε αυτήν την περίπτωση, όλα θα φαίνονται τέλεια.

Η Readymag προσπάθησε πάντα να δώσει την πιο προηγμένη τεχνολογία ιστού στα χέρια των σχεδιαστών. Μπορεί να έχετε μια αίσθηση ότι είναι μια σκληρή προσέγγιση (και είναι πράγματι!), Αλλά η δημιουργική ελευθερία θα είναι πάντα προτεραιότητα μας # 1.