Kuinka saada WordPress lataamaan JavaScriptiä laiskasti sivun renderöinnin nopeuttamiseksi?

WordPressJavaScriptin laiska lataus sivun renderöintimenetelmien nopeuttamiseksi.

Mikä on JavaScriptin Defer-ominaisuus?

Jokainen on varmaan törmännyt tähän tilanteeseen:

Päässä on N skriptiä, ja kun skriptit ladataan, sivun renderöinti estyy, joka on yleensä tyhjä.

Voimme tietysti kiertää tämän laittamalla lähdekoodin komentosarjan alatunnisteeseen.

Jotkut monimutkaiset kehitysympäristöt voivat kuitenkin tehdä tästä yksinkertaisesta tehtävästä erityisen monimutkaisen.

Tässä vaiheessa voimme käyttää Defer-ominaisuutta, joka on suhteellisen harvinainen ominaisuus JavaScriptissä.

Et ehkä koskaan käytä sitä, mutta tämän johdannon lukemisen jälkeen olen varma, että et jätä sitä.

Sen päätehtävä on antaa komentosarjan jäsentää koko sivun latauksen jälkeen sen sijaan, että se jäsentäisi sitä latauksen yhteydessä, mikä tarjoaa täyden sivun latausnopeuden skripteille, jotka sisältävät vain tapahtuman käynnistämää JavaScriptiä.

Kyllä, jos komentosarjatunnisteella on defer-attribuutti, se suoritetaan HTML-sivun jäsentämisen jälkeen, vaikka se sijoitetaan päähän, mikä on samanlaista kuin komentosarjan sijoittaminen sivun alareunaan.

Tietysti myös viiveen käyttö on rajoitettua, kiinnitä yleensä huomiota 2 kohtaan:

1) Älä kutsu document.write-komentoa deferred defer -tyyppisessä komentosarjalohkossa;

• Koska document.write tuottaa suoran tulosteen.

2) Älä käytä yleisiä muuttujia tai funktioita Defer-skripteissä, mukaan lukien välittömästi suoritettavat komentosarjat.

Lisää Defer-attribuutti WordPressissä käytettävään skriptiin

Kuinka voimme lisätä WordPressissä Defer-attribuutin automaattisesti WordPressin käyttämiin skripteihin?

Voimme lisätä seuraavan koodin nykyisen teeman functions.php-tiedostoon ▼

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";
};

• Yllä oleva koodi toimii vain, mukaanWordPressin käyttöönottama JavaScript-kooditulee olemaan tehokasta.

注意 事项

Live-esikatselun hallinta saattaa näkyä tyhjänä:

Jos käytät yllä olevaa koodia, kun avaat reaaliaikaisen esikatselunhallinnan (Ulkoasu → Mukauta), se saattaa näkyä tyhjänä, joten käytä sitä tarpeen mukaan.

Kun reaaliaikaista esikatselun hallintaa tarvitaan, kommentoi yllä oleva koodi ja poista kommentoitu koodi, kun mukauttaminen on valmis.

PHP-kommenttikoodiesimerkki:

/*

这里是代码 

*/