ເຮັດແນວໃດເພື່ອເຮັດໃຫ້ WordPress ຂີ້ຄ້ານໂຫຼດ JavaScript ເພື່ອເພີ່ມຄວາມໄວໃນການສະແດງຫນ້າ?

WordPressLazy loading of JavaScript ເພື່ອເລັ່ງວິທີການສະແດງຫນ້າ.

ຄຸນສົມບັດ Defer ຂອງ JavaScript ແມ່ນຫຍັງ?

ທຸກຄົນຄົງເຄີຍພົບສະຖານະການນີ້:

ມີ N scripts ໃນຫົວ, ແລະເມື່ອສະຄິບຖືກໂຫລດ, ການສະແດງຫນ້າຈະຖືກບລັອກ, ເຊິ່ງປົກກະຕິແລ້ວແມ່ນຫວ່າງເປົ່າ.

ແນ່ນອນ, ພວກເຮົາສາມາດປະມານນີ້ໂດຍການວາງ script ໃນລະຫັດແຫຼ່ງເຂົ້າໄປໃນ footer.

ຢ່າງໃດກໍ່ຕາມ, ບາງສະພາບແວດລ້ອມການພັດທະນາທີ່ສັບສົນສາມາດເຮັດໃຫ້ວຽກງານທີ່ງ່າຍດາຍນີ້ສັບສົນໂດຍສະເພາະ.

ໃນຈຸດນີ້ພວກເຮົາສາມາດນໍາໃຊ້ຄຸນສົມບັດ Defer, ເຊິ່ງເປັນຊັບສິນທີ່ຂ້ອນຂ້າງຫາຍາກໃນ JavaScript.

ທ່ານອາດຈະບໍ່ເຄີຍໃຊ້ມັນ, ແຕ່ຫຼັງຈາກອ່ານບົດແນະນໍານີ້, ຂ້າພະເຈົ້າແນ່ໃຈວ່າທ່ານຈະບໍ່ປະໄວ້.

ຫນ້າທີ່ຕົ້ນຕໍຂອງມັນແມ່ນເພື່ອໃຫ້ script parse ຫຼັງຈາກຫນ້າທັງຫມົດຖືກໂຫລດ, ແທນທີ່ຈະ parsing ມັນໃນເວລາໂຫຼດ, ເຊິ່ງສະຫນອງຄວາມໄວການໂຫຼດຫນ້າເຕັມສໍາລັບ scripts ທີ່ມີພຽງແຕ່ເຫດການ - triggered JavaScript.

ແມ່ນແລ້ວ, ຖ້າແທໍກສະຄິບມີຄຸນລັກສະນະ defer, ມັນຈະຖືກປະຕິບັດຫຼັງຈາກການວິເຄາະຫນ້າ HTML ເຖິງແມ່ນວ່າມັນຖືກວາງໄວ້ໃນຫົວ, ເຊິ່ງຄ້າຍຄືກັບການວາງ script ຢູ່ດ້ານລຸ່ມຂອງຫນ້າ.

ແນ່ນອນ, ການນໍາໃຊ້ຄວາມລ່າຊ້າຍັງຈໍາກັດ, ປົກກະຕິແລ້ວເອົາໃຈໃສ່ 2 ຈຸດ:

1) ຫ້າມໂທຫາຄໍາສັ່ງ document.write ໃນ script block ປະເພດ deferred deferred;

• ເນື່ອງຈາກວ່າ 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:

/*

这里是代码 

*/