Penyampaian progresif: meningkatkan prestasi paparan kandungan

Rendering Progresif ialah satu set teknik yang digunakan untuk meningkatkan prestasi halaman web, terutamanya dari segi kepantasan kandungan dipaparkan kepada pengguna. Bahagian halaman dipaparkan dan dimuatkan secara beransur-ansur, bukannya keseluruhan halaman dimuatkan sekaligus. Matlamatnya adalah untuk memaparkan kandungan secepat mungkin, dengan itu meningkatkan masa pemuatan persepsi - masa di mana pengguna merasakan halaman sedang dimuatkan.

---

Kelebihan rendering progresif

1. Masa paparan yang lebih pantas - Pengguna melihat kandungan pertama dengan lebih pantas, yang meningkatkan pengalaman pengguna, terutamanya pada rangkaian yang lebih perlahan.

2. Pengoptimuman untuk peranti yang lebih lemah - Peranti yang kurang berkuasa boleh memaparkan kandungan awal dengan lebih mudah tanpa ketinggalan.

3. Penggunaan SEO - Indeks enjin carian pada mulanya memuatkan elemen, yang membantu dalam kedudukan halaman yang lebih baik.

---

Teknik untuk rendering progresif

Teknik yang digunakan untuk pemaparan progresif termasuk pemuatan malas untuk imej dan sumber lain, pemarahan sebelah pelayan (SSR) dan penghidratan sebelah pelanggan kod SPA permohonan.

Walaupun pemaparan progresif amat penting pada zaman internet lebih perlahan, ia masih berguna dalam pembangunan hari ini disebabkan oleh penggunaan meluas rangkaian mudah alih yang tidak boleh dipercayai. Berikut ialah beberapa teknik yang digunakan untuk pemaparan progresif.

1. Malas memuatkan imej (Malas memuatkan)

Dalam teknik ini, imej pada halaman tidak dimuatkan sekaligus. Sebaliknya, imej dimuatkan hanya apabila pengguna menatal ke bahagian halaman tempat imej itu berada. Dengan cara ini, sumber digunakan dengan lebih menjimatkan dan halaman dimuatkan dengan lebih cepat kerana hanya kandungan yang paling penting dipaparkan dahulu.

• Pemuatan malas moden: HTML kini menyokong atribut loading="lazy" untuk elemen, yang memberitahu penyemak imbas untuk menangguhkan memuatkan imej yang berada di luar bahagian halaman yang boleh dilihat sehingga pengguna menatal berhampiran mereka. Contohnya:

   <img src="/static/imghwm/default1.png" data-src="image.jpg" class="lazy" loading="lazy" alt="Opis slike">

• Penjejakan tatal JavaScript: Anda boleh menggunakan JavaScript untuk menjejaki kedudukan tatal, dan apabila imej mendekati bahagian skrin yang kelihatan, pemuatan imej boleh dicetuskan pada masa itu (dengan membandingkan koordinat imej dengan kedudukan skrol semasa).

2. Keutamaan untuk kandungan yang boleh dilihat (Memberikan kandungan di atas tindanan)

Dengan "kandungan di atas lipatan" kami maksudkan kandungan yang kelihatan serta-merta dalam penyemak imbas tanpa menatal. Untuk membolehkan halaman memaparkan kandungan utama ini secepat mungkin, hanya sumber yang diperlukan seperti CSS asas dan skrip pemaparan halaman awal perlu dimuatkan.

Meminimumkan sumber: Semasa memuatkan halaman, anda hendaklah memasukkan jumlah minimum CSS, kandungan dan skrip yang diperlukan untuk memaparkan bahagian pertama halaman. Sumber lain boleh ditangguhkan menggunakan skrip tangguh atau dengan memantau acara seperti DOMContentLoaded atau memuatkan, supaya sumber tambahan dimuatkan selepas paparan awal.

3. Serpihan HTML Tak Segerak

Teknik ini membolehkan pelayan menghantar sebahagian daripada HTML ke penyemak imbas supaya halaman itu boleh dipaparkan dengan segera, manakala bahagian yang selebihnya dimuatkan berturut-turut. Pendekatan ini amat berguna untuk halaman dinamik yang kandungannya berasal dari pelayan - sebahagian daripada halaman dipaparkan dahulu, manakala bahagian lain ditambahkan kemudian.

4. Pramuat dan praambil sumber

Menggunakan atau untuk memuatkan sumber kritikal seperti gaya, skrip atau fon sebelum ia diperlukan. Ini membolehkan kandungan dimuatkan dengan lebih pantas, terutamanya untuk sumber yang tidak diperlukan serta-merta tetapi digunakan kemudian pada halaman.

5. Pembahagian kod dan pemuatan JavaScript dinamik

Memecahkan kod JavaScript kepada bahagian yang lebih kecil (ketulan) yang dimuatkan hanya apabila diperlukan, sekali gus mengurangkan volum awal data yang dimuat turun.

6. Laluan kritikal CSS (CSS Kritikal)

Mengasingkan dan memuatkan hanya CSS yang paling penting untuk paparan halaman awal, manakala selebihnya boleh dimuatkan secara tak segerak. Ini membolehkan kandungan visual dipaparkan dengan lebih pantas manakala halaman selebihnya dimuatkan di latar belakang.

7. Rendering Sisi Pelayan (SSR) dan Penjanaan Tapak Statik (SSG)

Merender bahagian halaman pada pelayan sebelum ia dihantar kepada pengguna. Ini membolehkan pengguna melihat kandungan serta-merta tanpa menunggu JavaScript dimuatkan, menghasilkan prestasi dan SEO yang lebih baik.

8. Apl Web Progresif (PWA)

Menggunakan teknologi PWA membolehkan memuatkan dan mengakses aplikasi walaupun pengguna tidak dalam talian, yang mengurangkan beban rangkaian dan membolehkan pemuatan kandungan pantas walaupun dalam keadaan sambungan internet yang lemah.

---

Kesimpulan

Pemaparan progresif membantu mencapai pemaparan kandungan yang lebih pantas, sekali gus mengurangkan masa pemuatan yang dirasakan. Tanpa mengira sambungan internet yang lebih pantas, teknik ini masih berguna kerana peningkatan penggunaan peranti mudah alih dan kualiti rangkaian mudah alih yang berubah. Dengan cara ini, anda memberikan pengguna pengalaman yang lebih baik, dengan akses yang lebih pantas kepada maklumat yang paling penting pada halaman anda.

Atas ialah kandungan terperinci Penyampaian progresif: meningkatkan prestasi paparan kandungan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!