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

Σύμφωνα με το Lighthouse, η πολυπλοκότητα του Η δομή DOM μετράται χρησιμοποιώντας τρεις μετρήσεις. Για να παρέχετε αυτές τις μετρήσεις με τα σημεία αναφοράς τους:

  • Ο συνολικός αριθμός των ετικετών πρέπει να είναι λιγότερο από 1500
  • Το μέγιστο βάθος ετικέτας πρέπει να είναι λιγότερο από 32
  • Ο μέγιστος αριθμός θυγατρικών ετικετών πρέπει να είναι λιγότερο από 60

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

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

Τα σημεία όπου ένα διογκωμένο DOM επηρεάζει αρνητικά την απόδοση της σελίδας περιλαμβάνουν:

  • Σελίδες με μεγάλο αριθμό κόμβων (ετικέτες) θα εμφανιστούν συμφόρηση δικτύου και δυσκολία φόρτωσης λόγω του μεγάλου μεγέθους τους, αυξάνοντας έτσι το TTFB (Time to First Byte).
  • Απόδοση φορτωμένων κόμβων για δημιουργία οι θέσεις και τα στυλ τους απαιτεί χρόνο, αυξάνοντας έτσι το FCP (First Contentful Paint).
  • Καθώς ο αριθμός των κόμβων αυξάνεται, το απαραίτητο φορτίο με Οι χειρισμοί JavaScript επιβαρύνουν τη μνήμη, αυξάνοντας το TFT (Time to Interactive).

Για να επεξηγήσετε τη βελτιστοποίηση DOM με ένα πολύ απλό παράδειγμα, εξετάστε τα ακόλουθα όπου τόσο ο αριθμός όσο και το βάθος του DOM μειώνονται:

<div id="nav-element">
 <ul>
 </ul>
</div>

Αντί να κάνετε αυτό:

<ul id="nav-element">
</ul>

Είναι απαραίτητο να το κάνετε αυτό: Οι δύο πιο συνιστώμενες μέθοδοι για τη μείωση του μεγέθους DOM είναι η τεμπέλης φόρτωση και η σελιδοποίηση. Δεδομένου ότι οι δομές καρτών στις σελίδες καταχώρισης περιέχουν πολύ DOM, προτείνεται άπειρη κύλιση ή σελιδοποίηση. Όταν αποφασίζετε για τον αριθμό των στοιχείων στη σελιδοποίηση, πρέπει οπωσδήποτε να ληφθούν υπόψη τα κριτήρια μέτρησης DOM. Ο χρόνος που συνήθως θεωρείται ο αριθμός των προϊόντων στη σελιδοποίηση είναι 15-20 δευτερόλεπτα, αλλά αυτό το τμήμα θα πρέπει στην πραγματικότητα να υπολογιστεί από την πλευρά του ενδιαφερόμενου μέρους του frontend, λαμβάνοντας υπόψη το μέγεθος DOM.

Μία από τις πολύ απλές λύσεις είναι να μην προσθέσετε στοιχεία που δεν είναι ορατά στη σελίδα στο HTML χωρίς να τα κρύβετε με CSS. Εάν ένα στοιχείο πρέπει να εμφανιστεί, θα πρέπει να κληθεί αργότερα και να εμφανιστεί στον χρήστη. Θα πρέπει να γνωρίζετε ότι η απόκρυψη στοιχείων με CSS μεγεθύνει το DOM.

Πηγές: