Απαιτήσεις: Όταν ζητάτε έναν ιστότοπο, πρέπει να φορτώσετε πολλούς πόρους, τα αιτήματα δικτύου επηρεάζουν επίσης την ταχύτητα απόδοσης ιστοσελίδων, όταν ο χρήστης κάνει κλικ στη λειτουργία για τη φόρτωση ορισμένων πόρων μπορεί να επηρεάσει την εμπειρία του χρήστη, τώρα η ταχεία ανάπτυξη του Διαδικτύου, το εύρος ζώνης και η επισκεψιμότητα δεν είναι πλέον τόσο ακριβά, πώς να προφορτώσετε πόρους εκ των προτέρων ή να δημιουργήσετε έναν σύνδεσμο με τον διακομιστή προορισμού εκ των προτέρων;
Προσύνδεση
Η λέξη-κλειδί preconnect για ιδιότητες στοιχείου είναι μια υπόδειξη προς το πρόγραμμα περιήγησης ότι ο χρήστης μπορεί να χρειαστεί πόρους από την πηγή προορισμού, ώστε το πρόγραμμα περιήγησης να μπορεί να τους χρησιμοποιήσειΒελτιώστε την εμπειρία χρήστη ξεκινώντας προληπτικά συνδέσεις σε αυτήν την προέλευση。
Η προσύνδεση επιτρέπει στο πρόγραμμα περιήγησης να εκτελεί μια σειρά ενεργειών πριν από την επίσημη αποστολή ενός αιτήματος HTTP στον διακομιστή, συμπεριλαμβανομένης της ανάλυσης DNS, της διαπραγμάτευσης TLS, της χειραψίας TCP, η οποία εξαλείφει τον λανθάνοντα χρόνο μετ' επιστροφής και εξοικονομεί χρόνο για τον χρήστη.
Η προσύνδεση είναι ένα σημαντικό μέσο βελτιστοποίησης για τη μείωση της διαδρομής μετ' επιστροφής σε πολλά αιτήματα - σε ορισμένες περιπτώσεις κατά εκατοντάδες ή χιλιάδες χιλιοστά του δευτερολέπτου καθυστέρησης.
Ακολουθεί ένα παράδειγμα χρήσης προσύνδεσης για γραμματοσειρές Google, όπου προσθέτοντας μια προτροπή προσύνδεσης στο fonts.gstatic.com, το πρόγραμμα περιήγησης θα ξεκινήσει αμέσως ένα αίτημα που θα εκτελεστεί παράλληλα με το αίτημα CSS. Σε αυτό το σενάριο, η προσύνδεση εξαλείφει τρία RTT (Χρόνος μετ' επιστροφής) από την κρίσιμη διαδρομή καιΜειωμένη καθυστέρηση κατά περισσότερο από μισό δευτερόλεπτο。
Η σύνταξη έχει ως εξής:
Τεκμηρίωση:Η σύνδεση με υπερσύνδεσμο είναι ορατή.
Το DNS-prefetch χρησιμοποιεί DNS prefetch
Η λέξη-κλειδί dns-prefetch του χαρακτηριστικού στοιχείου είναι να ειδοποιεί το πρόγραμμα περιήγησης στον χρήστη ότι ο χρήστης μπορεί να χρειαστεί έναν πόρο από την πηγή προορισμού, ώστε το πρόγραμμα περιήγησης να μπορεί να βελτιώσει την εμπειρία χρήστη εκτελώντας προληπτικά ανάλυση DNS για αυτήν την πηγή.
Η προφόρτωση DNS επιτρέπει στο πρόγραμμα περιήγησης να βρίσκεται στη σελίδα ενώ ο χρήστης περιηγείταιΕκτελέστε ανάλυση DNS στο παρασκήνιο。 Με αυτόν τον τρόπο, η ανάλυση DNS ολοκληρώνεται όταν ο χρήστης κάνει κλικ σε έναν σύνδεσμο, επομένως η καθυστέρηση μπορεί να μειωθεί. Η προανάκτηση DNS μιας δεδομένης διεύθυνσης URL μπορεί να γίνει προσθέτοντας rel="dns-prefetch' στις ιδιότητες μιας ετικέτας συνδέσμου, συνιστούμε να χειρίζεστε γραμματοσειρές Google, Google Analytics και CDN.
«Τα αιτήματα DNS έχουν πολύ μικρή κίνηση εύρους ζώνης, αλλά η καθυστέρηση μπορεί να είναι υψηλή, ειδικά σε κινητές συσκευές. Το DNS που καθορίζεται από την προφόρτωση μπορεί να μειώσει σημαντικά τον λανθάνοντα χρόνο σε ορισμένα σενάρια, όπως όταν ένας χρήστης κάνει κλικ σε έναν σύνδεσμο. Μερικές φορές, ακόμη και μια καθυστέρηση ενός δευτερολέπτου μπορεί να μειωθεί - Mozilla Developer Network"
Η σύνταξη έχει ως εξής:
Τεκμηρίωση:Η σύνδεση με υπερσύνδεσμο είναι ορατή.
Προφόρτωση προφορτωμένη
Η τιμή προφόρτωσης της ιδιότητας στοιχείου σάς επιτρέπει να δηλώσετε ένα αίτημα ανάκτησης σε HTML, καθορίζοντας τους πόρους που θα χρειαστεί σύντομα η σελίδα και θέλετε να ξεκινήσετε τη φόρτωση νωρίς στον κύκλο ζωής της σελίδας, πριν ξεκινήσει ο κύριος μηχανισμός απόδοσης του προγράμματος περιήγησης. Αυτό διασφαλίζει ότι είναι διαθέσιμα νωρίτερα και λιγότερο πιθανό να μπλοκάρουν την απόδοση της σελίδας, βελτιώνοντας την απόδοση. Ακόμα κι αν το όνομα περιέχει τον όρο φόρτωση, δεν φορτώνει και δεν εκτελεί το σενάριο, αλλά απλώς το προγραμματίζει για λήψη και προσωρινή αποθήκευση με υψηλότερη προτεραιότητα.
Η προφόρτωση είναι ένα νέο πρότυπο ιστού που ελέγχει τον τρόπο φόρτωσης συγκεκριμένων πόρων, μια αναβάθμιση στην προφόρτωση δευτερευόντων πόρων, η οποία καταργήθηκε τον Ιανουάριο του 2016. Αυτή η εντολή μπορεί <link> να χρησιμοποιηθεί στο , π.χ. <link rel="preload">. Γενικά, είναι καλύτερο να χρησιμοποιείτε την προφόρτωση για να φορτώσετε τους πιο σημαντικούς πόρους σας, όπως εικόνες, CSS, JavaScript και αρχεία γραμματοσειρών. Αυτό δεν πρέπει να συγχέεται με την προφόρτωση του προγράμματος περιήγησης, η οποία προφορτώνει μόνο πόρους που δηλώνονται σε HTML. Η οδηγία προφόρτωσης στην πραγματικότητα ξεπερνά αυτόν τον περιορισμό και επιτρέπει την προφόρτωση πόρων που ορίζονται σε CSS και JavaScript και επιτρέπει αποφάσεις σχετικά με το πότε θα εφαρμοστεί κάθε πόρος.
Η προφόρτωση διαφέρει από την προφόρτωση στο ότι εστιάζει στην τρέχουσα σελίδα και φορτώνει πόρους με υψηλή προτεραιότητα, ενώ η προφόρτωση εστιάζει στον πόρο που θα φορτώσει η επόμενη σελίδα και φορτώνει με χαμηλή προτεραιότητα. Σημειώστε επίσης ότι η προφόρτωση δεν αποκλείει το συμβάν φόρτωσης του παραθύρου.
Μπορούν να προφορτωθούν πολλοί διαφορετικοί τύποι περιεχομένου. Οι πιθανές ως τιμές ακινήτων είναι:
ήχος: Ένα αρχείο ήχου, που χρησιμοποιείται συνήθως για <audio>.
document: 旨在由<frame>或嵌入的 HTML 文档<iframe>。
embed: Ο πόρος που θα ενσωματωθεί <embed>στο στοιχείο.
fetch: Ένας πόρος στον οποίο μπορείτε να αποκτήσετε πρόσβαση μέσω αιτήματος fetch ή XHR, όπως ένα αρχείο ArrayBuffer ή JSON.
font: 字体文件。
image: Αρχείο εικόνας.
object: Ο πόρος που θα ενσωματωθεί <object>στο στοιχείο.
script: JavaScript 文件。
style: CSS 样式表。
track: WebVTT 文件。
εργαζόμενος: Εργαζόμενος ιστού JavaScript ή κοινόχρηστος εργαζόμενος.
Βίντεο: Ένα αρχείο βίντεο, που χρησιμοποιείται συνήθως για <video>.
Η σύνταξη έχει ως εξής:
Τεκμηρίωση:Η σύνδεση με υπερσύνδεσμο είναι ορατή.
|
Δημοσιεύτηκε στις 26/9/2022 9:45:08 μ.μ.
|
|
|
|
Δημοσιεύτηκε στις 28/9/2022 8:54:26 π.μ.
|
