Penyelesaian pengoptimuman prestasi pemuatan tanpa sekatan dalam kemahiran JavaScript

Prestasi Javascript dalam penyemak imbas boleh dikatakan sebagai isu kebolehgunaan paling penting yang dihadapi oleh pembangun bahagian hadapan.

Antara peraturan Yslow 23 Yahoo, salah satunya ialah meletakkan JS di bahagian bawah. Sebabnya ialah, sebenarnya, kebanyakan penyemak imbas menggunakan satu proses untuk mengendalikan berbilang tugas seperti UI dan mengemas kini Javascript, dan hanya satu tugasan boleh dilaksanakan pada satu masa. Berapa lama Javascript berjalan, kemudian berapa lama ia menunggu sebelum penyemak imbas menjadi melahu untuk bertindak balas terhadap interaksi pengguna.

Pada peringkat asas, ini bermakna kehadiran teg menyebabkan seluruh halaman menunggu skrip dihuraikan dan dijalankan. Tidak kira sama ada kod JavaScript sebenar adalah sebaris atau terkandung dalam fail luaran yang tidak berkaitan, proses muat turun dan penghuraian halaman mesti berhenti dan menunggu skrip menyelesaikan pemprosesan ini sebelum meneruskan. Ini adalah bahagian penting dalam kitaran hayat halaman, kerana skrip boleh mengubah suai kandungan halaman semasa berjalan. Contoh biasa ialah fungsi document.write(), contohnya:

Salin kod Kod adalah seperti berikut:

Contoh Skrip

Kod ini menunjukkan lokasi teg yang disyorkan dalam fail HTML. Walaupun muat turun skrip menyekat satu sama lain, halaman telah dimuat turun dan dipaparkan di hadapan pengguna, dan kelajuan memasuki halaman tidak akan terlalu perlahan. Inilah yang disebutkan di atas tentang meletakkan JS di bahagian bawah.

Selain itu, Yahoo! mencipta "union handle" untuk perpustakaan "Yahoo! User Interface (YUI)", yang dilaksanakan melalui "Content Delivery Network (CDN)" mereka. Mana-mana tapak web boleh menggunakan URL "pemegang kesatuan" untuk menunjukkan fail dalam pakej YUI yang disertakan. Sebagai contoh, URL berikut mengandungi dua fail:

Salin kod

Kod adalah seperti berikut:

Teg dengan atribut tangguh boleh diletakkan di mana-mana dalam dokumen dan akan memulakan muat turun semasa ia dihuraikan sehingga DOM dimuatkan (sebelum pengendali acara onload dipanggil). Apabila fail Javascript tangguh dimuat turun, ia tidak menyekat pemprosesan lain oleh penyemak imbas, jadi fail boleh dimuat turun selari dengan sumber lain.

Anda boleh menggunakan kod berikut untuk menguji sama ada penyemak imbas menyokong atribut tangguh:

Salin kod Kod adalah seperti berikut:

Contoh Penangguhan Skrip

("tunda");
("skrip");
 window.onload = function(){ alert("load");}; 

Jika penyemak imbas tidak menyokong penangguhan, susunan kotak dialog pop timbul ialah "tunda", "skrip", "muat".

Jika penyemak imbas menyokong penangguhan, susunan kotak dialog pop timbul ialah "skrip", "muat", "tunda".

Elemen Skrip Dinamik Elemen Skrip Dinamik

DOM membolehkan kami menggunakan Javascript untuk mencipta hampir semua kandungan dokumen dalam HTML secara dinamik Satu elemen baharu boleh dibuat dengan mudah melalui DOM standard:

Salin kod

Kod adalah seperti berikut: 1 skrip var = document.createElement ("skrip"); 2 script.type = "text/javascript";

3 script.src = "file1.js"; 4 document.body.appendChild(skrip);

Elemen baharu memuatkan fail sumber fail1.js. Fail ini mula dimuat turun sebaik sahaja elemen ditambahkan pada halaman. Perkara utama teknologi ini ialah tidak kira di mana muat turun dimulakan, fail dimuat turun dan berjalan tanpa menyekat pemprosesan halaman lain.

Apabila fail dimuat turun menggunakan nod skrip dinamik, kod yang dikembalikan biasanya dilaksanakan serta-merta (kecuali untuk Firefox dan Opera, yang akan menunggu semua nod skrip dinamik sebelumnya untuk menyelesaikan pelaksanaan).

Dalam kebanyakan kes, kami berharap dapat memanggil fungsi untuk memuat turun fail Javascript secara dinamik. Pakej fungsi berikut melaksanakan pelaksanaan standard dan pelaksanaan IE:

Salin kod Kod adalah seperti berikut:

fungsi loadScript(url, panggil balik){

skrip var = document.createElement ("skrip") ;

​ script.type = "text/javascript";

Jika (script.readyState){ //IE

           skrip.onreadystatechange = function(){

Jika (script.readyState == "dimuatkan" || script.readyState == "lengkap"){

              script.onreadystatechange = null;

              panggilan balik(); 

           }

        };

        } 

        lain { //Lain-lain

          script.onload = function(){ panggil balik();

}; 

}

Script.src = url;

Document.getElementsByTagName("head")[0].appendChild(skrip);
}

loadScript("file1.js", function(){ //Panggil

alert("Fail dimuatkan!");
});

Fungsi ini menerima dua parameter: URL fail Javascript dan fungsi panggil balik yang dicetuskan apabila penerimaan Javascript selesai. Pemeriksaan harta tanah digunakan untuk memutuskan peristiwa yang hendak dipantau. Langkah terakhir ialah atribut src dan menambah fail javascript ke kepala.

Pemuatan skrip dinamik ialah mod yang paling biasa digunakan dalam muat turun Javascript tidak menyekat kerana ia berfungsi merentas penyemak imbas dan mudah serta mudah digunakan.

Suntikan Skrip XMLHttpRequest Suntikan skrip XHR

Cara lain untuk mendapatkan skrip tanpa menyekat ialah menggunakan objek XMLHttpRequest (XHR) untuk menyuntik skrip ke dalam halaman. Teknik ini mula-mula mencipta objek XHR, kemudian memuat turun fail Javascript, dan kemudian menggunakan elemen dinamik untuk menyuntik kod Javascript ke dalam halaman. Tonton demo:

Salin kod Kod adalah seperti berikut:

var xhr = XMLHttpRequest(); xhr.open("dapatkan", "file1.js", benar); xhr.onreadystatechange = function(){

Jika (xhr.readyState == 4){
Jika (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){ // Semak kod status http
skrip var = document.createElement("skrip");           script.type = "text/javascript";
           script.text = xhr.responseText;
             document.body.appendChild(skrip);
         }
}
};
xhr.send(null);

Kod ini menghantar permintaan dapatkan fail kepada pelayan untuk mendapatkan file1.js. Pengendali acara onreadystatechange menyemak sama ada readyState ialah 4, dan kemudian menyemak sama ada kod status http adalah sah (200 menunjukkan bahawa permintaan pelanggan telah berjaya, 2xx menunjukkan respons yang sah dan 304 menunjukkan respons cache). Jika respons yang sah diterima, elemen baharu dibuat dan atribut teksnya ditetapkan kepada rentetan teks respons yang diterima daripada pelayan. Melakukan ini sebenarnya akan membuat elemen dengan kod sebaris, dan setelah elemen baharu ditambahkan pada dokumen, kod itu akan dilaksanakan dan sedia untuk digunakan.

Kelebihan kaedah ini ialah ia mempunyai keserasian yang baik dan anda boleh memuat turun kod Javascript yang tidak dilaksanakan serta-merta. Memandangkan kod dikembalikan di luar teg ia tidak akan dilaksanakan secara automatik selepas memuat turun, membolehkan anda menangguhkan pelaksanaan.

Penentuan kaedah ini tertakluk kepada sekatan asal yang sama bagi penyemak imbas Fail Javascript mesti diletakkan dalam domain yang sama dengan halaman dan tidak boleh dimuat turun dari CDN (Rangkaian Penghantaran Kandungan). Atas sebab ini, halaman web yang besar biasanya tidak menggunakan teknologi suntikan skrip XHR.

Corak Noblocking Disyorkan Corak bukan sekatan yang disyorkan

Kaedah yang disyorkan untuk memuatkan sejumlah besar Javascript ke dalam halaman ialah proses dua langkah:

Langkah pertama termasuk kod yang diperlukan untuk memuatkan Javascript secara dinamik, dan kemudian memuatkan bahagian selain Javascript yang diperlukan untuk permulaan halaman. Bahagian kod ini hendaklah sekecil mungkin dan mungkin hanya mengandungi fungsi loadScript() Ia memuat turun dan berjalan dengan sangat cepat dan tidak akan menyebabkan banyak gangguan pada halaman.

Langkah kedua, apabila kod awal sudah sedia, gunakannya untuk memuatkan Javascript yang lain.

Contohnya:

Salin kod Kod adalah seperti berikut:

Artikel terbaru oleh pengarang