Rumah >hujung hadapan web >tutorial js >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——
Jika diletakkan di atas
Antaranya, kandungan dalam test.js——
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——
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 -
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——