如何讓WordPress延遲加載JavaScript加速頁面渲染？

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

什麼是JavaScript的Defer屬性？

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

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

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

但是，一些複雜的開發環境，會讓這個簡單的工作變成特別複雜。

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

你可能永遠不會使用它，但我相信在閱讀這篇介紹後，我相信你不會離開它。

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

是的，如果Script腳本標記具有延遲defer屬性，即使它被放置在head中，它也會在解析HTML頁面後執行，這類似於將Script腳本放在頁面底部。

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

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

• 因為document.write 將產生直接輸出效果。

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

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

• 上述代碼僅適用於，根據WordPress方式引入的JavaScript代碼才會有效。

注意事項

實時預覽管理可能會顯示空白：

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

在需要實時預覽管理時，將以上代碼註釋掉，自定義完成後才刪除註釋代碼。

PHP註釋代碼示例：

/*

这里是代码 

*/