Як змусити WordPress відкладати JavaScript, щоб пришвидшити рендеринг сторінки?

WordPressЛіниве завантаження JavaScript для прискорення методів візуалізації сторінки.

Що таке властивість Defer JavaScript?

Напевно кожен стикався з такою ситуацією:

У голові є N скриптів, і коли скрипти завантажуються, відтворення сторінки блокується, яка зазвичай пуста.

Звичайно, ми можемо обійти це, розмістивши сценарій у вихідному коді в нижній колонтитул.

Однак деякі складні середовища розробки можуть зробити це просте завдання особливо складним.

На цьому етапі ми можемо використовувати властивість Defer, яка є відносно рідкісною властивістю в JavaScript.

Можливо, ви ніколи ним не скористаєтеся, але, прочитавши цей вступ, я впевнений, що ви не залишите його.

Його основна функція полягає в тому, щоб дозволити сценарію аналізувати після завантаження всієї сторінки, замість аналізу її під час завантаження, що забезпечує повну швидкість завантаження сторінки для сценаріїв, які містять лише викликаний подією JavaScript.

Так, якщо тег сценарію має атрибут defer, він буде виконано після аналізу сторінки HTML, навіть якщо його розміщено в заголовку, що подібно до розміщення сценарію внизу сторінки.

Звичайно, використання затримки також обмежене, зазвичай звертають увагу на 2 моменти:

1) Не викликайте команду document.write у блоці сценарію відкладеного типу;

• Тому що 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:

/*

这里是代码 

*/