Bagaimanakah Kami Boleh Meningkatkan Kelajuan Pemuatan Halaman dengan Teknik Pemuatan Skrip Asynchronous?

Teknik Pemuatan Skrip Asynchronous

Banyak aplikasi web bergantung pada memuatkan berbilang skrip dan fail CSS untuk menyediakan kefungsian yang dipertingkatkan. Walau bagaimanapun, pemuatan segerak boleh melambatkan pemaparan halaman dengan ketara. Untuk menangani isu ini, beberapa kaedah untuk memuatkan sumber ini secara tidak segerak wujud.

Memuatkan Skrip dengan Atribut Async

Satu pendekatan ialah menggunakan atribut async dalam teg skrip:

<code class="html"><script async src="js/jquery-ui-1.8.16.custom.min.js"></script></code>

Atribut ini memberi isyarat kepada penyemak imbas bahawa skrip boleh dilaksanakan tanpa menyekat pemuatan sumber lain. Walau bagaimanapun, adalah penting untuk ambil perhatian bahawa skrip dengan kebergantungan mungkin masih menyebabkan isu jika dimuatkan secara tidak segerak.

Menggunakan Fungsi Tersuai

Dalam contoh yang disediakan, fungsi tersuai dipanggil importScripts() digunakan untuk memuatkan berbilang skrip dan lembaran gaya secara tidak segerak. Walau bagaimanapun, kod tersebut tidak mempunyai mekanisme panggil balik untuk memastikan semua sumber telah dimuatkan sebelum halaman menjadi interaktif.

Menggunakan Kaedah $.getScript JQuery

Kaedah $.getScript() JQuery menyediakan ringkasan cara untuk memuatkan skrip secara tidak segerak:

<code class="js">$.getScript('js/jquery-ui-1.8.16.custom.min.js', successCallback);</code>

Kaedah ini secara automatik mengendalikan pelaksanaan skrip yang dimuatkan dan menyediakan fungsi panggil balik pilihan.

Pemuatan Berasaskan Janji

Untuk moden pelayar, objek Promise boleh digunakan untuk mencipta fungsi pemuatan tak segerak yang menerima pengendali panggil balik:

<code class="js">function loadScript(src) {
    return new Promise(function (resolve, reject) {
        var s;
        s = document.createElement('script');
        s.src = src;
        s.onload = resolve;
        s.onerror = reject;
        document.head.appendChild(s);
    });
}</code>

Fungsi ini membenarkan pengendalian senario pemuatan yang berjaya dan gagal.

Pertimbangan

Adalah penting untuk memastikan bahawa skrip dan helaian gaya dimuatkan dalam susunan yang betul untuk mengelakkan tingkah laku yang tidak dijangka. Selain itu, memuatkan sumber secara tidak segerak tidak seharusnya menjadi kaedah utama untuk mengoptimumkan prestasi halaman. Teknik seperti pengurangan, pemampatan dan pengurangan bilangan permintaan juga harus dipertimbangkan.

Atas ialah kandungan terperinci Bagaimanakah Kami Boleh Meningkatkan Kelajuan Pemuatan Halaman dengan Teknik Pemuatan Skrip Asynchronous?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!