Baru-baru ini, saya mempelajari optimalisasi kinerja front-end. Penting untuk memahami proses rendering halaman untuk meresepkan obat yang tepat dan mencari tahu hambatan kinerja. Berikut ini adalah beberapa hal yang telah saya lihat, dan saya akan membaginya dengan Anda.
Referensi: Memahami Renderer
Rendering halaman memiliki karakteristik berikut :• Pemungutan suara acara tunggal
• Operasi yang jelas, kontinu, dan tertib (html5)
• Partisi dan membangun pohon dom
• Minta sumber daya dan preload
• Bangun pohon rendering dan menggambar halaman
Khususnya :Ketika kita mendapatkan byte HTML yang sesuai dari jaringan, pohon DOM mulai dibangun. Utas yang memperbarui UI bertanggung jawab atas browser. Bangunan pohon DOM diblokir saat:
• Aliran respons HTML diblokir dalam jaringan
• Ada skrip yang dibongkar
• Node skrip ditemui, tetapi masih ada file gaya yang diturunkan saat ini
Pohon rendering dibangun dari pohon DOM dan akan diblokir oleh file gaya.
Karena didasarkan pada pemungutan suara acara tunggal, bahkan jika tidak ada pemblokiran skrip dan gaya, rendering halaman akan diblokir ketika skrip atau gaya ini diuraikan, dieksekusi dan diterapkan.
Beberapa kasus di mana render halaman tidak memblokir :• Atribut penundaan yang ditentukan dan atribut async
• File gaya tanpa jenis media yang cocok
• Tidak ada node skrip atau simpul gaya dimasukkan melalui parser
Di sini, mari kita ilustrasikan ini dengan contoh (kode lengkap) :Salin kode