Как да накарате WordPress да зарежда JavaScript отложено, за да ускори изобразяването на страници?

WordPressМързеливо зареждане на JavaScript за ускоряване на методите за изобразяване на страници.

Какво представлява свойството Defer на JavaScript?

Вероятно всеки се е сблъсквал с тази ситуация:

В главата има N скрипта и когато скриптовете се заредят, изобразяването на страницата е блокирано, което обикновено е празно.

Разбира се, можем да заобиколим това, като поставим скрипта в изходния код в долния колонтитул.

Някои сложни среди за разработка обаче могат да направят тази проста задача особено сложна.

На този етап можем да използваме свойството Defer, което е сравнително рядко свойство в JavaScript.

Може никога да не го използвате, но след като прочетете това въведение, съм сигурен, че няма да го оставите.

Основната му функция е да позволи на скрипта да анализира, след като цялата страница е заредена, вместо да я анализира при зареждане, което осигурява пълна скорост на зареждане на страницата за скриптове, които съдържат само задействан от събитие JavaScript.

Да, ако тагът на скрипта има атрибут defer, той ще бъде изпълнен след разбор на HTML страницата, дори ако е поставен в главата, което е подобно на поставянето на скрипта в долната част на страницата.

Разбира се, използването на забавяне също е ограничено, обикновено обръщайте внимание на 2 точки:

1) Не извиквайте командата document.write в скриптов блок от отложен тип;

• Тъй като document.write ще произведе директен изходен ефект.

2) Не използвайте глобални променливи или функции в скриптове за отлагане, включително всички скриптове за незабавно изпълнение.

Добавете атрибута 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 код за коментар:

/*

这里是代码 

*/