Πώς να κάνετε το WordPress να φορτώνει αργά τη JavaScript για να επιταχύνετε την απόδοση σελίδας;

WordPressΤεμπέλης φόρτωση JavaScript για επιτάχυνση των μεθόδων απόδοσης σελίδων.

Τι είναι η ιδιότητα Defer της JavaScript;

Όλοι πιθανότατα έχουν αντιμετωπίσει αυτήν την κατάσταση:

Υπάρχουν N σενάρια στην κεφαλή και όταν φορτώνονται τα σενάρια, η απόδοση της σελίδας αποκλείεται, η οποία είναι συνήθως κενή.

Φυσικά, μπορούμε να το ξεπεράσουμε βάζοντας το σενάριο στον πηγαίο κώδικα στο υποσέλιδο.

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

Σε αυτό το σημείο μπορούμε να χρησιμοποιήσουμε την ιδιότητα Defer, η οποία είναι μια σχετικά σπάνια ιδιότητα στο JavaScript.

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

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

Ναι, εάν η ετικέτα σεναρίου έχει ένα χαρακτηριστικό defer, θα εκτελεστεί μετά την ανάλυση της σελίδας HTML, ακόμη και αν τοποθετηθεί στην κεφαλή, κάτι που μοιάζει με το να τοποθετήσετε το σενάριο στο κάτω μέρος της σελίδας.

Φυσικά, η χρήση της καθυστέρησης είναι επίσης περιορισμένη, συνήθως δώστε προσοχή σε 2 σημεία:

1) Μην καλείτε την εντολή document.write σε μπλοκ δέσμης ενεργειών τύπου deferred defer.

• Επειδή το document.write θα παράγει άμεσο αποτέλεσμα εξόδου.

2) Μην χρησιμοποιείτε καθολικές μεταβλητές ή συναρτήσεις στα σενάρια Defer, συμπεριλαμβανομένων τυχόν σεναρίων άμεσης εκτέλεσης.

Προσθέστε το χαρακτηριστικό Defer στο σενάριο που χρησιμοποιείται στο WordPress

Στο WordPress, πώς μπορούμε να προσθέσουμε αυτόματα το χαρακτηριστικό Defer στα σενάρια που χρησιμοποιεί το WordPress;

Μπορούμε να προσθέσουμε τον ακόλουθο κώδικα στο αρχείο ▼ του τρέχοντος θέματος functions.php

add_filter( 'clean_url', 'wpcwl_defer_script',11,1);
function wpcwl_defer_script( $url ){
if(strpos($url, '.js') === false){
return $url;
}

return "$url' defer='defer";
};

• Ο παραπάνω κώδικας λειτουργεί μόνο, σύμφωνα μεΚώδικας JavaScript που εισήχθη από το WordPressθα είναι αποτελεσματική.

προφυλάξεις

Η Διαχείριση Ζωντανής Προεπισκόπησης ενδέχεται να εμφανίζεται κενό:

Εάν χρησιμοποιείτε τον παραπάνω κωδικό, όταν ανοίγετε τη διαχείριση προεπισκόπησης σε πραγματικό χρόνο (Εμφάνιση → Προσαρμογή), ενδέχεται να εμφανίζεται κενός, επομένως χρησιμοποιήστε τον όπως χρειάζεται.

Όταν απαιτείται διαχείριση προεπισκόπησης σε πραγματικό χρόνο, σχολιάστε τον παραπάνω κώδικα και διαγράψτε τον σχολιασμένο κώδικα μετά την ολοκλήρωση της προσαρμογής.

Παράδειγμα κώδικα σχολίου PHP:

/*

这里是代码 

*/