Mengoptimumkan Perpustakaan Luaran dengan Atribut penangguhan: Meningkatkan Kelajuan Halaman

Apabila membina tapak web, pembangun sering bergantung pada perpustakaan luaran untuk meningkatkan fungsi. Walaupun perpustakaan ini penting, ia boleh memberi kesan kepada prestasi kerana setiap skrip luaran memerlukan permintaan HTTP tambahan, dan penghuraian, penilaian dan pelaksanaannya boleh menyekat pemaparan kandungan utama pada halaman. Untuk menghalang skrip ini daripada menyekat proses pemaparan, pembangun boleh menggunakan atribut async atau tangguh apabila memautkan skrip luaran.

Peranan penangguhan
Atribut tangguh memastikan bahawa skrip tidak dilaksanakan sehingga penghuraian HTML selesai. Ini membantu dalam mempercepatkan pemaparan awal halaman. Walau bagaimanapun, apabila menggunakan perpustakaan luaran tertunda, anda mungkin menghadapi kes di mana fungsi tertentu (cth., memulakan peluncur, karusel atau animasi) gagal dijalankan seperti yang diharapkan. Ini berlaku kerana kod dalam skrip tertunda dilaksanakan hanya selepas HTML dihuraikan sepenuhnya, tetapi kadangkala perpustakaan luaran yang diperlukan mungkin tidak tersedia dalam masa.

Memahami DOMContentLoaded dan memuatkan Acara
Untuk memastikan bahawa kod tersuai anda bergantung pada perpustakaan luaran dilaksanakan dengan betul, anda perlu mengurus dengan teliti masa apabila kod anda dijalankan. Dua acara JavaScript amat berguna apabila berurusan dengan skrip tertunda

DOMContentLoaded: Peristiwa ini berlaku apabila dokumen HTML awal telah dimuatkan dan dihuraikan sepenuhnya, tanpa menunggu lembaran gaya, imej atau sumber luaran lain dimuatkan. Ia berguna apabila kod anda hanya bergantung pada struktur DOM yang sedang sedia.

document.addEventListener('DOMContentLoaded', function() { 
// Initialize your script once the DOM is fully parsed 

console.log("DOM is ready, but external resources might still be loading."); 
});

muatan: Peristiwa pemuatan berlaku apabila seluruh halaman, termasuk semua sumber bergantung seperti helaian gaya, imej dan skrip luaran, telah dimuatkan sepenuhnya. Acara ini memastikan semua sumber luaran yang diperlukan tersedia sebelum melaksanakan kod anda.

window.addEventListener('load', function() { 
// Execute code when the entire page and resources are loaded 

console.log("All resources including external scripts are fully loaded."); 
});

<script defer src="https://example.com"></script>
<script defer src="https://example2.com"></script>
<script>
    // Wait for the entire page, including scripts, to load
    window.addEventListener('load', function() {
        // Initialize example2 library with predefined configuration after all resources are fully loaded
        example2(somePredefinedConfig).functionCall();
    });
</script>

Atas ialah kandungan terperinci Mengoptimumkan Perpustakaan Luaran dengan Atribut penangguhan: Meningkatkan Kelajuan Halaman. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!