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——
Tetapi tidak semua penyemak imbas menyokong penangguhan (untuk sesetengah penyemak imbas moden, jika penangguhan diisytiharkan, skrip dalaman mereka tidak akan melaksanakan operasi pemaparan document.write dan DOM. IE4 semuanya menyokong atribut tangguh). Ini bermakna jika anda ingin memastikan bahawa skrip tertunda anda boleh dijalankan selepas dokumen dimuatkan, anda mesti merangkum semua kod skrip tertunda dalam struktur seperti jQuery's $(document).ready. Memang berbaloi kerana hampir 97% pelawat anda mendapat faedah pemuatan selari, manakala 3% yang lain masih mempunyai akses kepada JavaScript berfungsi sepenuhnya.
2. Penyelarasan lengkap skrip
Jadikan pemuatan dan pelaksanaan skrip satu langkah lebih pantas Saya tidak mahu menunggu skrip menangguhkan berjalan satu demi satu (menunda mengingatkan kita tentang senario beratur yang teratur untuk menunggu dokumen dimuatkan secara senyap-senyap), begitu juga. Saya mahu menunggu sehingga dokumen siap sebelum menjalankan Skrip ini, saya mahu memuatkan secepat mungkin dan menjalankan skrip ini secepat mungkin. Atribut async HTML5 terlintas di fikiran di sini, tetapi sedar bahawa ia adalah anarki yang huru-hara.
Sebagai contoh, kami memuatkan dua skrip pihak ketiga yang tidak berkaitan sama sekali, halaman berjalan dengan baik tanpa skrip tersebut dan kami tidak kisah yang mana satu berjalan dahulu dan yang mana satu berjalan terakhir. Oleh itu, menggunakan atribut async pada skrip pihak ketiga ini adalah bersamaan dengan meningkatkan kelajuan lariannya tanpa membelanjakan sesen pun.
Atribut async adalah baharu kepada HTML5. Fungsi ini serupa dengan penangguhan, yang membenarkan pemaparan DOM semasa memuat turun skrip. Walau bagaimanapun, ia akan dilaksanakan secepat mungkin selepas memuat turun (iaitu, enjin JS akan dilaksanakan sebaik sahaja ia melahu), dan tiada jaminan bahawa skrip akan dilaksanakan dengan teratur. Mereka akan selesai sebelum acara onload.
Firefox 3.6, Opera 10.5, IE 9 dan Chrome dan Safari terkini semuanya menyokong atribut async. Anda boleh menggunakan async dan tangguh pada masa yang sama, supaya semua IE selepas IE 4 menyokong pemuatan tak segerak, tetapi sedar bahawa async akan menimpa penangguhan.
Kemudian model halaman pada masa ini adalah seperti berikut——