Amalan Terbaik untuk Kelajuan Pemuatan Halaman Web: Mengoptimumkan Aliran Semula, Lukis Semula dan Aliran Semula

Tingkatkan kelajuan memuatkan halaman web: amalan terbaik untuk pengaliran semula, lukisan semula dan pengaliran semula, contoh kod khusus diperlukan

Dengan perkembangan pesat Internet, kelajuan pemuatan halaman web telah menjadi bahagian penting dalam pengalaman pengguna. Tiada siapa yang mahu menunggu masa pemuatan yang lama, jadi bagaimana untuk meningkatkan kelajuan pemuatan halaman web telah menjadi isu yang sangat kritikal.

Kelajuan memuatkan halaman web dipengaruhi oleh banyak faktor, antaranya aliran semula, lukis semula dan aliran semula adalah tiga kesesakan prestasi utama. Artikel ini akan memperkenalkan beberapa amalan terbaik untuk membantu anda mengoptimumkan kelajuan pemuatan halaman web anda dan memberikan contoh kod khusus.

1. Optimumkan struktur HTML dan CSS

Struktur HTML dan CSS halaman web ialah asas prestasi pemuatan halaman web. Pertimbangkan pilihan pengoptimuman berikut:

• Minikan saiz fail HTML dan CSS: alih keluar kod, ruang kosong dan ulasan yang tidak diperlukan dan gunakan alat pemampatan untuk mengurangkan saiz fail.
• Kurangkan tahap bersarang: Terlalu banyak tahap bersarang akan menyebabkan penyemak imbas berulang kali melakukan operasi aliran semula dan lukis semula, jadi cuba pastikan struktur HTML dan CSS serata mungkin.
• Gunakan fail CSS luaran: Letakkan gaya CSS dalam fail luaran untuk mengelakkan sebaris dan pertindihan gaya.

2. Elakkan mencetuskan aliran semula dan lukis semula

Alir semula dan lukis semula ialah dua faktor penting yang mempengaruhi prestasi halaman web. Ia biasanya dicetuskan kerana perubahan dalam elemen DOM, yang sering berlaku semasa interaksi pengguna atau kesan animasi. Berikut ialah beberapa cara untuk mengelak daripada mencetuskan aliran semula dan mengecat semula:

• Gunakan kelas dan bukannya atribut gaya: Tentukan gaya sebagai kelas CSS dan bukannya menulis gaya terus dalam elemen HTML melalui atribut gaya. Ini mengakibatkan kurang pengubahsuaian pada gaya, sekali gus mengurangkan kejadian lukisan semula dan aliran semula.
• Elakkan operasi DOM yang kerap: Kurangkan operasi penambahan, pemadaman dan pengubahsuaian yang kerap pada elemen DOM dan cuba selesaikan berbilang tugas dalam satu operasi.
• Gunakan serpihan dokumen atau DOM luar talian: Simpan sementara elemen DOM yang memerlukan operasi yang kerap dalam serpihan dokumen atau DOM luar talian, kemudian tambahkannya pada halaman selepas menyelesaikan operasi untuk mengurangkan bilangan aliran semula dan lukisan semula.
• Gunakan animasi CSS dan bukannya animasi JavaScript: Animasi CSS boleh terus menggunakan pecutan perkakasan penyemak imbas dan lebih cekap daripada animasi yang dilaksanakan menggunakan JavaScript.

Berikut ialah contoh kod untuk mengelakkan manipulasi DOM yang kerap:

<div id="container"></div>

<script>
  const container = document.getElementById('container');
  const fragment = document.createDocumentFragment();

  for (let i = 0; i < 1000; i++) {
    const listItem = document.createElement('li');
    listItem.textContent = 'List item ' + i;
    fragment.appendChild(listItem);
  }

  container.appendChild(fragment);
</script>

3. Pramuat dan malas memuatkan kandungan

Pramuat dan pemuatan malas ialah cara yang berkesan untuk mengoptimumkan kelajuan pemuatan halaman web. Menggunakan pramuat boleh memuatkan sumber yang mungkin diperlukan lebih awal sebelum halaman dipaparkan, manakala pemuatan malas boleh memuatkan kandungan tertentu apabila syarat tertentu dipenuhi.

Berikut ialah kod contoh untuk pramuat dan memuatkan imej malas:

<img src="/static/imghw/default1.png"  data-src="loading.gif"  class="lazy" data- alt="Image">

<script>
  const img = document.querySelector('img');
  const src = img.getAttribute('data-src');

  const image = new Image();
  image.onload = function() {
    img.setAttribute('src', src);
  };
  image.src = src;
</script>

Dalam kod di atas, imej pramuat pertama kali dipaparkan sebagai animasi pemuatan, dan kemudian selepas sumber imej dimuatkan, ia digantikan dengan imej sebenar .

4. Gabung dan mampatkan fail sumber

Menggabungkan dan memampatkan fail sumber boleh mengurangkan bilangan permintaan rangkaian dan saiz fail. Gabungkan berbilang fail CSS atau fail JavaScript ke dalam satu fail dan gunakan alat pemampatan untuk mengurangkan saiz fail. Ini mengurangkan bilangan perjalanan pergi dan balik antara pelayan dan penyemak imbas dan mengurangkan masa pemindahan fail.

5. Gunakan Cache Penyemak Imbas

Tetapkan dasar cache pada pelayan supaya halaman akan diambil daripada cache pada pemuatan berikutnya dan bukannya menghantar semula permintaan. Dengan menetapkan maklumat pengepala cache yang sesuai, penyemak imbas boleh cache sumber statik untuk satu tempoh masa, dengan itu mengurangkan beban pada pelayan dan meningkatkan kelajuan pemuatan halaman.

Berikut ialah contoh kod untuk menyediakan caching pada pelayan Apache:

<IfModule mod_expires.c>
  ExpiresActive on
  
  ExpiresDefault "access plus 2 weeks"
  
  <FilesMatch ".(png|jpg|jpeg|gif|ico|css|js)$">
    ExpiresDefault "access plus 1 month"
  </FilesMatch>
</IfModule>

Artikel ini memperkenalkan beberapa amalan terbaik untuk meningkatkan kelajuan pemuatan halaman web, termasuk mengoptimumkan struktur HTML dan CSS, mengelakkan mencetuskan aliran semula dan lukis semula, pramuat dan kemalasan Muatkan kandungan, cantumkan dan mampatkan fail sumber, gunakan cache penyemak imbas dan banyak lagi. Saya harap teknologi ini dapat membantu anda meningkatkan kelajuan memuatkan halaman web dan memberikan pengalaman pengguna yang lebih baik.

Atas ialah kandungan terperinci Amalan Terbaik untuk Kelajuan Pemuatan Halaman Web: Mengoptimumkan Aliran Semula, Lukis Semula dan Aliran Semula. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!