Analisis ringkas kemahiran loading_javascript asynchronous JavaScript

Kata Pengantar

Saya percaya anda telah menghadapi banyak masalah dengan memuatkan skrip JavaScript. Terutamanya dalam beberapa perkara——

1> isu pemuatan fail, pergantungan fail dan perintah pelaksanaan disebabkan oleh skrip segerak dan skrip tak segerak
2> Isu pengoptimuman prestasi disebabkan oleh skrip segerak dan skrip tak segerak

Pemahaman menyeluruh tentang semua aspek yang berkaitan dengan pemuatan skrip bukan sahaja akan membantu menyelesaikan masalah praktikal, tetapi juga membantu memahami dan melaksanakan pengoptimuman prestasi.

Mula-mula lihat mana-mana kod teg skrip——

Salin kod Kod adalah seperti berikut:

Jika diletakkan di atas , ia akan menyekat semua kerja pemaparan halaman, meninggalkan pengguna dalam keadaan "skrin putih kematian" sehingga skrip dimuatkan dan dilaksanakan. Skrip pada penghujung hanya akan membenarkan pengguna melihat halaman statik yang tidak bernyawa. Dapatkan kes ujian -

Salin kod Kod adalah seperti berikut:

Skrip pemuatan tak segerak

Saya adalah kandungan

Antaranya, kandungan dalam test.js——

Salin kod Kod adalah seperti berikut:

alert('Saya ialah kod skrip di kepala. Selepas melaksanakan js di sini, paparan kandungan badan akan bermula!');

Kami akan melihat bahawa amaran ialah titik jeda, dan pada masa ini, halaman itu kosong. Tetapi sila ambil perhatian bahawa keseluruhan halaman telah dimuatkan pada masa ini Jika kandungan mengandungi teg dengan atribut src tertentu (seperti teg img di atas), penyemak imbas telah mula memuatkan kandungan yang berkaitan. Ringkasnya, sila ambil perhatian bahawa masa kerja enjin js dan enjin pemaparan adalah saling eksklusif (sesetengah buku memanggilnya urutan UI).

Oleh itu, kami memerlukan - skrip yang bertanggungjawab untuk menjadikan halaman kelihatan lebih baik dan lebih mudah digunakan harus dimuatkan dengan segera, manakala skrip yang boleh dimuatkan kemudian harus dimuatkan kemudian.

1. Perlaksanaan skrip tertunda

Semakin popular untuk meletakkan skrip di hujung teg

Dengan cara ini, dalam satu pihak, pengguna boleh melihat halaman dengan lebih pantas, dan sebaliknya, skrip boleh beroperasi secara langsung pada elemen DOM yang dimuatkan. Untuk kebanyakan skrip, "langkah" ini merupakan peningkatan yang besar. Model halaman adalah seperti berikut——

Salin kod Kod adalah seperti berikut:

Ini mempercepatkan masa pemaparan halaman dengan ketara, tetapi ambil perhatian bahawa ini mungkin memberi pengguna peluang untuk berinteraksi dengan halaman sebelum bodyScript dimuatkan. Sebabnya ialah penyemak imbas tidak boleh memuatkan skrip ini sehingga keseluruhan dokumen telah dimuatkan, yang boleh menjadi halangan untuk dokumen besar yang dihantar melalui sambungan perlahan.

Sebaik-baiknya, pemuatan skrip hendaklah serentak dengan pemuatan dokumen dan tidak menjejaskan pemaparan DOM. Dengan cara ini, anda boleh menjalankan skrip sebaik sahaja dokumen sedia kerana skrip telah dimuatkan dalam susunan teg

Kita boleh menggunakan penangguhan untuk memenuhi keperluan ini, iaitu -

Salin kod Kod adalah seperti berikut:

Menambah atribut tangguh adalah bersamaan dengan memberitahu penyemak imbas: Sila mula memuatkan skrip ini sekarang, tetapi sila tunggu sehingga dokumen sedia dan semua skrip sebelumnya dengan atribut tangguh telah selesai dijalankan sebelum menjalankannya.

Dengan cara ini, meletakkan skrip kelewatan dalam teg kepala akan membawa semua faedah meletakkan skrip dalam teg badan, dan ia juga akan meningkatkan kelajuan pemuatan dokumen yang besar. Mod halaman pada masa ini ialah——

Salin kod Kod adalah seperti berikut: