Hoe meitsje jo WordPress lazy load JavaScript om de rendering fan side te fersnellen?

WordPressLazy laden fan JavaScript om metoaden foar it werjaan fan pagina's te fersnellen.

Wat is JavaScript's Defer-eigendom?

Elkenien hat wierskynlik dizze situaasje tsjinkaam:

D'r binne N skripts yn 'e holle, en as de skripts wurde laden, wurdt de side-rendering blokkearre, dy't normaal leech is.

Fansels kinne wy ​​dit omgean troch it skript yn 'e boarnekoade yn' e footer te setten.

Guon komplekse ûntwikkelingsomjouwings kinne dizze ienfâldige taak lykwols benammen kompleks meitsje.

Op dit punt kinne wy ​​​​de Defer-eigenskip brûke, dat is in relatyf seldsume eigenskip yn JavaScript.

Jo meie nea brûke it, mar nei it lêzen fan dizze ynlieding, Ik bin der wis fan dat jo sille net ferlitte it.

De haadfunksje dêrfan is om it skript te parsearjen nei't de heule side is laden, ynstee fan it te parsearjen by it laden, wat de folsleine side-laadsnelheid leveret foar skripts dy't allinich JavaScript-triggered JavaScript befetsje.

Ja, as de skripttag in defer-attribút hat, sil it útfierd wurde nei it parsearjen fan de HTML-side, sels as it yn 'e kop pleatst is, wat gelyk is oan it pleatsen fan it skript oan' e ûnderkant fan 'e side.

Fansels, it brûken fan fertraging is ek beheind, meastal omtinken oan 2 punten:

1) Net neame it document.write kommando yn in útsteld defer type skript blok;

• Omdat document.write sil produsearje direkte útfier effekt.

2) Brûk gjin globale fariabelen of funksjes yn Defer-skripts, ynklusyf alle direkte útfieringsskripts.

Foegje it Defer-attribút ta oan it skript dat wurdt brûkt yn WordPress

Hoe kinne wy ​​yn WordPress automatysk it Defer-attribút tafoegje oan de skripts dy't brûkt wurde troch WordPress?

Wy kinne de folgjende koade tafoegje oan it aktuele tema's functions.php-bestân ▼

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

• De boppesteande koade allinnich wurket, neffensJavaScript-koade yntrodusearre troch WordPresssil wêze effektyf.

Foarsoarchsmaatregels

Live Preview Management kin leech werjaan:

As jo ​​​​de boppesteande koade brûke, as jo it real-time foarbyldbehear iepenje (Utsjen → Oanpasse), kin it leech werjaan, dus brûk it asjebleaft as passend.

As real-time foarbyldbehear fereaske is, kommintaar dan boppesteande koade en wiskje de kommentearre koade neidat de oanpassing is foltôge.

Foarbyld fan PHP-kommentaarkoade:

/*

这里是代码 

*/