Dua Baris CSS yang Meningkat Prestasi (fps ke ps)-tutorial css-php.cn

Dua Baris CSS yang Meningkat Prestasi (fps ke ps)

WBOY

Lepaskan： 2024-09-03 11:09:21

asal

942 orang telah melayarinya

Baru-baru ini saya mengeluarkan Learn WCs dan Jika anda pernah melihatnya, anda mungkin perasan animasi di latar belakang, di mana bulatan berwarna bergerak menyerong merentasi skrin. Ia kelihatan seperti ini:

Ia berfungsi dengan baik pada Chrome dan Safari, tetapi saya mendapati penurunan teruk dalam prestasi pada Firefox.

Prestasinya sangat teruk, sehingga saya terus melumpuhkan animasi ini dalam Firefox.

Bagaimanakah animasi berfungsi?

Animasi dibina menggunakan dua div bersarang. Div luar ialah anak pertama tag badan tapak.

<body>
    <div class="background-mask">
        <div class="background-gradient"></div>
    </div>

    <!-- Rest of content -->
</body>

Salin selepas log masuk

Elemen .background-gradient bertanggungjawab untuk mencipta kecerunan yang merentangi keseluruhan lebar dan ketinggian bekas induknya. Macam ni:

The Two Lines of CSS That Tanked Performance (fps to ps)

Topeng latar belakang luar bertanggungjawab untuk dua perkara:

Ia menetapkan kedudukan kepada tetap dan menjadikan bekas memenuhi keseluruhan dimensi port pandangan.
Mencipta topeng bertitik di atas kecerunan

Ini memastikan bahawa warna titik adalah warna kecerunan tepat di bawahnya:

The Two Lines of CSS That Tanked Performance (fps to ps)

Berikut ialah CSS untuk semua yang saya terangkan di atas:

.background-mask {
    --mask-size: 24px;

    /* Position Styles */
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: -1;

    /* Mask Styles */
    mask-image: radial-gradient(black 2px, transparent 2px);
    mask-size: var(--mask-size) var(--mask-size);
    mask-position: 0px 0px;
    animation: mask-move 3s infinite linear;
}

.background-gradient {
    background: var(--red);
    background-image: var(--gradient);
    width: 100%;
    height: 100%;
}

@keyframes mask-move {
    0% {
        mask-position: 0px 0px;
    }

    100% {
        mask-position: var(--mask-size) var(--mask-size);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-background-mask {
        animation: none;
    }
}

Salin selepas log masuk

Jika anda berminat untuk mengetahui lebih lanjut tentang topeng dalam CSS, maka saya boleh mengesyorkan siaran komprehensif ini oleh Ahmad Shadeed

Apakah yang menyebabkan penurunan prestasi ini?

Bukan semua sifat CSS bernyawa secara sama rata. Tanpa terlalu memikirkan cara penyemak imbas memaparkan HTML ke halaman (walaupun saya telah menggariskannya di sini), terdapat beberapa peringkat yang dilaluinya. Tiga peringkat yang kami minati ialah:

Reka letak - Apabila penyemak imbas mengira saiz dan kedudukan elemen pada halaman
Cat - Melukis semua aspek visual halaman, seperti imej, warna, bayang-bayang, dll
Komposit - Melapis elemen di atas satu sama lain dalam susunan yang betul

Susunan saluran paip kelihatan seperti ini:

Reka Letak → Cat → Komposit

Proses reka letak dan cat boleh menjadi intensif CPU, jadi adalah penting untuk mencuba dan mengurangkan jumlah kali CSS anda mencetuskan peringkat dalam saluran paip*.* Penyemak imbas membantu dalam beberapa bahagian dengan mengoptimumkan prestasi untuk sifat tertentu, sesetengahnya langkau seluruh peringkat saluran paip pemaparan dan yang lain boleh memanfaatkan pecutan perkakasan untuk mengalihkan pengiraan daripada CPU ke GPU.

Menghidupkan sifat tertentu, seperti terjemah dan kelegapan , kedua-duanya mengelak daripada mencetuskan reka letak dan menggunakan pecutan perkakasan.

Malangnya, ini tidak berlaku apabila menganimasikan kedudukan topeng. Saya melihat Chrome dan melihat bahawa kiraan cat untuk div latar belakang semakin meningkat pada setiap bingkai. Selepas beberapa saat ia telah pun mencetuskan cat lebih 1,000 kali.

The Two Lines of CSS That Tanked Performance (fps to ps)

Walaupun dengan kiraan cat yang tinggi ini, animasi pada Chrome terasa lancar. Walau bagaimanapun, ia berasa sangat janky pada Firefox. Yang menjengkelkan, saya tidak dapat mencari cara untuk mengukur kiraan cat pada Firefox, jadi sebarang andaian yang saya buat tentang prestasi buruk Firefox hanyalah sangkaan semata-mata.

Apa yang saya perhatikan ialah animasi itu baik untuk peranti kecil, tetapi menjadi lebih teruk apabila saiz skrin meningkat. Teori kerja saya ialah Firefox tidak menyusun pencetus reka letak untuk setiap topeng 24x24, yang menyebabkan FPS menjadi tangki apabila lebih banyak topeng 24x24 hadir. Sekali lagi, saya mungkin tersilap sepenuhnya di sini.

Bagaimanakah saya membetulkannya?

Daripada menganimasikan sifat CSS yang dioptimumkan dengan teruk seperti mask-position , saya perlu bersandar pada sifat yang lebih berprestasi, seperti terjemah.

Penyelesaiannya bukan untuk mengalihkan topeng sebanyak 24px, sebaliknya mengalihkan keseluruhan elemen latar belakang menggunakan sifat terjemah.

From an abstract standpoint, this is how the animation looks:

Here’s the two line change in the CSS:

/* --mask-size = 24px */

@keyframes mask-move {
    0% {
        transform: translate(calc(var(--mask-size) * -1), calc(var(--mask-size) * -1));
    }

    100% {
        transform: translate(0px, 0px);
    }
}

Salin selepas log masuk

The browser no longer animates the mask-position, which triggered a layout on each frame. Even though the background moves on each frame, through translate it doesn’t trigger a layout or a paint. You can see that the only paints twice, down from 1,000+ every minute.

The Two Lines of CSS That Tanked Performance (fps to ps)

Eagle-eyed viewers will have spotted a problem. If you remember, the height and width of the background fills the viewport. Shifting the background left and up by 24px leaves us with this empty space in the viewport.

The Two Lines of CSS That Tanked Performance (fps to ps)

Solving it is as simple as adding the mask size to the width and height of the container:

.background-mask {
    --mask-size: 24px;

    width: calc(100% + var(--mask-size));
    height: calc(100% + var(--mask-size));
}

Salin selepas log masuk

Let’s take a look again in Firefox:

It may not be a perfect solution, but it’s always a little satisfying pulling off a fun smoke and mirrors CSS trick.

Atas ialah kandungan terperinci Dua Baris CSS yang Meningkat Prestasi (fps ke ps). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!