Cara menggunakan JavaScript untuk mengoptimumkan pemuatan halaman

Dengan pembangunan Internet yang berterusan, kelajuan memuatkan halaman web telah mendapat perhatian yang lebih dan lebih. Untuk halaman web, masa memuatkan halaman menentukan pengalaman pengguna Jika masa memuatkan halaman terlalu lama, pengguna akan kehilangan kesabaran mereka, yang secara langsung akan menjejaskan trafik tapak web dan reputasi pengguna. Oleh itu, dalam proses pembangunan web sebenar, cara mengoptimumkan kelajuan memuatkan halaman adalah isu penting. Artikel ini akan memperkenalkan cara menggunakan JavaScript untuk mengoptimumkan pemuatan halaman.

1. Proses pemuatan halaman

Sebelum membincangkan cara mengoptimumkan pemuatan halaman, anda perlu memahami proses pemuatan halaman web terlebih dahulu. Secara umumnya, apabila pengguna melawat halaman web, ia dimuatkan dalam susunan berikut:

1. Mewujudkan sambungan: Penyemak imbas pengguna menghantar permintaan kepada pelayan dan pelayan mewujudkan sambungan selepas menerima permintaan itu.
2. Hantar permintaan: Penyemak imbas menghantar permintaan kepada pelayan untuk meminta semua sumber yang diperlukan, termasuk HTML, CSS, JavaScript, imej, dsb.
3. Terima respons: Pelayan menghantar sumber yang diminta kepada penyemak imbas, dan penyemak imbas mula menghuraikan fail HTML dan menghantar permintaan baharu untuk mendapatkan sumber seperti CSS dan JavaScript.
4. Menghuraikan HTML: Penyemak imbas menghuraikan fail HTML dan membina pepohon DOM, pepohon CSSOM dan pepohon pemaparan.
5. Memuatkan skrip: Penyemak imbas memuat turun fail JavaScript dan melaksanakan skrip.
6. Halaman pemaparan: Berdasarkan pepohon DOM, pepohon CSSOM dan skrip JavaScript, halaman akhir dipaparkan dan dipaparkan kepada pengguna.

2. Pemuatan halaman dioptimumkan JavaScript

Dalam proses pemuatan halaman di atas, pemuatan dan pelaksanaan skrip JavaScript adalah pautan yang mengambil masa yang lama. Oleh itu, dalam pembangunan web, cara mengoptimumkan pemuatan dan pelaksanaan JavaScript untuk meningkatkan kelajuan pemuatan halaman telah menjadi masalah yang mendesak untuk diselesaikan.

Berikut ialah petua berkaitan untuk pengoptimuman JavaScript:

1. Gunakan atribut tangguh dan tak segerak

Dalam HTML, anda boleh menggunakan tangguh dan tak segerak dalam skrip tag Atribut untuk mengawal pemuatan dan pelaksanaan skrip JavaScript:

(1) defer attribute: Menunjukkan bahawa pemuatan dan penghuraian skrip dilakukan secara tidak segerak, iaitu muat turun tidak akan menyekat penghuraian HTML , tetapi akan menunggu sehingga dokumen HTML dihuraikan Kemudian laksanakan skrip.

(2) atribut async: Menunjukkan bahawa pemuatan dan penghuraian skrip dilakukan secara tidak segerak, tetapi proses ini akan menyekat pemaparan halaman Iaitu, semasa proses pemaparan halaman, skrip mungkin tidak dimuat turun lagi, yang mungkin akan menyebabkan halaman berkelip.

Menggunakan atribut tangguh boleh menyelesaikan masalah penyekatan skrip JavaScript tanpa menjejaskan pemaparan halaman. Penggunaan atribut async adalah untuk mempercepatkan muat turun dan pelaksanaan skrip, tetapi ia mungkin menjejaskan pengalaman pengguna.

2. Kurangkan saiz JavaScript sebanyak mungkin

Semakin besar saiz skrip JavaScript, semakin lama masa yang diperlukan untuk memuat turun dan menghuraikan. Oleh itu, semasa menulis kod JavaScript, anda harus cuba mengurangkan saiz kod sebanyak mungkin. Khususnya, anda boleh mengambil kaedah berikut:

(1) Memampatkan fail JavaScript: Anda boleh menggunakan beberapa alatan (seperti uglifyjs, dll.) untuk memampatkan fail JavaScript dan mengalih keluar beberapa maklumat yang tidak berguna seperti ulasan, ruang, dan baris baharu.

(2) Kecilkan fail JavaScript: Beberapa perpustakaan JavaScript yang biasa digunakan (seperti jQuery, dll.) boleh dikurangkan kepada bahagian yang perlu digunakan sahaja.

(3) Elakkan kod berlebihan: Semasa menulis kod JavaScript, elakkan kewujudan kod berlebihan sebanyak mungkin. Anda boleh menyemak masalah dalam kod melalui beberapa alatan (seperti JSLint, JSHint, dll.).

3. Permintaan untuk meminimumkan kod JavaScript

Apabila memuatkan skrip JavaScript, setiap fail akan meningkatkan bilangan permintaan HTTP Oleh itu, permintaan untuk meminimumkan kod JavaScript adalah Satu aspek penting pengoptimuman JavaScript. Anda boleh menggunakan kaedah berikut:

(1) Gabungkan fail JavaScript: Gabungkan berbilang fail JavaScript serupa ke dalam satu fail, yang boleh mengurangkan permintaan HTTP dan meningkatkan prestasi.

(2) Letakkan fail JavaScript di bahagian bawah: Dengan cara ini, skrip JavaScript boleh dimuatkan selepas kandungan halaman dimuatkan, meningkatkan pengalaman pengguna.

(3) Gunakan CDN: CDN (Rangkaian Penghantaran Kandungan) ialah rangkaian teragih yang boleh cache dan menghantar fail JavaScript dengan pantas, sekali gus meningkatkan kelajuan pemuatan JavaScript.

4. Gunakan cache setempat

Dalam pembangunan web, menggunakan cache setempat membolehkan skrip JavaScript dicache dalam penyemak imbas untuk kegunaan yang lebih mudah pada masa akan datang. Ini mengurangkan permintaan HTTP dan meningkatkan kelajuan memuatkan fail JavaScript. Kaedah berikut boleh digunakan:

(1) Gunakan localStorage untuk menyimpan fail JavaScript: Anda boleh menggunakan LocalStorageAPI untuk menyimpan fail JavaScript dalam cache setempat Anda boleh membacanya terus dari cache pada kali berikutnya anda menggunakannya , meningkatkan kelajuan pemuatan fail JavaScript.

(2) Gunakan Service Worker: Service Worker ialah skrip yang dijalankan antara penyemak imbas dan rangkaian Ia boleh cache fail JavaScript secara setempat Apabila digunakan pada masa akan datang, ia boleh dibaca terus dari cache untuk menambah baik JavaScript kelajuan memuatkan fail.

3. Kesimpulan

Melalui pengenalan artikel ini, kita dapat mengetahui bahawa pengoptimuman JavaScript merupakan isu yang sangat penting, yang melibatkan kelajuan pemuatan dan pengalaman pengguna halaman web. Apabila menggunakan JavaScript untuk pengoptimuman halaman, anda perlu memahami proses pemuatan dan pelaksanaan JavaScript, meminimumkan saiz kod JavaScript, meminimumkan permintaan untuk kod JavaScript dan menggunakan caching tempatan dan teknik lain untuk meningkatkan kelajuan pemuatan halaman dan pengalaman pengguna.

Atas ialah kandungan terperinci Cara menggunakan JavaScript untuk mengoptimumkan pemuatan halaman. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!