Menguasai Prestasi Web: Memahami Pipeline Pixel

Sebagai pembangun web, dan terutamanya bagi kami yang pakar dalam pembangunan bahagian hadapan, adalah penting untuk memahami cara penyemak imbas berfungsi, protokol komunikasi di web, kebolehcapaian web dan banyak lagi.

Dalam kes ini, saya berkongsi sesuatu yang perlu diingat untuk meningkatkan prestasi tapak web kami dan dengan itu meningkatkan pengalaman pengguna. Ini mengenai Pixel Pipeline.

Apakah Pipeline Pixel?

Pipeline Pixel ialah proses yang menerangkan cara penyemak imbas web menukar HTML, CSS dan JavaScript kepada elemen visual yang dipaparkan pada skrin

Terdapat lima bidang utama yang perlu anda ketahui dan pertimbangkan dalam kerja anda sebagai pembangun web. Lima kawasan ini ialah apa yang anda ada dan setiap satu mewakili titik penting dalam saluran paip piksel ke skrin:

JavaScript: JavaScript biasanya digunakan untuk mengendalikan kerja yang akan menghasilkan perubahan visual pada antara muka pengguna. Contohnya, ini mungkin fungsi animasi jQuery, mengisih set data atau menambahkan elemen DOM pada halaman

Pengiraan gaya: Ini ialah proses untuk mengetahui peraturan CSS yang digunakan untuk elemen HTML berdasarkan pemilih yang sepadan. Sebagai contoh, .headline ialah contoh pemilih CSS yang digunakan pada mana-mana elemen HTML dengan nilai atribut kelas yang mengandungi kelas tajuk.

Reka letak: Setelah penyemak imbas mengetahui peraturan yang digunakan pada elemen, ia boleh mula mengira geometri halaman, seperti jumlah elemen ruang yang digunakan dan tempat ia muncul pada skrin.

Cat: Lukisan ialah proses mengisi piksel. Ia melibatkan melukis teks, warna, imej, sempadan, bayang-bayang dan pada asasnya setiap aspek visual elemen selepas reka letaknya pada halaman telah dikira.

Komposit: Memandangkan bahagian halaman berpotensi dilukis pada berbilang lapisan, bahagian tersebut perlu digunakan pada skrin dalam susunan yang betul supaya halaman dipaparkan seperti yang diharapkan.

Jadi, dengan mengetahui perkara di atas, kita boleh memahami kos sumber untuk animasi di mana kita mengubah saiz elemen, yang akan melibatkan kembali ke proses Reka Letak, kemudian ke proses Cat, dan akhirnya ke proses Karang.

Sebaliknya, mencipta animasi yang melibatkan penukaran warna teks atau warna latar belakang elemen hanya memerlukan pergi ke proses Cat dan kemudian beralih ke proses Karang.

Pengesyoran untuk meningkatkan prestasi tapak web anda dan meningkatkan pengalaman pengguna

i) Cuba elakkan membuat terlalu banyak animasi apabila boleh.
ii) Jika anda mahukan animasi, hadkan diri anda kepada sifat transformasi dan kelegapan semasa menganimasikan, kerana sifat ini hanya perlu melalui proses Karang, iaitu langkah terakhir Pipeline Piksel. Contohnya: Apabila menghidupkan butang dengan kelas pseudo tuding, lebih baik menggunakan kelegapan daripada menukar warna latar belakangnya.
iii) Jika kita ingin mengalihkan elemen sebagai sebahagian daripada animasi, lebih baik menggunakan sifat 'will-change' atau 'transform' dengan nilai terjemahannya.

Sumber saya berdasarkan siaran ini pada:
https://web.dev/articles/stick-to-compositor-only-properties-and-manage-layer-count?hl=es
https://web.dev/articles/rendering-performance

Kursus percuma tentang Pengoptimuman Rendering Penyemak Imbas yang diajar oleh Paul Lewis, seorang jurutera pakar dalam semua perkara yang berkaitan dengan prestasi dan pencipta Lighthouse (Google Lighthouse ialah alat automatik sumber terbuka untuk mengukur kualiti halaman web), alat dalam Chrome DevTools:
https://www.udacity.com/course/browser-rendering-optimization--ud860

Atas ialah kandungan terperinci Menguasai Prestasi Web: Memahami Pipeline Pixel. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!