Hoe WordPress lui JavaScript te laten laden om het renderen van pagina's te versnellen?

WordPressLui laden van JavaScript om de weergavemethoden voor pagina's te versnellen.

Wat is de eigenschap Defer van JavaScript?

Iedereen heeft deze situatie waarschijnlijk wel eens meegemaakt:

Er zijn N scripts in de head en wanneer de scripts worden geladen, wordt de paginaweergave geblokkeerd, wat meestal leeg is.

Natuurlijk kunnen we dit omzeilen door het script in de broncode in de voettekst te plaatsen.

Sommige complexe ontwikkelomgevingen kunnen deze eenvoudige taak echter bijzonder complex maken.

Op dit punt kunnen we de eigenschap Defer gebruiken, een relatief zeldzame eigenschap in JavaScript.

Je zult het misschien nooit gebruiken, maar na het lezen van deze inleiding weet ik zeker dat je het niet zult verlaten.

De belangrijkste functie is om het script te laten parseren nadat de hele pagina is geladen, in plaats van het tijdens het laden te parseren, wat zorgt voor een volledige laadsnelheid van de pagina voor scripts die alleen door gebeurtenissen geactiveerd JavaScript bevatten.

Ja, als de scripttag een defer-attribuut heeft, wordt deze uitgevoerd na het ontleden van de HTML-pagina, zelfs als deze in de head is geplaatst, wat vergelijkbaar is met het plaatsen van het script onder aan de pagina.

Natuurlijk is het gebruik van vertraging ook beperkt, let meestal op 2 punten:

1) Roep de opdracht document.write niet aan in een scriptblok van het uitgestelde uitgestelde type;

• Omdat document.write een direct uitvoereffect zal produceren.

2) Gebruik geen globale variabelen of functies in Defer-scripts, inclusief scripts voor onmiddellijke uitvoering.

Voeg het kenmerk Defer toe aan het script dat in WordPress wordt gebruikt

Hoe kunnen we in WordPress automatisch het kenmerk Defer toevoegen aan de scripts die door WordPress worden gebruikt?

We kunnen de volgende code toevoegen aan het functions.php-bestand van het huidige thema ▼

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 bovenstaande code werkt alleen, volgens:JavaScript-code geïntroduceerd door WordPresseffectief zal zijn.

注意 事项

Live preview-beheer kan leeg worden weergegeven:

Als u de bovenstaande code gebruikt, wanneer u het realtime voorbeeldbeheer opent (Uiterlijk → Aanpassen), kan deze leeg worden weergegeven, dus gebruik deze indien van toepassing.

Wanneer realtime voorbeeldbeheer vereist is, becommentarieert u de bovenstaande code en verwijdert u de becommentarieerde code nadat de aanpassing is voltooid.

Voorbeeld van PHP-commentaarcode:

/*

这里是代码 

*/