Как заставить WordPress лениво загружать JavaScript, чтобы ускорить отрисовку страницы?

WordPress использует отложенную загрузку JavaScript для ускорения отрисовки страниц.

Что такое свойство Defer в JavaScript?

Наверное, каждый сталкивался с такой ситуацией:

В голове N скриптов, и при загрузке скриптов блокируется отрисовка страницы, которая обычно пустая.

Конечно, мы можем обойти это, поместив скрипт в исходном коде в нижний колонтитул.

Однако некоторые сложные среды разработки могут сделать эту простую задачу особенно сложной.

На этом этапе мы можем использовать свойство Defer, которое является относительно редким свойством в JavaScript.

Вы можете никогда не использовать его, но, прочитав это введение, я уверен, что вы не бросите его.

Его основная функция заключается в том, чтобы позволить сценарию выполнять синтаксический анализ после загрузки всей страницы, а не анализировать ее при загрузке, что обеспечивает полную скорость загрузки страницы для сценариев, содержащих только JavaScript, запускаемый событиями.

Да, если у тега script есть атрибут defer, он будет выполнен после разбора HTML-страницы, даже если он будет помещен в заголовок, что аналогично размещению скрипта внизу страницы.

Конечно, использование задержки тоже ограничено, обычно обращают внимание на 2 момента:

1) Не вызывайте команду document.write в блоке скрипта типа deferred defer;

• Потому что 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-комментария:

/*

这里是代码 

*/