چگونه جاوا اسکریپت را بارگذاری تنبل وردپرس کنیم تا سرعت رندر صفحه را افزایش دهیم؟

وردپرسبارگذاری تنبل جاوا اسکریپت برای سرعت بخشیدن به روش های رندر صفحه.

ویژگی Defer جاوا اسکریپت چیست؟

همه احتمالاً با این وضعیت مواجه شده اند:

N اسکریپت در هد وجود دارد و وقتی اسکریپت بارگذاری می شود، رندر صفحه را که معمولاً خالی است مسدود می کند.

البته، ما می توانیم با قرار دادن اسکریپت در کد منبع در فوتر، از این موضوع دور شویم.

با این حال، برخی از محیط های توسعه پیچیده می توانند این کار ساده را به ویژه پیچیده کنند.

در این مرحله می توانیم از ویژگی Defer استفاده کنیم که یک ویژگی نسبتا کمیاب در جاوا اسکریپت است.

ممکن است هرگز از آن استفاده نکنید، اما پس از خواندن این مقدمه، مطمئن هستم که آن را ترک نخواهید کرد.

عملکرد اصلی آن این است که اجازه می دهد اسکریپت پس از بارگیری کل صفحه تجزیه شود، به جای تجزیه آن در بارگذاری، که سرعت بارگذاری کامل صفحه را برای اسکریپت هایی که فقط حاوی جاوا اسکریپت راه اندازی شده با رویداد هستند فراهم می کند.

بله، اگر تگ اسکریپت دارای ویژگی defer باشد، پس از تجزیه صفحه HTML حتی اگر در هد قرار داده شود، اجرا می شود که شبیه به قرار دادن اسکریپت در پایین صفحه است.

البته استفاده از تاخیر نیز محدود است، معمولا به 2 نکته توجه کنید:

1) دستور document.write را در بلوک اسکریپت نوع deferred defer فراخوانی نکنید.

• زیرا document.write اثر خروجی مستقیم ایجاد می کند.

2) از متغیرها یا توابع سراسری در اسکریپت های Defer، از جمله اسکریپت های اجرای فوری استفاده نکنید.

ویژگی Defer را به اسکریپت مورد استفاده در وردپرس اضافه کنید

در وردپرس چگونه می توانیم به طور خودکار ویژگی Defer را به اسکریپت های مورد استفاده وردپرس اضافه کنیم؟

ما می توانیم کد زیر را به فایل 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";
};

• کد بالا فقط مطابق با کار می کندکد جاوا اسکریپت معرفی شده توسط وردپرسموثر خواهد بود.

注意 事项

مدیریت پیش نمایش زنده ممکن است خالی نمایش داده شود:

اگر از کد بالا استفاده می‌کنید، وقتی مدیریت پیش‌نمایش بی‌درنگ (ظاهر → سفارشی‌سازی) را باز می‌کنید، ممکن است خالی نمایش داده شود، بنابراین لطفاً از آن در صورت لزوم استفاده کنید.

هنگامی که مدیریت پیش‌نمایش بلادرنگ مورد نیاز است، کد بالا را نظر دهید و پس از تکمیل سفارشی‌سازی، کد نظر داده شده را حذف کنید.

نمونه کد کامنت PHP:

/*

这里是代码 

*/