كيف تجعل WordPress تحميل JavaScript بطيئًا لتسريع عرض الصفحة؟

WordPressالتحميل الكسول لجافا سكريبت لتسريع طرق عرض الصفحة.

ما هي خاصية تأجيل JavaScript؟

ربما واجه الجميع هذا الموقف:

هناك نصوص برمجية N في الرأس ، وعندما يتم تحميل البرنامج النصي ، فإنه سيمنع عرض الصفحة ، والذي يكون عادةً فارغًا.

بالطبع ، يمكننا التغلب على هذا من خلال وضع البرنامج النصي في الكود المصدري في التذييل.

ومع ذلك ، يمكن لبعض بيئات التطوير المعقدة أن تجعل هذه المهمة البسيطة معقدة بشكل خاص.

في هذه المرحلة ، يمكننا استخدام خاصية Defer ، وهي خاصية نادرة نسبيًا في JavaScript.

قد لا تستخدمها أبدًا ، ولكن بعد قراءة هذه المقدمة ، أنا متأكد من أنك لن تتركها.

وتتمثل وظيفته الرئيسية في السماح للنص بالتحليل بعد تحميل الصفحة بأكملها ، بدلاً من تحليله عند التحميل ، مما يوفر سرعة تحميل كاملة للصفحة للنصوص التي تحتوي فقط على JavaScript تم تشغيله بواسطة الأحداث.

نعم ، إذا كانت علامة البرنامج النصي تحتوي على سمة تأجيل ، فسيتم تنفيذها بعد تحليل صفحة HTML حتى إذا تم وضعها في الرأس ، وهو ما يشبه وضع البرنامج النصي في أسفل الصفحة.

بالطبع ، استخدام التأخير محدود أيضًا ، فعادةً ما يجب الانتباه إلى نقطتين:

1) لا تستدعي الأمر document.write في كتلة نصية مؤجلة من النوع المؤجل ؛

• لأن document.write ستنتج تأثير إخراج مباشر.

2) لا تستخدم المتغيرات أو الوظائف العامة في نصوص تأجيل ، بما في ذلك أي نصوص تنفيذ فورية.

أضف سمة تأجيل إلى البرامج النصية المستخدمة في ووردبريس

في WordPress ، كيف يمكننا إضافة سمة Defer تلقائيًا إلى البرامج النصية التي يستخدمها WordPress؟

يمكننا إضافة الكود التالي إلى ملف function.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:

/*

这里是代码 

*/