Paano gawing tamad ang pag-load ng WordPress ng JavaScript upang mapabilis ang pag-render ng pahina?

WordPressTamad na pag-load ng JavaScript upang mapabilis ang mga paraan ng pag-render ng page.

Ano ang pag-aari ng Defer ng JavaScript?

Ang lahat ay malamang na nakatagpo ng ganitong sitwasyon:

Mayroong N script sa ulo, at kapag na-load ang mga script, na-block ang pag-render ng page, na kadalasang blangko.

Siyempre, malalagpasan natin ito sa pamamagitan ng paglalagay ng script sa source code sa footer.

Gayunpaman, ang ilang kumplikadong kapaligiran sa pag-unlad ay maaaring gawing partikular na kumplikado ang simpleng gawaing ito.

Sa puntong ito maaari naming gamitin ang Defer property, na isang medyo bihirang property sa JavaScript.

Maaaring hindi mo ito gagamitin, ngunit pagkatapos basahin ang panimula na ito, sigurado akong hindi mo ito iiwan.

Ang pangunahing function nito ay hayaan ang script na mag-parse pagkatapos ma-load ang buong page, sa halip na i-parse ito sa pag-load, na nagbibigay ng buong bilis ng pag-load ng page para sa mga script na naglalaman lang ng JavaScript na na-trigger ng kaganapan.

Oo, kung ang script tag ay may defer attribute, ito ay isasagawa pagkatapos i-parse ang HTML page kahit na ito ay ilagay sa head, na katulad ng paglalagay ng script sa ibaba ng page.

Siyempre, ang paggamit ng pagkaantala ay limitado rin, kadalasang binibigyang pansin ang 2 puntos:

1) Huwag tawagan ang document.write command sa isang deferred defer type script block;

• Dahil ang document.write ay gagawa ng direktang output effect.

2) Huwag gumamit ng mga pandaigdigang variable o function sa mga Defer script, kabilang ang anumang agarang execution script.

Idagdag ang attribute na Defer sa script na ginamit sa WordPress

Sa WordPress, paano natin awtomatikong maidaragdag ang Defer attribute sa mga script na ginagamit ng WordPress?

Maaari naming idagdag ang sumusunod na code sa mga function ng kasalukuyang tema.php file ▼

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

• Ang code sa itaas ay gumagana lamang, ayon saJavaScript code na ipinakilala ng WordPressmagiging epektibo.

注意 事项

Maaaring magpakita ng blangko ang Pamamahala sa Live Preview:

Kung gagamitin mo ang code sa itaas, kapag binuksan mo ang real-time na pamamahala ng preview (Appearance → Customize), maaari itong magpakita ng blangko, kaya mangyaring gamitin ito kung naaangkop.

Kapag kailangan ang real-time na pamamahala ng preview, ikomento ang code sa itaas, at tanggalin ang nakomento na code pagkatapos makumpleto ang pag-customize.

Halimbawa ng code ng komento sa PHP:

/*

这里是代码 

*/