Analisis ringkas kemahiran loading_javascript asynchronous JavaScript-tutorial js-php.cn

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:

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——

Salin kod Kod adalah seperti berikut:

Beri perhatian kepada susunan pelaksanaan di sini - setiap fail skrip dimuatkan, kemudian headScript.js dilaksanakan dan kemudian defferedScript.js dimuatkan di latar belakang semasa DOM sedang dipaparkan. Kemudian pada akhir pemaparan DOM, defferedScript.js dan dua skrip tak segerak akan dijalankan. Perlu diingatkan bahawa untuk penyemak imbas yang menyokong atribut async, kedua-dua skrip ini akan kehabisan susunan.

3. Pemuatan skrip boleh atur cara

Walaupun fungsi dua sifat skrip di atas sangat menarik, ia tidak digunakan secara meluas kerana isu keserasian. Oleh itu, kami menggunakan lebih banyak skrip untuk memuatkan skrip lain. Sebagai contoh, kami hanya mahu memuatkan skrip kepada pengguna yang memenuhi syarat tertentu, yang sering dirujuk sebagai "pemuatan malas".

Di peringkat API penyemak imbas, terdapat dua cara yang munasabah untuk merebut dan menjalankan skrip pelayan -

1> Jana permintaan ajax dan gunakan fungsi eval untuk memproses respons

2> Masukkan teg

Kaedah terakhir adalah lebih baik kerana penyemak imbas akan bimbang tentang menjana permintaan HTTP untuk kami. Selain itu, eval juga mempunyai beberapa masalah praktikal: ia membocorkan skop, menjadikan penyahpepijatan tidak kemas dan berpotensi merendahkan prestasi. Oleh itu, untuk memuatkan skrip bernama feture.js, kita harus menggunakan kod yang serupa dengan yang berikut:

Salin kod Kod adalah seperti berikut:

var head = document.getElementsByTagName('head')[0];

skrip var = document.createElement('skrip');

script.src = 'feature.js';

head.appendChild(skrip);

Sudah tentu, kita perlu berurusan dengan pemantauan panggilan balik Spesifikasi HTML5 mentakrifkan atribut onload yang boleh mengikat panggilan balik.

Salin kod Kod adalah seperti berikut:

script.onload = function() {

console.log('skrip dimuatkan...');

}

Walau bagaimanapun, IE8 dan versi yang lebih lama tidak menyokong onload, mereka menyokong onreadystatechange. Lebih-lebih lagi, pengendalian ralat masih pelik. Di sini, anda boleh merujuk kepada beberapa perpustakaan pemuatan berasaskan sekolah yang popular, seperti labjs, yepnope, requirejs, dsb.

Seperti berikut, saya merangkumkan fail loadjs ringkas——

Salin kod Kod adalah seperti berikut:

var loadJS = function(url,panggilan balik){
var head = document.getElementsByTagName('head')[0];
skrip var = document.createElement('skrip');
Script.src = url;
script.type = "text/javascript";
Head.appendChild(skrip);
// teg skrip, IE mempunyai acara onreadystatechange, standard w3c mempunyai acara onload

// IE9 juga menyokong onload standard W3C
var ua = navigator.userAgent,
ua_version;
// IE6/7/8
Jika (/MSIE ([^;] )/.test(ua)) {
ua_version = parseFloat(RegExp["$1"], 10);
Jika (ua_version <= 8) {
               script.onreadystatechange = function(){
Jika (this.readyState == "dimuatkan" ){
                    panggil balik();
                }
            }
         } lain {
              script.onload = function(){
                 panggil balik();
            };
}
} lain {
          script.onload = function(){
             panggil balik();
        };
}
};

Ich werde hier nicht über das asynchrone Laden von Skripten mit document.write sprechen, da dies jetzt nur noch wenige Leute tun, da die Unterschiede zwischen den Browsern wirklich verwirrend sind.

Beachten Sie, dass der darin enthaltene JS-Code nicht ausgeführt wird, wenn Sie das Image-Objekt zum asynchronen Vorladen von JS-Dateien verwenden.

Lassen Sie uns abschließend über das asynchrone Laden von Skripten in requirejs sprechen.

requirejs garantiert nicht, dass die Zielskripte in der richtigen Reihenfolge ausgeführt werden, sondern nur, dass ihre Ausführungsreihenfolge ihre jeweiligen Abhängigkeitsanforderungen erfüllen kann. Dadurch wird sichergestellt, dass alle Skripte möglichst schnell parallel geladen und entsprechend der Abhängigkeitstopologie geordnet ausgeführt werden.

4. Zusammenfassung

OK, an diesem Punkt ist die Anweisung zum asynchronen Laden des Skripts beendet. Lassen Sie mich hier noch einmal auf die Optimierungssequenz eingehen——

1> Auf herkömmliche Weise verwenden wir Skript-Tags zum direkten Einbetten in das HTML-Dokument. Hier gibt es zwei Situationen:

a> In das Head-Tag einbetten – bitte beachten Sie, dass dies keine Auswirkungen auf das parallele Laden anderer statischer Ressourcendateien im Dokumentinhalt hat. Es hat jedoch Auswirkungen auf die Darstellung des Dokumentinhalts, d. h. auf die DOM-Wiedergabe Zu diesem Zeitpunkt ist der Bildschirm blockiert und es wird ein weißer Bildschirm angezeigt.

b> Am unteren Rand des Body-Tags einbetten – Um das Phänomen des weißen Bildschirms zu vermeiden, haben wir dem DOM-Rendering Priorität eingeräumt und dann das Skript ausgeführt, aber das Problem trat erneut auf. Lassen Sie uns zunächst über das erste Problem sprechen: Wenn der Inhalt des DOM-Dokuments relativ groß ist, kommt es zu einer Verzögerung beim Binden der interaktiven Ereignisse und das Erlebnis wird schlechter. Natürlich müssen wir wichtige Skripte je nach Bedarf zuerst ausführen lassen. Lassen Sie uns über das zweite Problem sprechen: Da sich die Skriptdateien unten im Körper befinden, ist das Laden dieser Skripte im Vergleich zu den Skripten im Kopf verzögert. Daher ist die Unterseite des Körpers nicht der Endpunkt der Optimierung.

c> Fügen Sie das Defer-Attribut hinzu – wir möchten, dass die Skripte so schnell wie möglich parallel geladen werden, also platzieren wir diese Skripte trotzdem im Kopf. Das Skript sollte gleichzeitig mit dem Laden des Dokuments geladen werden und die Darstellung des DOM nicht beeinträchtigen. Auf diese Weise kann das Skript ausgeführt werden, sobald das Dokument fertig ist. Es gibt also ein Attribut wie defer. Achten Sie jedoch auf die Kompatibilität. Für Browser, die das Defer-Attribut nicht unterstützen, müssen wir den Code in $(document).ready kapseln, z. B. jQuery. Zu beachten ist, dass alle Skripte mit Defer-Attributen sequentiell in der Reihenfolge ihres Erscheinens ausgeführt werden, also auch streng synchronisiert sind.

2> Im vorherigen Punkt geht es um die synchrone Ausführung von Skripten (beachten Sie, dass der Ladevorgang dieser Skripte parallel erfolgt, der einzige Unterschied besteht darin, wer die Anfrage zuerst auslöst und wer die Anfrage später auslöst). ist „parallele Ausführung von Skripten“. Natürlich wissen wir, dass zu einem bestimmten Zeitpunkt nur eine js-Datei ausgeführt werden kann. „Parallel“ bedeutet hier, dass derjenige, der sie zuerst lädt, sie sofort ausführt, solange die js-Engine vorhanden ist derzeit untätig. Die Optimierung ist hier in zwei Typen unterteilt:—

a> Das Hinzufügen des Async-Attributs kann zwar die oben genannten Optimierungspunkte erreichen, weist jedoch große Einschränkungen auf, d. Es gibt auch die Kombination mit dem Deffer-Attribut, die wirklich problematisch ist. Natürlich gibt es auch Kompatibilitätsprobleme. Die oben genannten drei Probleme führen zu einer eingeschränkten Anwendung. Achten Sie bei der Verwendung von Async unbedingt auf Abhängigkeiten.

b> Skript zum Laden von Skripten – Offensichtlich verwenden wir es, um den Zweck der „parallelen Ausführung von Skripten“ zu erreichen. Gleichzeitig ist es für uns auch bequem, Probleme mit der Skriptabhängigkeit zu kontrollieren. Daher verwenden wir ein intelligentes Lademanagement für das asynchrone Laden von js in requirejs.

Okay, lass es uns hier schreiben.

Hier spreche ich nur von asynchronen Ladeskripten. Es gibt noch einen weiteren Inhalt, nämlich das asynchrone Laden von Stildateien oder anderen statischen Ressourcen. Fortsetzung folgt...