Penyelesaian pengoptimuman prestasi pemuatan tanpa sekatan dalam kemahiran JavaScript_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:

                               




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:

1

Alat AI Hot

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Tunjukkan Lagi

Artikel Panas

Assassin's Creed Shadows: Penyelesaian Riddle Seashell

4 minggu yang lalu By DDD

Apa yang Baru di Windows 11 KB5054979 & Cara Memperbaiki Masalah Kemas Kini

3 minggu yang lalu By DDD

Di mana untuk mencari kad kunci kawalan kren di atomfall

4 minggu yang lalu By DDD

<🎜>: Rails Dead - Cara Melengkapkan Setiap Cabaran

1 bulan yang lalu By DDD

Bagaimana untuk memperbaiki KB5055523 gagal dipasang di Windows 11?

2 minggu yang lalu By DDD

Tunjukkan Lagi

Alat panas

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Tunjukkan Lagi

Topik panas

Di manakah pintu masuk log masuk untuk e-mel gmail?

7733

15

Tutorial Java

1643

14

Tutorial CakePHP

1397

52

Tutorial Laravel

1290

25

Tutorial PHP

1233

29

Tunjukkan Lagi

Related knowledge

Pengoptimuman prestasi dan teknologi pengembangan mendatar rangka kerja Go? Jun 03, 2024 pm 07:27 PM

Untuk meningkatkan prestasi aplikasi Go, kami boleh mengambil langkah pengoptimuman berikut: Caching: Gunakan caching untuk mengurangkan bilangan akses kepada storan asas dan meningkatkan prestasi. Concurrency: Gunakan goroutine dan saluran untuk melaksanakan tugas yang panjang secara selari. Pengurusan Memori: Urus memori secara manual (menggunakan pakej yang tidak selamat) untuk mengoptimumkan lagi prestasi. Untuk menskalakan aplikasi, kami boleh melaksanakan teknik berikut: Penskalaan Mendatar (Penskalaan Mendatar): Menggunakan contoh aplikasi pada berbilang pelayan atau nod. Pengimbangan beban: Gunakan pengimbang beban untuk mengedarkan permintaan kepada berbilang contoh aplikasi. Perkongsian data: Edarkan set data yang besar merentas berbilang pangkalan data atau nod storan untuk meningkatkan prestasi pertanyaan dan kebolehskalaan.

Panduan Pengoptimuman Prestasi C++: Temui rahsia untuk menjadikan kod anda lebih cekap Jun 01, 2024 pm 05:13 PM

Pengoptimuman prestasi C++ melibatkan pelbagai teknik, termasuk: 1. Mengelakkan peruntukan dinamik; Kes praktikal pengoptimuman menunjukkan cara menggunakan teknik ini apabila mencari urutan menaik terpanjang dalam tatasusunan integer, meningkatkan kecekapan algoritma daripada O(n^2) kepada O(nlogn).

Mengoptimumkan prestasi enjin roket menggunakan C++ Jun 01, 2024 pm 04:14 PM

Dengan membina model matematik, menjalankan simulasi dan mengoptimumkan parameter, C++ boleh meningkatkan prestasi enjin roket dengan ketara: Membina model matematik enjin roket dan menerangkan kelakuannya. Simulasikan prestasi enjin dan kira parameter utama seperti tujahan dan impuls tertentu. Kenal pasti parameter utama dan cari nilai optimum menggunakan algoritma pengoptimuman seperti algoritma genetik. Prestasi enjin dikira semula berdasarkan parameter yang dioptimumkan untuk meningkatkan kecekapan keseluruhannya.

Cara untuk Pengoptimuman: Meneroka Perjalanan Peningkatan Prestasi Rangka Kerja Java Jun 01, 2024 pm 07:07 PM

Prestasi rangka kerja Java boleh dipertingkatkan dengan melaksanakan mekanisme caching, pemprosesan selari, pengoptimuman pangkalan data, dan mengurangkan penggunaan memori. Mekanisme caching: Kurangkan bilangan pangkalan data atau permintaan API dan tingkatkan prestasi. Pemprosesan selari: Gunakan CPU berbilang teras untuk melaksanakan tugas secara serentak untuk meningkatkan daya pemprosesan. Pengoptimuman pangkalan data: mengoptimumkan pertanyaan, menggunakan indeks, mengkonfigurasi kumpulan sambungan dan meningkatkan prestasi pangkalan data. Kurangkan penggunaan memori: Gunakan rangka kerja yang ringan, elakkan kebocoran dan gunakan alat analisis untuk mengurangkan penggunaan memori.

Bagaimana untuk menggunakan pemprofilan dalam Java untuk mengoptimumkan prestasi? Jun 01, 2024 pm 02:08 PM

Pemprofilan dalam Java digunakan untuk menentukan masa dan penggunaan sumber dalam pelaksanaan aplikasi. Laksanakan pemprofilan menggunakan JavaVisualVM: Sambungkan ke JVM untuk mendayakan pemprofilan, tetapkan selang pensampelan, jalankan aplikasi, hentikan pemprofilan dan hasil analisis memaparkan paparan pepohon masa pelaksanaan. Kaedah untuk mengoptimumkan prestasi termasuk: mengenal pasti kaedah pengurangan hotspot dan memanggil algoritma pengoptimuman

Cara cepat mendiagnosis isu prestasi PHP Jun 03, 2024 am 10:56 AM

Teknik berkesan untuk cepat mendiagnosis isu prestasi PHP termasuk menggunakan Xdebug untuk mendapatkan data prestasi dan kemudian menganalisis output Cachegrind. Gunakan Blackfire untuk melihat jejak permintaan dan menjana laporan prestasi. Periksa pertanyaan pangkalan data untuk mengenal pasti pertanyaan yang tidak cekap. Menganalisis penggunaan memori, melihat peruntukan memori dan penggunaan puncak.

Penalaan Prestasi Nginx: mengoptimumkan kelajuan dan latensi rendah Apr 05, 2025 am 12:08 AM

Penalaan prestasi Nginx boleh dicapai dengan menyesuaikan bilangan proses pekerja, saiz kolam sambungan, membolehkan mampatan GZIP dan protokol HTTP/2, dan menggunakan cache dan mengimbangi beban. 1. Laraskan bilangan proses pekerja dan saiz kolam sambungan: worker_processesauto; peristiwa {worker_connections1024;}. 2. Dayakan Mampatan GZIP dan HTTP/2 Protokol: http {gzipon; server {listen443sslhttp2;}}. 3. Gunakan pengoptimuman cache: http {proxy_cache_path/path/to/cachelevels = 1: 2k

Apakah kaedah biasa untuk pengoptimuman prestasi program? May 09, 2024 am 09:57 AM

Kaedah pengoptimuman prestasi program termasuk: Pengoptimuman algoritma: Pilih algoritma dengan kerumitan masa yang lebih rendah dan mengurangkan gelung dan pernyataan bersyarat. Pemilihan struktur data: Pilih struktur data yang sesuai berdasarkan corak akses data, seperti pepohon carian dan jadual cincang. Pengoptimuman memori: elakkan mencipta objek yang tidak diperlukan, lepaskan memori yang tidak lagi digunakan dan gunakan teknologi kumpulan memori. Pengoptimuman benang: mengenal pasti tugas yang boleh diselaraskan dan mengoptimumkan mekanisme penyegerakan benang. Pengoptimuman pangkalan data: Cipta indeks untuk mempercepatkan pengambilan data, mengoptimumkan pernyataan pertanyaan dan menggunakan pangkalan data cache atau NoSQL untuk meningkatkan prestasi.

See all articles