Як прымусіць 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:

/*

这里是代码 

*/