Ο οδηγός αρχαρίων για το μοντέλο αντικειμένων CSS (CSSOM)

Πολλά συμβαίνουν μεταξύ του πρώτο αίτημα HTTP και το τελική παράδοση μιας ιστοσελίδας. Η μετάδοση δεδομένων και ο αγωγός απόδοσης του προγράμματος περιήγησης απαιτούν πολλές διαφορετικές τεχνολογίες, μία από τις οποίες είναι η CSS Object Model, ή το CSSOM.

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

Σε αυτή την ανάρτηση, θα καλύψω τα βασικά του CSS Object Model και θα σας δείξω πώς λειτουργεί.

Τι είναι το CSSOM?

Ο όρος Αντικείμενο μοντέλου CSS περιγράφει a χάρτη όλων των επιλογών CSS & σχετικές ιδιότητες για κάθε επιλογέα. Αυτά τα στυλ μπορεί να είναι ριζικά στοιχεία ή να διαθέτουν ένθετα παιδιά.

Το CSSOM είναι πολύ παρόμοιο με το DOM σε HTML, που αντιπροσωπεύει το μοντέλο αντικειμένων εγγράφου. Και οι δύο είναι μέρος του κρίσιμη διαδρομή απόδοσης η οποία είναι μια σειρά βημάτων που πρέπει να συμβούν να δημιουργήσει σωστά έναν ιστότοπο. Όλες αυτές οι διαδικασίες συμβαίνουν αυτομάτως, στα παρασκήνια.

Γιατί είναι σημαντικό το CSSOM; Είναι ο χάρτης που χρησιμοποιείται από το πρόγραμμα περιήγησης για να να αποδίδουν σωστά τα στυλ CSS σε μια ιστοσελίδα. Δεν υπάρχει εύκολος τρόπος να πείτε σε έναν υπολογιστή ότι όλες οι παράγραφοι σε α .κυρίως περιεχόμενο div πρέπει να έχει επιπλέον ύψος γραμμής.

Η λύση είναι το μοντέλο αντικειμένου CSS το οποίο χαρτογραφεί όλα τα στοιχεία και τις ιδιότητες από τον κωδικό σας CSS.

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

Πως δουλεύει

Τόσο το DOM όσο και το CSSOM είναι χρησιμοποιούνται εκτενώς από όλα τα προγράμματα περιήγησης ιστού για την ερμηνεία και την απόδοση ιστοσελίδων. Το παρακάτω διάγραμμα είναι από τον οδηγό Google Developers Web Fundamentals και εξηγεί πώς Το DOM αποδίδεται σε ένα πρόγραμμα περιήγησης ιστού.

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

1. Το πρόγραμμα περιήγησης κατεβάζει το HTML για μια ιστοσελίδα.
2. Ενώ επεξεργάζεστε το HTML, ο αναλυτής μπορεί να μπει σε ένα στοιχείο σύνδεσης με αναφορά σε ένα εξωτερικό φύλλο στυλ.
3. Αυτό το φύλλο στυλ CSS είναι τότε αναλύεται σε ένα χάρτη χρησιμοποιώντας τις προδιαγραφές του μοντέλου αντικειμένων CSS.
4. Ο προκύπτων κώδικας μπορεί τότε να είναι εφαρμόζεται σε στοιχεία στο DOM.

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

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

Οι συμβολοσειρές HTML και CSS είναι μετατρέπονται σε μάρκες που μπορεί τότε να είναι που νοούνται ως κόμβοι από το πρόγραμμα περιήγησης. Αυτοί οι κόμβοι είναι σαν αντικείμενα μέσα στη δομή του δέντρου που καθορίζει τον τρόπο κατασκευής ολόκληρης της σελίδας.

Το CSSOM και το DOM είναι εντελώς ξεχωριστά μοντέλα δεδομένων, επομένως είναι αναλύονται χωριστά το ένα από το άλλο. Αλλά και οι δύο έχουν παρόμοιες δομές δέντρων, και οι δύο εξυπηρετούν τον ίδιο σκοπό: δίνοντας στο πρόγραμμα περιήγησης μια δομή για την απόδοση και τον εντοπισμό διαφόρων στοιχείων στη σελίδα.

Γιατί πρέπει να φροντίζουν οι προγραμματιστές του Web

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

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

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

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

Θα σας συνιστούσα να διαβάσετε αυτό το άρθρο για να μάθετε περισσότερα σχετικά με τους εξωτερικούς πόρους CSS / JS και τους χρόνους φόρτωσής τους.

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

Είναι δυνατό να χειριστεί το CSSOM χρησιμοποιώντας JavaScript, επειδή είναι τεχνικά ένα JS API. Αλλά δεν εξυπηρετεί μεγάλο μέρος ενός σκοπού σε σύγκριση με τη χειραγώγηση DOM DOM.

Ο μεγαλύτερος λόγος για να μάθετε για το CSSOM είναι να εκπαιδεύσετε περαιτέρω τον τρόπο με τον οποίο λειτουργούν οι ιστότοποι.

Υπάρχουν πολλά πράγματα που θεωρούμε δεδομένο ότι διατηρούν το Διαδίκτυο σε λειτουργία ομαλά. Όταν καταλαβαίνετε λίγο περισσότερο για όλη τη διαδικασία, μπορείτε να απεικονίσετε πώς το όλο θέμα έρχεται μαζί και ελπίζουμε να κερδίσετε κάποια εκτίμηση για την ύπαρξη του Παγκοσμίου Ιστού.

Περαιτέρω ανάγνωση

Ελπίζω ότι αυτή η εισαγωγή θα σας δώσει μια σταθερή ιδέα για το CSS Object Model και πώς επηρεάζει τις ιστοσελίδες. Εκεί δεν είναι πολλά να χειραγωγήσουν στην CSSOM, έτσι διαφέρει λίγο από το DOM.

Ωστόσο, εξακολουθεί να είναι μια κρίσιμη τεχνολογία στην ανάπτυξη ιστού, και θα πρέπει να διευκρινίσει σημαντικές πτυχές της rendering του προγράμματος περιήγησης.

Υπάρχουν πολλοί άλλοι πόροι που συζητούν την CSSOM και πώς λειτουργεί. Εάν θέλετε να μάθετε περισσότερα, εδώ είναι μερικές αναρτήσεις που προτείνω:

• Επισκόπηση μοντέλου αντικειμένων CSS
• Εξερεύνηση του CSSOM: Δημιουργία αναλυτή αντικειμένου CSS
• Τι πρέπει να γνωρίζει ο κάθε προγραμματιστής του Frontend για την απόδοση της ιστοσελίδας