1 什么是JavaScript的Defer屬性？

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

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

什么是JavaScript的Defer屬性？

每個人都可能遇到過這種情況：

head中有N個腳本，在加載腳本時，會阻塞頁面渲染，這通常是空白的。

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

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

此時我們可以使用Defer屬性，這是JavaScript中相對少見的屬性。

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

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

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

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

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

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

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

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

在WordPress中，我們?nèi)绾巫詣訉efer屬性添加到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代碼才會有效。

注意事項

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

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

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

PHP注釋代碼示例：

/*

這里是代碼 

*/

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