Bagaimana untuk menjadikan WordPress malas memuatkan JavaScript untuk mempercepatkan pemaparan halaman?

WordPressMalas memuatkan JavaScript untuk mempercepatkan kaedah pemaparan halaman.

Apakah sifat Tangguh JavaScript?

Semua orang mungkin pernah menghadapi situasi ini:

Terdapat skrip N di kepala, dan apabila skrip dimuatkan, pemaparan halaman disekat, yang biasanya kosong.

Sudah tentu, kita boleh mengatasinya dengan meletakkan skrip dalam kod sumber ke dalam pengaki.

Walau bagaimanapun, sesetengah persekitaran pembangunan yang kompleks boleh menjadikan tugas mudah ini sangat rumit.

Pada ketika ini kita boleh menggunakan sifat Defer, yang merupakan sifat yang agak jarang berlaku dalam JavaScript.

Anda mungkin tidak pernah menggunakannya, tetapi selepas membaca pengenalan ini, saya pasti anda tidak akan meninggalkannya.

Fungsi utamanya ialah untuk membenarkan skrip menghuraikan selepas keseluruhan halaman dimuatkan, bukannya menghuraikannya semasa dimuatkan, yang memberikan kelajuan pemuatan halaman penuh untuk skrip yang hanya mengandungi JavaScript yang dicetuskan oleh peristiwa.

Ya, jika teg skrip mempunyai atribut tangguh, ia akan dilaksanakan selepas menghuraikan halaman HTML walaupun ia diletakkan di kepala, yang serupa dengan meletakkan skrip di bahagian bawah halaman.

Sudah tentu, penggunaan kelewatan juga terhad, biasanya memberi perhatian kepada 2 mata:

1) Jangan panggil arahan document.write dalam blok skrip jenis penangguhan tertunda;

• Kerana document.write akan menghasilkan kesan output langsung.

2) Jangan gunakan pembolehubah atau fungsi global dalam skrip Tangguh, termasuk sebarang skrip pelaksanaan segera.

Tambahkan atribut Defer pada skrip yang digunakan dalam WordPress

Dalam WordPress, bagaimanakah kita boleh menambah atribut Defer secara automatik pada skrip yang digunakan oleh WordPress?

Kita boleh menambah kod berikut pada fail functions.php tema semasa ▼

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";
};

• Kod di atas hanya berfungsi, menurutKod JavaScript yang diperkenalkan oleh WordPressakan berkesan.

注意 事项

Pengurusan Pratonton Langsung mungkin memaparkan kosong:

Jika anda menggunakan kod di atas, apabila anda membuka pengurusan pratonton masa nyata (Penampilan → Sesuaikan), ia mungkin dipaparkan kosong, jadi sila gunakannya mengikut kesesuaian.

Apabila pengurusan pratonton masa nyata diperlukan, ulas kod di atas dan padamkan kod yang diulas selepas penyesuaian selesai.

Contoh kod komen PHP:

/*

这里是代码 

*/