Rumah > hujung hadapan web > tutorial js > Pemahaman mendalam tentang pengoptimuman prestasi bahagian hadapan: daripada rangkaian kepada pemaparan

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

Susan Sarandon
Lepaskan: 2024-12-22 22:18:15
asal
509 orang telah melayarinya

In-depth understanding of front-end performance optimization: from network to rendering

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="placeholder.jpg" data-src="real-image.jpg" 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>

Salin selepas log masuk
Salin selepas log masuk
  • Use to delay non-critical CSS loading.
  • Use async or defer attributes to asynchronously load JavaScript.
<script async src="script.js"></script>
Salin selepas log masuk
Salin selepas log masuk

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));
    });
}
Salin selepas log masuk
Salin selepas log masuk

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();
};
Salin selepas log masuk

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 },
];
Salin selepas log masuk

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="img/fallback.jpg" alt="Pemahaman mendalam tentang pengoptimuman prestasi bahagian hadapan: daripada rangkaian kepada pemaparan">
</source></source></picture>
Salin selepas log masuk

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);
};
Salin selepas log masuk

9. Elakkan kebocoran ingatan

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

<img  src="placeholder.jpg" data-src="real-image.jpg" 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>

Salin selepas log masuk
Salin selepas log masuk
  • Use to delay non-critical CSS loading.
  • Use async or defer attributes to asynchronously load JavaScript.
<script async src="script.js"></script>
Salin selepas log masuk
Salin selepas log masuk

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));
    });
}
Salin selepas log masuk
Salin selepas log masuk

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!

sumber:dev.to
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan