Optimumkan teknik aliran semula dan lukisan semula semasa penghuraian CSS

Analisis aliran semula dan lukis semula CSS dan kemahiran pengoptimuman

Dalam beberapa tahun kebelakangan ini, pengoptimuman prestasi halaman web telah menjadi bahagian penting dalam pembangunan bahagian hadapan, termasuk analisis dan pengoptimuman aliran semula dan lukis semula CSS. Dalam proses mengoptimumkan CSS, kita perlu memahami definisi aliran semula dan lukis semula, dan mempelajari beberapa teknik pengoptimuman khusus.

1. Apakah aliran semula dan cat semula?

Alir semula dan mengecat semula ialah proses yang mana penyemak imbas memaparkan reka letak enjin dan melukis halaman web.

Reflow merujuk kepada proses pemaparan semula halaman apabila struktur DOM berubah. Sebagai contoh, apabila saiz, kedudukan, fon teks, dsb. sesuatu elemen berubah, penyemak imbas akan mengira semula sifat geometri elemen tersebut, dan kemudian susun atur dan melukis halaman.

Melukis semula bermaksud apabila gaya elemen berubah tetapi tidak menjejaskan reka letak, penyemak imbas hanya perlu melukis semula bahagian yang terjejas tanpa mengira semula reka letak.

Reflow dan redraw adalah mahal, jadi kita perlu mengelakkan reflow dan redraw yang tidak perlu sebanyak mungkin untuk meningkatkan prestasi halaman dan kelajuan pemuatan.

2. Bagaimana untuk mengelakkan aliran semula dan lukis semula yang tidak perlu?

2.1 Gunakan transformasi dan bukannya atribut atas, kiri dan lain-lain

Apabila kita perlu menukar kedudukan elemen, kita boleh mempertimbangkan untuk menggunakan atribut transformasi CSS. Menggunakan transformasi tidak akan mencetuskan aliran semula dan lukis semula kerana ia hanya mengubah elemen secara visual tanpa mengubah sifat dan reka letak geometri elemen. Contohnya:

    .box {
        transform: translate(100px, 100px);
    }

2.2 Gunakan atribut kedudukan untuk mengawal perhubungan hierarki

Apabila anda perlu menukar hubungan hierarki elemen, anda boleh menggunakan atribut kedudukan CSS untuk mengawal susunan susunan elemen dan bukannya menggunakan indeks-z atribut. Menukar indeks-z akan mencetuskan lukisan semula, tetapi menggunakan atribut kedudukan tidak akan.

    .box {
        position: relative;
    }

2.3 Gabungkan pengubahsuaian gaya

Apabila anda perlu mengubah suai gaya berbilang elemen, anda boleh menggabungkan pengubahsuaian ini bersama-sama untuk mengelakkan berbilang lukisan semula. Contohnya:

    .box1, .box2, .box3 {
        width: 100px;
        height: 100px;
    }

2.4 Gunakan operasi DOM luar talian

Jika anda perlu mengubah suai DOM beberapa kali berturut-turut, anda boleh mempertimbangkan untuk menggunakan operasi DOM luar talian. Iaitu, elemen DOM dialih keluar daripada dokumen dahulu, dan kemudian dimasukkan semula ke dalam dokumen selepas pengubahsuaian selesai. Ini boleh mengurangkan bilangan aliran semula.

3. Contoh Kod

Secara praktikal, kita boleh menggunakan alatan pembangunan penyemak imbas untuk memerhati aliran semula dan lukisan semula halaman untuk mengoptimumkan kod.

Berikut ialah contoh kod yang menunjukkan cara untuk mengelakkan aliran semula dan lukisan semula yang tidak perlu dengan mengoptimumkan CSS:

    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: red;
            position: relative;
            top: 0;
            left: 0;
        }
    </style>

    <div class="box"></div>

    <script>
        let box = document.querySelector('.box');
        box.style.transform = 'translate(100px, 100px)';
    </script>

Dalam contoh ini, aliran semula dan lukis semula dielakkan dengan menggunakan atribut transformasi dan bukannya atribut atas dan kiri. Dengan cara ini, penyemak imbas hanya perlu mengubah elemen secara visual dan tidak perlu mengira semula reka letak, dengan itu meningkatkan prestasi.

Ringkasan

Dengan memahami konsep aliran semula dan lukis semula, dan menggunakan teknik pengoptimuman, kami boleh meminimumkan aliran semula dan lukis semula yang tidak perlu, dengan itu meningkatkan prestasi halaman dan pengalaman pengguna. Semasa proses pembangunan, kita harus memberi perhatian kepada cara kod ditulis, dan menggunakan alat pembangunan penyemak imbas untuk memerhati prestasi pemaparan halaman dan membuat pelarasan pengoptimuman tepat pada masanya.

Atas ialah kandungan terperinci Optimumkan teknik aliran semula dan lukisan semula semasa penghuraian CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!