Petua untuk meningkatkan prestasi halaman dengan JavaScript

Dengan perkembangan Internet, prestasi laman web menjadi semakin penting. Kelajuan halaman mempunyai kesan yang besar pada pengalaman pengguna dan kedudukan enjin carian. Oleh itu, meningkatkan prestasi halaman adalah aspek utama pengoptimuman tapak web. Artikel ini akan memperkenalkan beberapa teknik untuk meningkatkan prestasi halaman melalui JavaScript.

1. Kurangkan permintaan HTTP:

Permintaan HTTP adalah salah satu sebab utama kelajuan tapak web yang perlahan. Apabila penyemak imbas meminta halaman, ia perlu menghantar berbilang permintaan HTTP untuk mendapatkan fail seperti CSS, JavaScript dan imej. Permintaan ini mengambil masa, jadi mengurangkannya adalah penting untuk meningkatkan kelajuan halaman.

Helah berikut boleh digunakan untuk mengurangkan permintaan HTTP:

1. Gabungkan fail CSS dan JavaScript:

Gabungkan berbilang fail CSS dan JavaScript menjadi satu fail Bilangan permintaan HTTP boleh dikurangkan, dengan itu meningkatkan kelajuan laman web. Ini boleh dicapai dengan menggunakan alat binaan seperti Gulp atau Webpack.

2. Gunakan sprite imej:

Gabungkan berbilang ikon kecil ke dalam satu fail imej dan gunakan CSS untuk memotong bahagian yang diperlukan, anda boleh mengurangkan HTTP fail imej Bilangan permintaan. Ini dipanggil teknologi sprite imej.

3. Gunakan pengekodan Base64:

Membenamkan imej kecil ke dalam CSS melalui pengekodan Base64 boleh mengurangkan bilangan permintaan HTTP. Tetapi untuk fail imej yang besar, kaedah ini tidak disyorkan.

2. Pemuatan malas:

Pemuatan malas merujuk kepada memuatkan sumber tertentu apabila ia sedang digunakan. Menggunakan teknik ini mengurangkan masa muat awal, dengan itu meningkatkan kelajuan halaman dan pengalaman pengguna.

Anda boleh mencuba teknik pemuatan malas berikut:

1. Pemuatan malas imej:

Tetapkan atribut src imej kepada pemegang tempat dan kemudian tambahkannya pada halaman Apabila menatal ke kedudukan imej, tetapkan atribut src kepada URL imej sebenar. Teknik ini dipanggil pemuatan malas atau pemuatan tertunda.

2. Lazy Loading JavaScript:

Letakkan memuatkan kod JavaScript yang tidak diperlukan ke bahagian bawah halaman supaya kandungan halaman dimuatkan dengan lebih cepat. Adalah disyorkan untuk menggunakan atribut async atau tangguh, yang membenarkan fail JavaScript dimuatkan secara tidak segerak tanpa mengganggu pemaparan halaman.

3. Kod Optimumkan:

Mengoptimumkan kod JavaScript ialah kunci untuk meningkatkan prestasi halaman. Berikut ialah beberapa petua untuk dipertimbangkan:

1. Optimumkan gelung:

Elakkan melakukan banyak pengiraan atau operasi I/O dalam gelung, anda boleh menggunakan caching atau mengubah struktur data , dsb. Kaedah untuk mengoptimumkan gelung.

2. Elakkan pengiraan berganda:

Simpan keputusan dan gunakan semula daripada melakukan pengiraan yang sama beberapa kali.

3. Hapuskan kebocoran memori:

Pastikan objek, pembolehubah dan pengendali peristiwa dialih keluar apabila ia tidak lagi digunakan untuk mengelakkan kebocoran memori.

4. Kod pemampatan:

Mampatan boleh mengurangkan saiz fail JavaScript, dengan itu mengurangkan masa muat turun. Anda boleh menggunakan petua berikut untuk mengecilkan kod JavaScript:

1. Gunakan pengecil:

Gunakan pengecil JavaScript seperti UglifyJS untuk mengalih keluar kod yang tidak diperlukan, memendekkan nama pembolehubah dan Kod Mampat ke dalam fail yang lebih kecil.

2. Dayakan Gzip:

Mendayakan pemampatan Gzip pada pelayan boleh mengurangkan saiz fail kira-kira 70%, sekali gus mempercepatkan muat turun.

Ringkasan:

Dengan menggunakan JavaScript untuk meningkatkan teknik prestasi halaman, anda boleh meningkatkan kelajuan halaman dan pengalaman pengguna, seterusnya meningkatkan kedudukan enjin carian dan kepuasan pengguna. Petua di atas hanyalah sebahagian daripada meningkatkan prestasi halaman, terdapat banyak aspek lain yang perlu dipertimbangkan, seperti masa tindak balas, caching, dsb. Oleh itu, pengoptimuman menyeluruh diperlukan untuk pengoptimuman tapak web.

Atas ialah kandungan terperinci Petua untuk meningkatkan prestasi halaman dengan JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!