Bolehkah javascript dimuatkan secara tidak segerak?

JavaScript boleh dimuatkan secara tak segerak. Pemuatan tak segerak bermakna penyemak imbas akan terus memproses halaman berikutnya semasa memuat turun dan melaksanakan JavaScript, yang boleh mengoptimumkan pemuatan fail skrip dan meningkatkan kelajuan pemuatan halaman kerana ia melibatkan mekanisme yang berbeza untuk menghurai fail skrip dalam setiap pelayar, lebih banyak kegunaan pemuatan tak segerak.

Persekitaran pengendalian tutorial ini: sistem Windows 10, versi JavaScript 1.8.5, komputer Dell G3.

Bolehkah JavaScript dimuatkan secara asynchronous? juga dikenali sebagai mod menyekat , akan menghalang pemprosesan seterusnya penyemak imbas dan menghentikan penghuraian seterusnya, sekali gus menghentikan pemuatan fail berikutnya (seperti imej), pemaparan dan pelaksanaan kod.

Pemuatan tak segerak: Pemuatan tak segerak juga dipanggil tidak menyekat Penyemak imbas akan terus memproses halaman berikutnya semasa memuat turun dan melaksanakan js. Untuk meletakkannya dalam istilah orang awam: penyegerakan ialah apabila anda meminta saya pergi makan malam, dan saya pergi makan bersama anda apabila saya mendengar anda; jika anda tidak mendengar saya, anda terus memanggil saya, dan Saya tidak pergi bersama sehingga saya memberitahu anda bahawa saya mendengar anda makan.

Asynchronous bermaksud anda menelefon saya dan kemudian pergi makan sendiri saya boleh pergi serta-merta selepas mendapat berita, atau saya mungkin menunggu sehingga selepas keluar kerja untuk makan. Oleh itu, jika anda mahu saya menjamu anda dengan hidangan, gunakan kaedah segerak, dan jika anda ingin menjamu saya dengan hidangan, gunakan kaedah asynchronous, supaya anda dapat menjimatkan wang.

Mengoptimumkan pemuatan fail skrip untuk meningkatkan kelajuan pemuatan halaman sentiasa menjadi sangat penting untuk meningkatkan kelajuan pemuatan halaman. Oleh kerana setiap penyemak imbas mempunyai mekanisme yang berbeza untuk menghuraikan fail skrip, dan memuatkan skrip akan menyekat pemuatan sumber dan fail lain, pemuatan tak segerak lebih biasa digunakan.

3. Cara menggunakan asynchronous

Editor percaya bahawa terdapat tiga cara untuk menggunakan asynchronous loading.

async, jalankan selepas memuatkan, hanya skrip luaran boleh dimuatkan, js tidak boleh ditulis dalam teg skrip

Muatkan mengikut permintaan, pertimbangkan keserasian penyemak imbas

//1.async  只能加载外部脚本
<script src="js/index.js" async="async"></script>

garis masa memuatkan js

//2.defer  只能IE使用，文档解析完成以后才会去执行
<script src="js/index.js" defer="defer"></script>

//3.按需求加载，考虑浏览器兼容
    function loadScript(url,callback){
            var script = document.createElement("script");
            
            if(script.readyState){  IE浏览器兼容
                script.onreadystatechange = function(){
                    if(script.readyState == "complete" || script.readState == "loaded"){
                        callback()
                    }
                }
            }else{         大部分浏览器兼容
                script.onload = function(){  
                    callback()
                }
            }
            script.src = url;
            document.head.appendChild(script)
        }
        loadScript("08.js",function(){
            test()
        })
//外部js
function test(){
    console.log("hello world")
}

3 Apabila menemui skrip js luaran, dan tiada async atau tangguh ditetapkan, penyemak imbas dimuatkan dan disekat, menunggu js dimuatkan dan melaksanakan skrip, dan kemudian terus menghuraikan dokumen.

4 Apabila menemui skrip external js dan menyediakan async dan defer, penyemak imbas mencipta urutan untuk memuatkan dan terus menghuraikan dokumen. Untuk skrip dengan atribut async, ia dilaksanakan serta-merta selepas skrip dimuatkan. (Dilarang menggunakan document.write() secara tak segerak)

5 Apabila menemui img, dsb., mula-mula menghuraikan struktur dom secara normal, kemudian penyemak imbas memuatkan src secara tak segerak dan terus menghuraikan dokumen.

6 Apabila penghuraian dokumen selesai, document.readyState = 'interaktif'.

7 Selepas penghuraian dokumen selesai, semua skrip yang ditetapkan dengan penangguhan akan dilaksanakan mengikut urutan. (Perhatikan bahawa ia berbeza daripada async, tetapi penggunaan document.write() juga dilarang); peringkat pelaksanaan skrip ke peringkat dipacu peristiwa.

9. Apabila semua skrip async dimuatkan dan dilaksanakan, dan img dsb. dimuatkan, document.readyState = 'lengkap' dan objek tetingkap mencetuskan acara pemuatan.

10 Mulai sekarang, input pengguna, acara rangkaian, dll. akan diproses dalam cara tindak balas tak segerak.

Cadangan berkaitan:

Atas ialah kandungan terperinci Bolehkah javascript dimuatkan secara tidak segerak?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!