Mengenai petua malas memuat JavaScript_javascript

Pemuatan malas JavaScript ialah salah satu masalah di web yang boleh membuatkan anda gila cuba mencari penyelesaian.

Ramai orang mengatakan "kemudian gunakan tangguh" atau "async", malah ada yang mengatakan "kemudian letakkan kod javascript anda di bahagian bawah kod halaman".

Tiada kaedah di atas dapat menyelesaikan masalah memuatkan js luaran selepas halaman web dimuatkan sepenuhnya. Kaedah di atas juga kadangkala menyebabkan anda menerima amaran "pemuatan javascript tertangguh" daripada alat ujian kelajuan halaman Google. Jadi penyelesaian di sini ialah penyelesaian yang disyorkan daripada halaman bantuan Google.

Cara malas memuatkan JavaScript

Berikut ialah kod yang disyorkan oleh Google. Kod ini hendaklah diletakkan sebelum teg 36cc49f0c466276486e50c850b7e4956 Juga, saya menyerlahkan nama fail JS luaran.

<script type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "defer.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>

Apa yang dilakukan di sini?
Kod ini bermaksud menunggu sehingga keseluruhan dokumen dimuatkan sebelum memuatkan fail luaran "defer.js".

Arahan khusus

1. Salin kod di atas

2. Tampal kod sebelum teg 36cc49f0c466276486e50c850b7e4956

3. Ubah suai "defer.js" kepada nama fail JS luaran anda

4. Pastikan laluan fail anda betul. Contohnya: Jika anda hanya memasukkan "defer.js", maka fail "defer.js" mesti berada dalam folder yang sama dengan fail HTML.

Di manakah kod ini boleh digunakan (dan di mana ia tidak boleh digunakan)

Kod ini tidak akan memuatkan fail JS luaran yang ditentukan sehingga dokumen dimuatkan. Oleh itu, kod JavaScript yang bergantung pada pemuatan halaman biasa tidak boleh diletakkan di sini. Sebaliknya, kod JavaScript harus diasingkan kepada dua kumpulan. Satu kumpulan ialah kod javascript yang dimuatkan serta-merta kerana halaman memerlukannya, dan kumpulan yang lain ialah kod javascript yang beroperasi selepas halaman dimuatkan (seperti menambah acara klik atau perkara lain). Kod JavaScript yang perlu menunggu sehingga halaman dimuatkan sebelum dilaksanakan hendaklah diletakkan dalam fail luaran dan kemudian diimport.

Sebagai contoh, pada halaman ini saya menggunakan fail di atas untuk memuatkan malas - Analitis Google, Viglink (cara saya menjana wang), dan lencana Google yang muncul di bahagian bawah (media sosial saya). Bagi saya, tiada sebab untuk memuatkan fail ini pada pemuatan halaman awal kerana tidak perlu memuatkan kandungan yang tidak berkaitan di atas pada peringkat awal. Mungkin anda mempunyai fail dengan sifat yang sama pada halaman anda. Kemudian adakah anda mahu pengguna menunggu sehingga fail ini dimuatkan sebelum melihat kandungan halaman web?

Mengapa tidak menggunakan kaedah lain?

Memasukkan kod secara terus, meletakkan skrip di bahagian bawah dan menggunakan "menunda" atau "async" tidak boleh mencapai tujuan memuatkan halaman dahulu dan kemudian memuatkan JS, dan ia pastinya tidak akan berprestasi secara konsisten merentas penyemak imbas.

Mengapa ia penting?

Kepentingannya adalah kerana Google menggunakan kelajuan halaman sebagai salah satu faktor ranking dan pengguna juga mahu halaman dimuatkan dengan cepat. Ia juga sangat penting untuk pengoptimuman enjin carian mudah alih. Google mengukur kelajuan halaman berdasarkan tempoh masa halaman tersebut dimuatkan pada mulanya. Ini bermakna anda perlu mendapatkan acara pemuatan halaman secepat mungkin. Masa pemuatan halaman awal ialah cara Google menilai kualiti halaman web anda (dan jangan lupa bahawa pengguna sedang menunggu halaman dimuatkan). Google secara aktif mempromosikan dan mengesyorkan untuk menyusun kandungan yang tidak berkaitan di atas mengikut kepentingan dan memastikan semua sumber (js, css, imej, dll.) berada di luar laluan pemaparan kritikal dan berbuat demikian adalah berbaloi dengan usaha. Jika ia menggembirakan pengguna dan menggembirakan Google, anda harus melakukannya.

Contoh penggunaan

Saya telah mencipta halaman di mana anda boleh melihat kod ini sedang digunakan.

Sampel fail untuk anda uji

Baiklah, untuk menggambarkan, saya telah membuat beberapa halaman contoh untuk anda uji. Setiap halaman melakukan perkara yang sama. Ini adalah halaman HTML biasa, mengandungi skrip javascript yang menunggu selama 2 saat dan kemudian mengeluarkan "hello world". Anda boleh menguji fail ini dan anda akan melihat bahawa terdapat hanya satu kaedah dan masa pemuatannya tidak termasuk masa menunggu 2 saat.

Halaman untuk memasukkan skrip terus –

Klik di sini

Halaman dengan skrip luaran menggunakan "tunda" –

Klik di sini Halaman menggunakan kod rujukan di atas –
Klik di sini

Isi penting

Keutamaan utama adalah untuk menyampaikan kandungan kepada pengguna secepat mungkin. Dan kami tidak pernah terfikir tentang cara merawat kod javascript kami. Tetapi pengguna tidak boleh dipaksa untuk menunggu kandungan untuk beberapa skrip yang tidak penting. Tidak kira betapa keren pengaki anda, tiada sebab bagi pengguna yang mungkin tidak menatal ke pengaki untuk memuatkan fail JavaScript yang menjadikannya keren.

Di atas adalah keseluruhan kandungan artikel ini, saya harap anda semua menyukainya.