Πώς να επιταχύνετε τον ιστότοπο με ετικέτα

"Πρόβλεψη"Τα προγράμματα περιήγησης είναι το μέλλον του surf surfing στο Internet, μας φέρνουν πόρους που θέλουμε ακόμη και πριν γνωρίζουμε ότι τα θέλουμε. Τα ήδη υπάρχοντα προγράμματα περιήγησης φτιαχνω, κανω μερικοί προβλέψεις για να επιταχύνουν την παραλαβή και την απόδοση εγγράφων. Για να το κάνουμε αυτό στο επόμενο βήμα, δεν βλέπουμε κανέναν άλλο από τους προγραμματιστές ιστού.

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

Ανανέωση των αιτημάτων HTTP

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

Εδώ είναι τι συμβαίνει στη συνέχεια:

1. Ο Joe ορίζει την ανθρώπινη αναδρομική διεύθυνση του ιστότοπου στη γραμμή διευθύνσεων ενός προγράμματος περιήγησης και πατάει "Enter".
2. Μόλις λάβει τη διεύθυνση αυτή, το πρόγραμμα περιήγησης ζητά από έναν διακομιστή DNS (συμπλήρωση ISP) για τη διεύθυνση IP της διεύθυνσης που έδωσε ο Joe.
3. Ο διακομιστής DNS υποχρεώνει.
4. Τώρα που το πρόγραμμα περιήγησης γνωρίζει τη διεύθυνση IP, στέλνει ένα μήνυμα (στο TCP dialect) στον εξυπηρετητή του ιστοτόπου, ζητώντας μια σύνδεση.
5. Αν ο διακομιστής είναι ζωντανός και καλά, στέλνει μια απάντηση που αναγνωρίζει το αίτημα του προγράμματος περιήγησης και το πρόγραμμα περιήγησης απαντά και αναγνωρίζει το μήνυμα του διακομιστή. (Σημείωση: Ναι, αυτή είναι μια εξαιρετικά αποδυναμωμένη έκδοση μιας χειραψίας TCP μεταξύ ενός πελάτη και ενός διακομιστή.)
6. Όταν οι χειραψίες έχουν τελειώσει, υπάρχει σύνδεση μεταξύ των δύο.
7. Τώρα, το πρόγραμμα περιήγησης αλλάζει το στυλ διαλέκτου του σε HTTP και ζητά από τον διακομιστή για τον ιστότοπο.
8. Ο διακομιστής, γνωρίζοντας την αρχική σελίδα του δικτυακού τόπου, επιστρέφει ακριβώς αυτό, το οποίο λαμβάνεται από το πρόγραμμα περιήγησης και εμφανίζεται στον Joe ο οποίος περιμένει πολύ υπομονετικά μπροστά στον υπολογιστή.

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

Συνδέσεις HTML Link

Το W3C καθορίζει 4 σχέσεις HTML (rel για τη σχέση) dns-prefetch, Προεγκατάσταση, prefetch, και προκαταβολή. Μαζί καλούνται (από το W3C)Υποδείξεις πόρων"Τώρα, θα δούμε τι μπορούν να κάνουν και όπου μπορούν να χρησιμοποιηθούν.

1. Προετοιμασία DNS

Στην προεπιλογή DNS, το την ανάλυση ονόματος τομέα (γνωστός και ως λήψη της αντιστοιχίας διεύθυνσης IP από το διακομιστή DNS) εκτελείται μπροστά από το χρόνο.

Ας πούμε ότι υπάρχει μια σελίδα αναφοράς σε έναν ιστότοπο με πολλές συνδέσεις αναφοράς στον ιστότοπό της. Όταν ένας χρήστης επισκέπτεται τη σελίδα αναφοράς, υπάρχει ένα υψηλή πιθανότητα ότι ο χρήστης θα μεταβεί στον ιστότοπο αδελφών. Έτσι, ένα πρώιμη αναζήτηση DNS για το site αδελφή μπορεί να μειώσει το χρόνο που χρειάζεται για να ανοίξει το site (βελτιώνοντας έτσι την εμπειρία του χρήστη).

Αυτό μείωση καθυστέρησης μέσω της προφόρτωσης DNS μπορεί να γίνει προσθέτοντας αυτόν τον κώδικα στη σελίδα αναφοράς.

Όταν ένα πρόγραμμα περιήγησης επεξεργάζεται αυτόν τον κώδικα στη σελίδα αναφοράς, θα προσθέσει την αναζήτηση DNS του ιστότοπου αδελφών στις ουρές εργασιών του και όταν δεν υπάρχει άλλες εργασίες υψηλής προτεραιότητας στην ουρά, θα ξεκινήσει η ανάλυση DNS του αδελφή περιοχή.

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

Αυτή η λειτουργία διατίθεται σχεδόν σε όλα τα σύγχρονα προγράμματα περιήγησης εκτός από το Safari από τον Μάρτιο του 2016.

2. Προωθήστε

Το Preconnect είναι ένα βήμα πιο πέρα ​​από το prefetch του DNS, δημιουργεί μια σύνδεση με τον εξυπηρετητή στον οποίο ενδέχεται να υπάρξει μια αίτηση που θα σταλεί αργότερα στο μέλλον.

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

Στην περίπτωση αυτή, το επόμενο αίτημα ενός προγράμματος περιήγησης (ανακατευθυνόμενος ιστότοπος) είναι 100% προβλέψιμη, και μπορώ να συνδεθείτε, προς το μειώστε την καθυστέρηση πλοήγησης.

Φανταστείτε ότι υπάρχει μια ενδιάμεση σελίδα ιστότοπου που ανακατευθύνει σε "xyzsite", ο ακόλουθος σύνδεσμος HTML θα κάνει το πρόγραμμα περιήγησης να συνδεθεί με το διακομιστή xyzsite, όταν φτάσει σε εκείνη τη σελίδα μεσάζοντα.

Από τον Μάρτιο του 2016, αυτό είναι διαθέσιμο σε Chrome, Opera και Firefox.

3. Προετοιμασία

Με prefetch, για έναν πόρο, το πρόγραμμα περιήγησης ξεκινά την εφαρμογή της ανάλυσης DNS του ονόματος τομέα του πόρου, έπειτα εκτελεί μια σύνδεση TCP με το διακομιστή του πόρου, κάνει το αίτημα HTTP και τελικά ανακτά και αποθηκεύει τον προεγκατεστημένο πόρο στην κρυφή μνήμη του προγράμματος περιήγησης.

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

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

Το Prefetch υποστηρίζεται από το Chrome, τον Firefox και την Opera.

4. Προκαταβολή

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

Έτσι, προκαταβολή πρέπει να είναι χρησιμοποιείται με προσοχή, και δεν χρησιμοποιείται υπερβολικά. Η προσθήκη του παρακάτω κώδικα θα προκαθορίσει εκ των προτέρων τη σελίδα "Πληροφορίες".

Η προεπιλογή είναι ήδη διαθέσιμη στο Chrome, IE και Opera από τον Μάρτιο του 2016.

Λίγα πράγματα προς σημείωση

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

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

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

(2) Το W3C καθορίζει α Χαρακτηριστικό σύνδεσης HTML που ονομάζεται πιθανότητα υπαινιγμό, pr (με τιμή 0 έως 1) για αυτές τις υποδείξεις πόρων, οι οποίες μπορούν να χρησιμοποιηθούν για να δώσουν την πιθανότητα αιτήσεων που θα γίνουν στο μέλλον. Δεν έχω δει αυτό το χαρακτηριστικό να εφαρμόζεται από οποιοδήποτε πρόγραμμα περιήγησης ακόμα. Για παράδειγμα, ο ακόλουθος κώδικας δηλώνει ότι υπάρχει μια πιθανότητα xyzsite κατά 80% που θα ζητηθεί στο μέλλον και το 30% για την περίπου σελίδα.

Μπορούμε επίσης να προσθέσουμε το προαιρετικό χαρακτηριστικό crossorigin στις υποδείξεις πόρων για να ενημερώσουμε το πρόγραμμα περιήγησης σχετικά με τις πιστοποιήσεις CORS της συνδεδεμένης αίτησης.