Πώς να γράψετε καλύτερο CSS με την απόδοση στο μυαλό

Στη σημερινή δημοσίευση θα αναλογιστούμε τις επιλογές κώδικα που μπορούμε να κάνουμε στο CSS για τη βελτίωση της απόδοσης του ιστότοπου. Αλλά, πριν βρεθούμε σε αυτές τις επιλογές, ας ρίξουμε πρώτα μια σύντομη, πιο προσεκτική ματιά στη ροή εργασίας της ιστοσελίδας για να εστιάσουμε στηνπροβληματικές (επιδόσεις-σοφούς) περιοχές που μπορούν να επιλυθούν μέσω CSS.

Εδώ είναι η ακατέργαστη ροή των εργασιών που εκτελούνται από το πρόγραμμα περιήγησης μετά τη δημιουργία δέντρου DOM:

1. Επαναπροσδιορισμός στυλ (και δημιουργία δημιουργίας δέντρου). Ο περιηγητής υπολογίζει τα στυλ που πρέπει να εφαρμοστούν στα στοιχεία του δέντρου DOM. Στη συνέχεια δημιουργείται ένα δέντρο αναπαράστασης ενώ απορρίπτεται οι κόμβοι (στοιχεία) από το δέντρο DOM που δεν πρόκειται να αποτυπωθούν (στοιχεία με οθόνη: καμία) και εκείνων που είναι (ψευδο-στοιχεία).
2. Διάταξη (γνωστός και ως Αναστροφή). Χρησιμοποιώντας το υπολογισμένο στυλ από πριν, το πρόγραμμα περιήγησης υπολογίζει τη θέση και τη γεωμετρία κάθε στοιχείου στη σελίδα.
3. Χρωματίζω πάλι. Μόλις χαρτογραφηθεί η διάταξη, τα εικονοστοιχεία σχεδιάζονται στην οθόνη.
4. Σύνθετα επίπεδα. Κατά τον επανασχηματισμό, η ζωγραφική μπορεί να γίνει σε διαφορετικά στρώματα αυτόνομα. αυτά τα στρώματα τελικά συνδυάζονται μαζί.

Τώρα ας συνεχίσουμε με αυτό που μπορούμε να κάνουμε στα τρία πρώτα στάδια της λειτουργίας για να γράψουμε κώδικες CSS με καλύτερες επιδόσεις.

1. Μειώστε τους υπολογισμούς στυλ

Όπως αναφέρθηκε προηγουμένως, στο στάδιο "Recalculate Style" το πρόγραμμα περιήγησης υπολογίζει τα στυλ που θα εφαρμοστούν στα στοιχεία. Για να γίνει αυτό, το πρόγραμμα περιήγησης εντοπίζει πρώτα όλους τους επιλογείς στο CSS που δείχνουν σε έναν δεδομένο κόμβο στοιχείου στη δέντρο DOM. Στη συνέχεια, περνάει από όλους τους κανόνες στυλ στους επιλογείς αυτούς και αποφασίζει ποιες θα εφαρμοστούν στην πράξη.

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

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

2. Μειώστε τις αναστροφές

Οι αναδρομικές αλλαγές ή οι αλλαγές στο Layout σε ένα στοιχείο είναι πολύ "δαπανηρές" διαδικασίες και μπορεί να είναι ακόμα μεγαλύτερου προβλήματος όταν το στοιχείο που πέρασε από τις αλλαγές της διάταξης έχει ένα σημαντικό αριθμό παιδιών (από τότε Επαναλαμβάνει την κατακόρυφη κατανομή της ιεραρχίας).

Οι αναστροφές ενεργοποιούνται από αλλαγές διάταξης σε ένα στοιχείο, όπως αλλαγές στις γεωμετρικές ιδιότητες όπως το ύψος ή το μέγεθος της γραμματοσειράς, η προσθήκη ή η αφαίρεση κλάσεων σε στοιχεία, η αλλαγή μεγέθους παραθύρων, η ενεργοποίηση :φτερουγίζω, Οι αλλαγές DOM από το JavaScript, κλπ.

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

Εάν πρέπει να αλλάξετε τα στυλ σχεδίασης ενός στοιχείου στη σελίδα σας, στοχεύστε τα στυλ του στοιχείου που βρίσκεται στο χαμηλότερο σημείο της ιεραρχίας των στοιχείων ότι το στοιχείο αποτελείται από. Αυτό γίνεται έτσι ώστε οι αλλαγές της διάταξης να μην ενεργοποιούν (σχεδόν) οποιαδήποτε άλλη αναπροσαρμογή.

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

Συνοψίζοντας:

• Στοιχεία στόχευσης που είναι χαμηλότερα στη δέντρο DOM κατά την πραγματοποίηση αλλαγών διάταξης
• Επιλέξτε απόλυτα τοποθετημένα στοιχεία για κινούμενα σχέδια αλλαγής διάταξης
• Αποφύγετε την κίνηση των ιδιοτήτων διάταξης όποτε είναι δυνατόν

3. Μειώστε την αποκατάσταση

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

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

Αν κινείστε τις ιδιότητες ενός στοιχείου που μπορεί να ενεργοποιήσει το Repaint άμεσα ή έμμεσα, θα είναι μεγάλο πλεονέκτημα αν αυτό το στοιχείο είναι στο δικό του στρώμα αποτρέποντας την επιρροή της ζωγραφικής του να επηρεάζει την υπόλοιπη σελίδα και να ενεργοποιεί την επιτάχυνση υλικού. Στην επιτάχυνση του υλικού, η GPU θα αναλάβει το καθήκον εκτέλεσης των αλλαγών κινουμένων σχεδίων στο στρώμα, εξοικονομώντας την πρόσθετη εργασία της CPU ενώ επιταχύνει τη διαδικασία.

Σε ορισμένα προγράμματα περιήγησης, αδιαφάνεια (με τιμή μικρότερη από 1) και μεταμορφώνω (αξία διαφορετική από κανένας) προωθούνται αυτόματα σε νέα στρώματα και η επιτάχυνση υλικού εφαρμόζεται για κινούμενες εικόνες και μεταβάσεις. Προτιμώντας αυτές τις ιδιότητες για κινούμενα σχέδια είναι επομένως καλή.

Για σθεναρά προωθήστε ένα στοιχείο στο νέο στρώμα και προχωρήστε σε επιτάχυνση υλικού για κινούμενα σχέδια, υπάρχουν δύο τεχνικές που ανακαλύφθηκαν:

1. προσθέτω μετασχηματισμός: translate3d (0, 0, 0); στο στοιχείο, εξαπατώντας το πρόγραμμα περιήγησης να ενεργοποιήσει την επιτάχυνση υλικού για κινήσεις και μεταβάσεις.
2. πρόσθεσε το θα αλλάξει ιδιότητα στο στοιχείο, το οποίο ενημερώνει το πρόγραμμα περιήγησης για τις ιδιότητες που ενδέχεται να αλλάξουν στο στοιχείο στο μέλλον. Σημείωση: Η Sara Soueidan έχει ένα σε βάθος και εξαιρετικά χρήσιμο άρθρο σχετικά με αυτό στο site Dev.Opera.

Συνοψίζοντας:

• Αποφύγετε ακριβά στυλ που προκαλούν Repaints
• Επιδιώξτε την προώθηση στρώματος και την επιτάχυνση υλικού για μεγάλες κινήσεις και μεταβάσεις.

Να λάβει υπόψη

(1) Έτσι μέχρι τώρα, δεν έχουμε αγγίξει τη μείωση του μεγέθους του αρχείου CSS. Αναφέραμε ότι η μείωση των κανόνων στυλ (και των στοιχείων DOM) κάνει μια σημαντική βελτίωση της απόδοσης εξαιτίας του πόσο θα πρέπει να λειτουργεί το πρόγραμμα περιήγησης πιο λιγο σχετικά με τη διαδικασία υπολογισμού των στυλ. Ως συνέπεια αυτής της μείωσης του κώδικα, η εγγραφή καλύτερων επιλογέων και η διαγραφή του αχρησιμοποίητου CSS, το μέγεθος του αρχείου θα μειωθεί αυτόματα.

(2) Είναι επίσης σκόπιμο να να μην κάνουν πάρα πολλές επακόλουθες αλλαγές στα στυλ ενός στοιχείου στο JavaScript. Αντίθετα, προσθέστε μια κλάση στο στοιχείο (χρησιμοποιώντας JavaScript) που περιέχει τα νέα στυλ για να κάνετε αυτές τις αλλαγές - αυτό αποτρέπει περιττές αναστροφές.

(3) Θα θελήσετε να αποφύγετε το Thrashing Layout (αναγκασμένες σύγχρονες αναστροφές) που προκύπτουν λόγω της πρόσβασης και της τροποποίησης των ιδιοτήτων Layout των στοιχείων χρησιμοποιώντας JavaScript. Διαβάστε περισσότερα σχετικά με το πώς αυτό σκοτώνει την απόδοση εδώ.