Muatkan JavaScript yang tidak menyekat dengan async HTML5 dan menangguhkan

Pelayar akan mula memuat turun file.js dan skrip tertunda lain selari tanpa menghentikan pemprosesan halaman.defer telah dilaksanakan di Internet Explorer versi 4.0 - lebih 12 tahun yang lalu! Ia juga boleh didapati di Firefox sejak versi 3.5. Walaupun semua skrip tertunda dijamin berjalan secara urutan, sukar untuk menentukan kapan itu akan berlaku. Secara teori, ia sepatutnya berlaku selepas DOM telah dimuatkan sepenuhnya, sejurus sebelum peristiwa domcontentloaded. Dalam amalan, ia bergantung kepada OS dan penyemak imbas, sama ada skrip itu di -cache, dan apa yang dilakukan oleh skrip lain pada masa itu. Anda tidak dapat menjamin bahawa skrip akan dilaksanakan secara urutan, tetapi mereka akan dimuatkan pada masa kebakaran acara tingkap. Terdapat sokongan untuk Async di Firefox 3.6, Opera 10.5, dan Webkit terbaru membina, jadi ia sepatutnya muncul dalam versi seterusnya Chrome dan Safari. IE9 belum menyokong Async , tetapi pasukan IE dengan mudah dapat menambahkannya sebagai alias untuk menangguhkan. Anda boleh menggunakan kedua-dua async dan menangguhkan untuk menyokong semua penyemak imbas-walaupun IE4. Ia ingat di mana skrip async dimuatkan pada halaman, jadi mungkin untuk menggunakan Document.write atau mengubah suai ciri Dom. Mari kita berharap Microsoft, Mozilla, dan Webkit mengikuti petunjuk Opera.

Soalan Lazim (Soalan Lazim) mengenai Non-Blocking, Async, dan Defer In JavaScript

<script src="file.js" async></script>

Apakah perbezaan antara async dan menangguhkan dalam JavaScript? Atribut async memuatkan dan melaksanakan skrip secara tidak segerak dengan laman web yang lain. Ini bermakna skrip dilaksanakan sebaik sahaja ia dimuatkan, tanpa menunggu seluruh laman web untuk dimuatkan. Sebaliknya, atribut penangguhan juga memuat skrip secara asynchronously, tetapi ia menahan pelaksanaan skrip sehingga seluruh halaman web telah dimuatkan. Ini berguna untuk skrip yang bergantung pada DOM yang dimuatkan sepenuhnya sebelum mereka dapat berjalan.

Di manakah saya harus meletakkan kod JavaScript saya dalam dokumen HTML? Secara tradisinya, skrip diletakkan di bahagian kepala dokumen HTML. Walau bagaimanapun, ini boleh menyekat penyampaian laman web sehingga skrip dimuatkan dan dilaksanakan. Untuk mengelakkan ini, sering disyorkan untuk meletakkan skrip sebelum tag badan penutup. Ini membolehkan dokumen HTML memuatkan dan membuat sebelum skrip dilaksanakan. Sebagai alternatif, anda boleh menggunakan atribut async atau menangguhkan untuk mengawal pemuatan dan pelaksanaan skrip tanpa menyekat penyerahan halaman web. Meletakkan kod JavaScript dalam fail luaran boleh menjadikan fail HTML anda lebih bersih dan lebih mudah dibaca. Ia juga membolehkan penyemak imbas untuk cache skrip, yang boleh meningkatkan prestasi pemuatan untuk lawatan berulang. Walau bagaimanapun, ia memerlukan permintaan HTTP tambahan untuk memuat skrip, yang boleh melambatkan masa beban awal. Sebaliknya, meletakkan kod JavaScript secara langsung dalam fail HTML boleh menghilangkan keperluan untuk permintaan HTTP tambahan, tetapi ia boleh membuat fail HTML berantakan dan lebih sukar untuk mengekalkan, terutamanya untuk skrip yang lebih besar. rendering laman web. Ini dicapai dengan memuat skrip secara tidak sengaja, sama ada dengan meletakkan skrip di bahagian bawah dokumen HTML, atau dengan menggunakan atribut async atau menangguhkan dalam tag skrip. Skrip yang tidak menyekat dapat meningkatkan prestasi pemuatan halaman web anda, kerana penyemak imbas dapat terus memuatkan dan menjadikan seluruh halaman web yang lain sementara skrip sedang dimuatkan dan dilaksanakan. Terdapat, tanpa urutan tertentu. Ini bermakna skrip yang lebih kecil atau lebih dekat ke bahagian atas dokumen HTML boleh dilaksanakan sebelum orang lain. Apabila skrip berganda ditandakan dengan atribut penangguhan, penyemak imbas memuatkannya mengikut urutan yang mereka tunjukkan dalam dokumen HTML, tetapi menahan pelaksanaannya sehingga seluruh laman web telah dimuatkan. Ini memastikan skrip dilaksanakan dalam urutan yang betul, walaupun ia dimuatkan secara tidak segerak.

Bolehkah saya menggunakan async dan menangguhkan atribut bersama dalam tag skrip yang sama?

Ya, anda boleh menggunakan kedua -dua async dan menangguhkan atribut dalam tag skrip yang sama. Walau bagaimanapun, tingkah laku mereka bergantung kepada penyemak imbas. Dalam penyemak imbas moden yang menyokong kedua -dua atribut, atribut async mengambil keutamaan atas atribut penangguhan. Ini bermakna skrip akan dimuatkan dan dilaksanakan secara asynchronously, sebaik sahaja ia tersedia. Atribut penangguhan tidak diendahkan. Dalam penyemak imbas yang lebih tua yang tidak menyokong atribut async, atribut penangguhan digunakan sebaliknya, jika ada. Ini adalah salah satu kelebihan menggunakan async atau menangguhkan, kerana ia membolehkan laman web untuk terus memuatkan dan membuat rendering, walaupun skrip gagal dimuatkan. Walau bagaimanapun, adalah penting untuk mengendalikan kesilapan memuat skrip dengan betul, untuk memastikan laman web anda berfungsi dengan betul walaupun skrip gagal memuatkan. Ini melibatkan ujian jika async atau menangguhkan harta benda wujud pada elemen skrip. Jika harta itu wujud, maka penyemak imbas menyokong atribut. Jika tidak, maka penyemak imbas tidak menyokong atribut. Mereka tidak mempunyai kesan pada skrip sebaris. Sekiranya anda ingin memuatkan dan melaksanakan skrip sebaris secara tidak segerak, anda perlu menggunakan teknik lain, seperti membuat elemen skrip secara dinamik dengan JavaScript. Mengawal bagaimana skrip dimuatkan dan dilaksanakan. Atribut Atribut Async dan melaksanakan skrip sebaik sahaja ia tersedia, tanpa menunggu seluruh laman web untuk dimuatkan. Atribut penangguhan juga memuat skrip secara asynchronously, tetapi menahan pelaksanaan mereka sehingga seluruh laman web telah dimuatkan. Skrip tidak menyekat dimuatkan dan dilaksanakan tanpa menyekat penyerahan halaman web. Teknik terbaik untuk digunakan bergantung kepada keperluan khusus laman web dan skrip anda.

Atas ialah kandungan terperinci Muatkan JavaScript yang tidak menyekat dengan async HTML5 dan menangguhkan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!