Pemahaman mendalam tentang pengoptimuman prestasi bahagian hadapan: daripada rangkaian kepada pemaparan

1. Pengoptimuman rangkaian

Kurangkan permintaan HTTP

• Gabung sumber: Kurangkan bilangan permintaan dengan menggabungkan fail CSS dan JavaScript.

• Sumber sebaris: Untuk CSS dan JavaScript yang kecil, selaraskannya terus ke dalam HTML.

Gunakan HTTP/2

• HTTP/2 menyokong pemultipleksan, mengurangkan penyekatan permintaan dan meningkatkan kelajuan pemuatan.

Dayakan pemampatan GZIP

Konfigurasi sisi pelayan, mampatkan sumber teks dan kurangkan volum penghantaran.

Strategi cache

Gunakan pengepala cache HTTP, seperti Cache-Control, untuk menetapkan strategi cache yang sesuai.

2. Pengoptimuman pemuatan sumber

Malas memuatkan

Hanya muatkan sumber apabila mereka hendak memasuki port pandangan, sesuai untuk imej dan video, dsb.

<img  src="/static/imghw/default1.png" data-src="placeholder.jpg" class="lazy" data- alt="Pemahaman mendalam tentang pengoptimuman prestasi bahagian hadapan: daripada rangkaian kepada pemaparan" >



<h4>
  
  
  Preloading and prefetching
</h4>

<p>Use <link rel="preload"> to load critical resources in advance.<br>
Use <link rel="prefetch"> to prefetch non-critical resources.</p>
<h3>
  
  
  3. Rendering optimization
</h3>
<h4>
  
  
  Critical CSS
</h4>

<p>Inline the CSS required for the first screen rendering in the HTML head to avoid blocking rendering.</p>
<h4>
  
  
  Reduce CSS and JavaScript blocking
</h4>

• Use to delay non-critical CSS loading.
• Use async or defer attributes to asynchronously load JavaScript.

<script async src="script.js"></script>

Elakkan susun atur segerak paksa

• Gunakan animasi requestAnimationFrame atau CSS dan bukannya animasi JavaScript yang kompleks untuk mengurangkan aliran semula dan mengecat semula.

Pengoptimuman imej

• Pilih format imej yang betul (seperti WebP) dan gunakan saiz dan peleraian yang betul.

4. Pekerja Perkhidmatan dan storan luar talian

• Gunakan Service Worker untuk melaksanakan caching luar talian dan kemas kini sumber.

if ('serviceWorker' in navigator) {
    window.addEventListener('load', () => {
        navigator.serviceWorker
        .register('/sw.js')
        .then(registration => console.log('SW registered:', registration))
        .catch(error => console.error('SW registration failed:', error));
    });
}

5. Pemantauan dan Analisis Prestasi

• Gunakan alatan seperti Lighthouse, WebPageTest atau Chrome DevTools untuk ujian dan analisis prestasi.

6. Pemisahan Kod dan Pemuatan Malas

Import Dinamik

Gunakan import dinamik (ungkapan import()) untuk memuatkan blok kod atas permintaan dan mengurangkan masa pemuatan awal.

button.onclick = async () => {
    const module = await import('./lazyModule.js');
    module.default();
};

Pemisahan kod peringkat laluan

Dalam aplikasi SPA, gunakan fungsi pemisahan kod peringkat laluan yang disediakan oleh rangka kerja, seperti pemuatan malas Vue Router.

// Vue Router example
const Foo = () => import('./Foo.vue');

const routes = [
{ path: '/foo', component: Foo },
];

7. Pengoptimuman imej

Imej responsif

Gunakan elemen atau atribut srcset untuk memberikan imej peleraian berbeza berdasarkan nisbah piksel peranti atau saiz port pandangan.

<picture>
<source srcset="img/low-res.jpg" media="(max-width: 600px)">
<source srcset="img/high-res.jpg" media="(min-width: 600px)">
<img src="/static/imghw/default1.png" data-src="img/fallback.jpg" class="lazy" alt="Pemahaman mendalam tentang pengoptimuman prestasi bahagian hadapan: daripada rangkaian kepada pemaparan">
</source></source></picture>

8. Pekerja Web

Alihkan tugas pengkomputeran yang memakan masa kepada Pekerja Web untuk mengelak daripada menyekat urutan utama dan memastikan UI responsif.

// main.js
const worker = new Worker('worker.js');
worker.postMessage([1024, 512]);

// worker.js
self.onmessage = function(e) {
    const result = e.data[0] * e.data[1];
    self.postMessage(result);
};

9. Elakkan kebocoran ingatan

Kerap bersihkan pemasa yang tidak digunakan, pendengar acara dan struktur data yang besar untuk mengelakkan kebocoran memori.

<img  src="/static/imghw/default1.png" data-src="placeholder.jpg" class="lazy" data- alt="Pemahaman mendalam tentang pengoptimuman prestasi bahagian hadapan: daripada rangkaian kepada pemaparan" >



<h4>
  
  
  Preloading and prefetching
</h4>

<p>Use <link rel="preload"> to load critical resources in advance.<br>
Use <link rel="prefetch"> to prefetch non-critical resources.</p>
<h3>
  
  
  3. Rendering optimization
</h3>
<h4>
  
  
  Critical CSS
</h4>

<p>Inline the CSS required for the first screen rendering in the HTML head to avoid blocking rendering.</p>
<h4>
  
  
  Reduce CSS and JavaScript blocking
</h4>

• Use to delay non-critical CSS loading.
• Use async or defer attributes to asynchronously load JavaScript.

<script async src="script.js"></script>

10. Pemantauan Vitals Web

Fokus pada metrik Web Vitals seperti LCP (cat kandungan terbesar), FID (kelewatan input pertama) dan CLS (anjakan reka letak terkumpul), yang merupakan penunjuk utama untuk mengukur pengalaman pengguna.

if ('serviceWorker' in navigator) {
    window.addEventListener('load', () => {
        navigator.serviceWorker
        .register('/sw.js')
        .then(registration => console.log('SW registered:', registration))
        .catch(error => console.error('SW registration failed:', error));
    });
}

Atas ialah kandungan terperinci Pemahaman mendalam tentang pengoptimuman prestasi bahagian hadapan: daripada rangkaian kepada pemaparan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!