Teks javascript async src dimuat. Pemuatan JavaScript tidak segerak - mempercepat pemuatan halaman. Menambah atribut defer atau async di WordPress
29.06.2020
Salam kawan! Adakah anda tahu bahawa memuatkan JavaScript adalah salah satu hambatan terbesar dalam prestasi laman web? Hari ini tugas utama saya adalah untuk menjelaskan apa skrip dan bagaimana ia mempengaruhi kelajuan dan prestasi laman web.
Penyemak imbas memuat tag skrip berhenti membuat halaman sehingga skrip dimuat dan dijalankan. Halaman disekat dan penyemak imbas tidak bertindak balas terhadap tindakan pengguna selama beberapa saat. Masa kelewatan bergantung kepada beberapa faktor:
konfigurasi,
kelajuan sambungan internet,
saiz fail dan lain-lain ...
Atas sebab ini, Google PageSpeed \u200b\u200bInsights mengesyorkan agar anda membuang JavaScript dari bahagian atas halaman anda yang menyekatnya. Adalah baik untuk meletakkan skrip di bahagian bawah laman web, misalnya, sebelum tag penutup
atau menyediakan pemuatan tidak segerak.
Sekiranya kod skrip mempengaruhi paparan bahagian atas laman web ini, jangan masukkan ke dalam fail yang terpisah, tetapi masukkan terus ke dalam HTML.
JS dapat mengubah kandungan laman web dan bahkan mengarahkan ke url yang lain. Dalam kes ini, menghubungkan skrip di akhir dokumen akan membawa kepada kesan "menyentak" halaman, memuatkan elemen baru atau mengubah elemen yang ada di bahagian atas.
Menerapkan atribut async dan defer pada tag skrip
Mari kita lihat apa kerja JavaScript tidak segerak dan tertangguh, dan apakah perbezaan asas antara atribut async dan defer. Tetapi pertama, mari kita lihat urutan pemprosesan dokumen dengan sambungan tag skrip yang biasa.
< src \u003d "contoh.js"\u003e
Sebagai contoh, saya akan menggunakan konvensyen berikut:
Oleh itu, urutan pemprosesan adalah seperti berikut:
Penghuraian kod HTML terganggu semasa skrip memuat dan dijalankan, dan kemudian diteruskan. Terdapat kelewatan dalam memaparkan laman web.
Atribut penangguhan
Atribut defer membolehkan penyemak imbas mula memuatkan fail js secara selari tanpa menghentikan pemprosesan halaman lebih lanjut. Pelaksanaannya berlaku setelah penguraian penuh Model Objek Dokumen (DOM pendek), sementara penyemak imbas menjamin konsistensi berdasarkan urutan fail disambungkan.
< tangguhkan src \u003d "example.js"\u003e
Atribut async
Sokongan untuk atribut async muncul dalam HTML5, ini membolehkan penyemak imbas memuatkan fail js secara selari dan dilaksanakan segera setelah memuatkan, tanpa menunggu sisa halaman diproses.
< async src \u003d "contoh.js"\u003e
Gambarajah urutan pemprosesan:
Ini adalah muat turun tidak segerak. Atribut ini disyorkan untuk skrip yang tidak mempengaruhi paparan dokumen secara signifikan. Ini termasuk kaunter pengumpulan statistik (Google Analytics, Yandex Metrica), kod rangkaian iklan (Rangkaian Iklan Yandex, Google Adsense), butang media sosial, dan sebagainya.
Kelajuan memuatkan laman web adalah salah satu faktor peringkat di Google.
Kesambungan JavaScript tidak segerak mengurangkan masa muat halaman dengan menghilangkan kependaman. Seiring dengan ini, saya cadangkan memampatkan dan menggabungkan fail js menjadi satu, misalnya, menggunakan perpustakaan. Pengguna suka laman web pantas fast
Async and Defer - strategi memuatkan JavaScript
JavaScript adalah bahagian penting dari mana-mana aplikasi web moden, dan strategi yang kita pilih untuk dimuat secara langsung mempengaruhi prestasi aplikasi itu. Dalam artikel ini, kami akan cuba memahami perbezaan penting antara setiap pendekatan, kebaikan dan keburukan bersama dengan implikasi prestasi, dan cara mengoptimumkan interaksi halaman dan masa muat.
Untuk demonstrasi, saya akan membuat laman web yang terdiri daripada pergantungan luaran berikut. Perhatikan ukuran fail masing-masing, kerana masa muat turun berkadar langsung dengan ini.
HTML - halaman ~ 1 MB. Mengandungi markup / kandungan sebenar untuk menunjukkan beberapa output dinamik dari JavaScript.
Imej - image1.png ~ 5 Mb
JavaScript - file1.JS ~ 3MB adalah inti (fail utama) javascript dan bergantung pada penghuraian HTML. Ia diperlukan untuk menunjukkan beberapa kandungan dinamik atau memasang komponen tindak balas / sudut pada halaman.
JavaScript - file2.js ~ 460B adalah fail javascript kecil dan bebas yang berinteraksi dengan dom.
JavaScript - file3.js ~ 1.5 MB adalah fail js sekunder dan bergantung pada file1.js untuk melaksanakan beberapa kod keutamaan yang lebih rendah. Kod ini tidak diperlukan segera untuk rendering halaman dan interaksi pengguna; ia menunjukkan ikon media sosial, komen, bantuan dalam talian, melancarkan beberapa tugas analisis, dll.
Kini tiba masanya untuk menganalisis pendekatan yang berbeza
Pendekatan-1 [skrip di bahagian kepala]
Dalam kes pertama, kami akan memuatkan semua tag skrip ke bahagian kepala HTML kami. Di bawah ini adalah tangkapan skrin analisis tab rangkaian halaman krom, siap untuk interaksi pengguna.
Kelebihan:
Urutan pelaksanaan kod dari pelbagai fail JS akan disimpan mengikut urutan fail dimasukkan ke dalam HTML. Dalam contoh semasa, walaupun file2 dan file3 dimuat sebelum file1, perintah pelaksanaan akan betul.
Kekurangan:
Dalam senario ini, penghuraian HTML akan dijeda hingga ketiga skrip di bahagian kepala telah dimuat, diurai, dan dijalankan. Skrin putih kosong akan ditunjukkan kepada pengguna walaupun fail HTML telah dimuat [tetapi tidak dihuraikan]. Ini jelas tidak baik untuk kebolehgunaan.
Tiada skrip di atas dapat mengakses / memanipulasi halaman HTML kerana DOM belum siap. Salah satu penyelesaian yang mungkin untuk mengatasi masalah ini adalah dengan mendengar acara DOMContentLoaded dan kemudian melaksanakan kodnya selepas itu. DOMContentLoaded Acara ini dipicu apabila dokumen HTML asli telah dimuat dan dihuraikan sepenuhnya tanpa menunggu helaian gaya dan gambar selesai dimuat.
Pendekatan-2 [skrip di akhir]
Untuk mengatasi 2 masalah yang kita hadapi dalam pendekatan pertama, mari memuatkan semua 3 skrip di bahagian bawah tag badan.
Kelebihan: HTML diuraikan sebelum skrip dimuat, sehingga pengguna akan dapat langsung melihat konten sebenarnya daripada menunggu skrip.
Oleh kerana semua skrip dijalankan setelah penghuraian HTML, mereka semua dapat mengakses DOM untuk manipulasi apa pun. Urutan pelaksanaan skrip dipelihara.
Kekurangan:
Tidak ada peningkatan prestasi seperti itu.
Pendekatan-3 [menggunakan atribut Async]
HTML5 memperkenalkan atribut skrip async, yang membantu memuatkan fail skrip yang sesuai selari dengan aliran lain tanpa mempengaruhi penghuraian HTML.
Akan tetapi, skrip yang sesuai akan diurai dan dilaksanakan segera setelah selesai memuatkan, penghuraian HTML selesai atau tidak, dan akan mempunyai pautan ke elemen DOM hingga ke titik tertentu.
Di sini anda dapat melihat dengan jelas bahawa file2.js dimuat sebelum fail HTML. Namun, semasa penyemak imbas memuat fail2, ia tidak menjeda penghuraian HTML dan karena ini, pada saat ia dijalankan, ia mempunyai pautan ke tempat letak html untuk menyuntikkan konten dinamik.
Kelebihan: Oleh kerana skrip dimuat pada utas yang berbeza, penghuraian HTML tidak akan ditangguhkan dan pengguna akan dapat melihat kandungan langsung dan bukannya layar kosong putih. Kenaikan prestasi utama, iaitu masa DOMContentLoaded telah menurun dari 47.68 saat kepada hanya 21.12 saat dan adalah ~ 55% dari keuntungan.
Kekurangan:
Urutan pelaksanaan JS tidak dipelihara. Ia dilaksanakan dalam urutan muat yang tepat, bukan urutan skrip yang disertakan dalam HTML. Sokongan Penyemak Imbas - Tidak disokong pada penyemak imbas web lama iaitu IE 9 ke bawah.
Apa yang berlaku jika JS dimuat sebelum elemen DOM tersedia? Kesalahan akan dilemparkan.
Catatan: Menempatkan skrip dengan atribut async di bahagian bawah bahagian badan tidak akan berguna dan setara dengan Pendekatan-2.
Pendekatan-4 [menggunakan atribut Defer]
Atribut Defer akan menyebabkan skrip dijalankan hanya setelah penghuraian HTML selesai. Satu perkara yang sangat penting untuk diingat di sini adalah bahawa Chrome belum menyokong penangguhan dan tidak mempengaruhi jangka masa DOMContentLoaded. Namun, ia melaksanakan skrip pada penghuraian HTML.
Kelebihan:
Urutan mengimport skrip dipelihara. Jadi file3.js hanya dilaksanakan setelah muat turun selesai dan file1 dijalankan, walaupun file3 dimuat lebih awal.
Sokongan Penyemak Imbas - ia mempunyai sokongan penyemak imbas yang lebih baik berbanding dengan atribut async, iaitu sebahagiannya disokong dalam IE v6-9
Skrip dapat mengakses DOM kerana hanya dapat dilaksanakan setelah HTML penuh dihuraikan.
Kekurangan:
Pada asalnya saya fikir penangguhan akan menjadi pilihan yang lebih baik daripada async, tetapi kemudian mendapati bahawa Chrome belum menyokongnya [versi 71.0.3578.98] dan tidak memberi kesan pada tempoh DOMContentLoaded.
Namun, ia berfungsi seperti yang diharapkan di Firefox dengan peningkatan prestasi yang ketara.
kesimpulan
Lebih baik meletakkan tag skrip di bahagian kepala dengan atribut async untuk perpustakaan pihak ketiga yang bergantung pada Google Analytics, Google reCAPTCHA, atau apa sahaja yang tidak memerlukan akses DOM, kerana skrip yang sesuai dimuat secara selari tetapi segera dilaksanakan.
Gunakan penangguhan untuk semua skrip lain yang dimuat di bahagian kepala kerana skrip tersebut juga akan dimuat secara selari, tetapi hanya akan dilaksanakan setelah HTML selesai dihuraikan dan DOM siap diakses / dimanipulasi.
Anda juga boleh menggunakan kombinasi pendengar DOMContentLoaded di dalam skrip asinkron untuk melaksanakan fungsi kemudian. Sila tinggalkan pendapat dan kesimpulan anda dalam komen, dan dengan senang hati saya akan membincangkannya dengan anda.
Pengarang bahan ini ialah I - Yuri Pakholkov. Saya menyediakan perkhidmatan untuk menulis program di Java, C ++, C # (serta berunding dengannya) dan membuat laman web. Saya bekerjasama dengan laman CMS OpenCart, WordPress, ModX dan ditulis sendiri. Di samping itu, saya bekerja secara langsung dengan JavaScript, PHP, CSS, HTML - iaitu, saya dapat mengubahsuai laman web anda atau membantu pengaturcaraan web.
Skrip pemalam (JavaScript) menyekat pemuatan kod HTML. Apabila penyemak imbas (penghurai) mencapai tag
