1 什么是JavaScript的Defer屬性？

• 2 將Defer屬性添加到WordPress中使用的腳本
• 3 注意事項(xiàng)

WordPress延遲加載JavaScript，來加速頁(yè)面渲染方法。

什么是JavaScript的Defer屬性？

每個(gè)人都可能遇到過這種情況：

head中有N個(gè)腳本，在加載腳本時(shí)，會(huì)阻塞頁(yè)面渲染，這通常是空白的。

當(dāng)然，我們可以將源代碼中的腳本放入頁(yè)腳來解決這個(gè)問題。

但是，一些復(fù)雜的開發(fā)環(huán)境，會(huì)讓這個(gè)簡(jiǎn)單的工作變成特別復(fù)雜。

此時(shí)我們可以使用Defer屬性，這是JavaScript中相對(duì)少見的屬性。

你可能永遠(yuǎn)不會(huì)使用它，但我相信在閱讀這篇介紹后，我相信你不會(huì)離開它。

它的主要功能是讓腳本在加載整個(gè)頁(yè)面后再解析，而不是在加載時(shí)解析它，這為僅包含事件觸發(fā)的JavaScript的腳本提供了完整的頁(yè)面加載速度。

是的，如果Script腳本標(biāo)記具有延遲defer屬性，即使它被放置在head中，它也會(huì)在解析HTML頁(yè)面后執(zhí)行，這類似于將Script腳本放在頁(yè)面底部。

當(dāng)然，延遲的使用也是有限的，通常要注意2點(diǎn)：

1）不要在延遲defer類型腳本塊中，調(diào)用 document.write 命令；

• 因?yàn)?document.write 將產(chǎn)生直接輸出效果。

2）不要在Defer腳本中，包括任何立即執(zhí)行腳本，將使用全局變量或函數(shù)。

將Defer屬性添加到WordPress中使用的腳本

在WordPress中，我們?nèi)绾巫詣?dòng)將Defer屬性添加到WordPress使用的腳本？

我們可以將以下代碼添加到當(dāng)前主題的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";
};

• 上述代碼僅適用于，根據(jù)WordPress方式引入的JavaScript代碼才會(huì)有效。

注意事項(xiàng)

實(shí)時(shí)預(yù)覽管理可能會(huì)顯示空白：

若使用以上代碼，打開實(shí)時(shí)預(yù)覽管理（外觀?→?自定義）時(shí)，可能會(huì)顯示空白，所以請(qǐng)酌情使用。

在需要實(shí)時(shí)預(yù)覽管理時(shí)，將以上代碼注釋掉，自定義完成后才刪除注釋代碼。

PHP注釋代碼示例：

/*

這里是代碼 

*/

希望我們網(wǎng)站（ https://www.wordpressx.com/ ） 分享的《如何讓W(xué)ordPress延遲加載JavaScript加速頁(yè)面渲染？》，對(duì)您有幫助。