Apakah Laluan Rendering Kritikal dan cara mengoptimumkannya-tutorial css-php.cn

Apakah Laluan Rendering Kritikal dan cara mengoptimumkannya

Mary-Kate Olsen

Lepaskan： 2024-12-04 19:04:12

asal

338 orang telah melayarinya

Qué es el Critical Rendering Path y cómo optimizarlo

Apakah Laluan Rendering Kritikal?

Laluan Rendering Kritikal ialah urutan fasa yang dilalui oleh penyemak imbas untuk menukar HTML, CSS dan JavaScript kepada piksel pada skrin:

Menghuraikan HTML ke dalam DOM (Model Objek Dokumen).
Menghuraikan CSS dalam CSSOM (Model Objek CSS).
Jalankan skrip.
Mengira saiz dan kedudukan elemen pada skrin.
Render halaman.

Langkah-langkah ini secara langsung mempengaruhi prestasi tapak web kami, jadi ada perkara yang perlu kami ambil kira jika kami ingin mengoptimumkan proses ini.

Membina DOM

Pelayar menerima HTML melalui panggilan HTTP. Sebaik sahaja ia menerimanya, ia mula membina DOM dengan data tersebut.

DOM ini dibina berdasarkan nod, setiap teg HTML akan bersamaan dengan nod dan elemen anak dalam HTML juga akan menjadi nod anak dalam pepohon DOM.

Semakin besar bilangan nod, semakin lama proses pemaparan halaman akan diambil untuk diselesaikan.

Model Objek CSS

Walaupun DOM mengandungi semua maklumat tentang kandungan halaman, CSSOM mengandungi semua maklumat tentang cara kandungan itu akan dilihat.

Perenderan blok pemprosesan CSS. Iaitu, sehingga ia diproses sepenuhnya, anda tidak boleh meneruskan langkah-langkah akan datang untuk akhirnya memaparkan kandungan pada skrin. Ini kerana mungkin dalam fail CSS gaya yang telah digunakan beberapa baris di atas ditimpa.

Pokok render

Setelah kami menyediakan DOM dan CSSOM, ini digabungkan menghasilkan "pokok Render", yang akan mempunyai semua maklumat yang diperlukan tentang elemen yang akan muncul pada skrin. Dalam pokok ini, elemen seperti semua yang mempunyai paparan: tiada; dan keturunan mereka atau semua yang terdapat dalam teg .

Susun atur

Dalam fasa "Reka Letak" saiz elemen pokok pemaparan dan hubungannya dengan elemen lain ditakrifkan. Proses ini bergantung pada skrin di mana halaman web sedang dilawati.

Jika tidak dinyatakan, elemen akan lalai kepada 100% daripada lebar induk, yang dalam sesetengah penyemak imbas ialah lebar tetap. Itulah sebabnya adalah perlu untuk memasukkan elemen ini dalam daripada dokumen kami:

<head>
    <meta name="viewport" content="width=device-width" />
</head>

Salin selepas log masuk

Setiap kali pengguna memutar peranti mudah alih mereka, proses Reka Letak dijalankan semula, kerana elemen dan susunannya pada skrin berpotensi berubah.

Reka Letak boleh menjejaskan prestasi tapak web, kerana semakin banyak bilangan nod, semakin lama proses ini akan selesai. Proses Reka Letak yang perlahan boleh menyebabkan sesetengah animasi tidak kelihatan baik, selain menyebabkan pemuatan halaman pertama menjadi lebih perlahan.

Lukisan halaman

Melukis piksel pada skrin ialah langkah terakhir proses pemaparan. Ini adalah langkah pantas, kerana selepas pemuatan pertama (dimuat) hanya kawasan halaman yang telah mengalami perubahan akan dicat semula;

Pengoptimuman CRP

Proses ini boleh dioptimumkan dengan cara yang berbeza, tetapi setiap kes adalah unik dan pada akhirnya perkara penting ialah anda menggunakan pada projek anda langkah-langkah yang paling sesuai dengannya.

Muatkan sumber kritikal secepat mungkin

Ideanya ialah penyemak imbas memuat turun sumber seperti imej, gaya, skrip, dsb. yang penting untuk halaman secepat mungkin, jadi adalah dinasihatkan untuk meletakkan elemen tersebut setinggi mungkin dalam

Walaupun ia adalah skrip atau gaya yang lebih kecil, ia boleh dimasukkan ke dalam teg sebaris.

<head>
    <meta name="viewport" content="width=device-width" />
</head>

Salin selepas log masuk

Sebaliknya, jika apa yang anda muatkan ialah skrip yang mengubah suai beberapa elemen DOM, ideanya adalah untuk memuatkannya setelah pepohon itu dibina dengan semua nodnya. Dalam kes tersebut, skrip itu perlu dimuatkan pada penghujung teg badan.

<head>
    <style>
        .foo {
            color: red;
        }
    </style>
</head>

Salin selepas log masuk

Tangguhkan pemuatan skrip

Menangguhkan pemuatan skrip yang tidak mengubah suai DOM adalah amalan yang sangat baik untuk mengurangkan masa memuatkan tapak web. Ini boleh dilakukan melalui atribut "async" dan "defer".

Meletakkan skrip sebagai async akan menyebabkan skrip ini dimuat turun dan dijalankan secara bebas, jadi ia tidak akan menyekat proses pemaparan dan masa pelaksanaan adalah sewenang-wenangnya.

Skrip dengan atribut tangguh akan dimuat turun secara tidak segerak, tetapi menghormati susunan tempat ia terletak dalam dokumen. Ini juga merupakan cara yang baik untuk mengawal sama ada skrip kecil dijalankan selepas skrip yang lebih besar.

<html>
    <body>
        <!-- My content -->
        <script src="./path/to/my/script.js"></script>
    </body>
</html>

Salin selepas log masuk

Dalam contoh di atas, tiga skrip akan dimuat turun secara tidak segerak. Kami menganggap bahawa skrip terakhir akan dimuat turun terlebih dahulu, kerana ia lebih kecil. Skrip pertama akan memuat turun dan berjalan sepenuhnya secara bebas, tidak menunggu elemen lain bersedia atau menyekat proses pemaparan. Walau apa pun, skrip terakhir akan dilaksanakan selepas yang kedua, memandangkan atribut tangguh menghormati pesanan.

Pengasingan gaya dengan pertanyaan media

Ideanya adalah untuk memuatkan hanya gaya yang diperlukan pada skrin, jadi teknik yang boleh membantu mengoptimumkan prestasi ialah memisahkan gaya halaman ke dalam fail yang berbeza bergantung pada sama ada ia akan digunakan pada telefon mudah alih , tablet, desktop, dsb. Dalam HTML, fail ini akan dimuatkan dengan pertanyaan media, mengelakkan pemuatan gaya yang tidak perlu.

<head>
    <meta name="viewport" content="width=device-width" />
</head>

Salin selepas log masuk

Kecilkan sumber

Walaupun nampak bodoh, mengecilkan fail boleh membantu meningkatkan prestasi halaman, kerana menghapuskan ruang putih, ulasan, dll. boleh mengurangkan kerja yang perlu dilakukan oleh penyemak imbas untuk membina pepohon render.

Kesimpulan

Ini hanyalah beberapa perkara yang perlu diingat untuk mengoptimumkan proses ini. Dengan mengambil kira perkara ini, adalah lebih berdaya maju untuk dapat menulis kod berkualiti yang telah direka bentuk untuk mengoptimumkan Laluan Pemberian Kritikal.

Atas ialah kandungan terperinci Apakah Laluan Rendering Kritikal dan cara mengoptimumkannya. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!