Mendedahkan prinsip aliran semula dan lukisan semula CSS-tutorial css-php.cn

Mendedahkan prinsip aliran semula dan lukisan semula CSS

WBOY

Lepaskan： 2024-01-26 09:59:06

asal

1175 orang telah melayarinya

Mendedahkan prinsip aliran semula dan lukisan semula CSS

Nyahsulit prinsip kerja pengaliran semula dan pengecatan semula CSS

Pengenalan:
Dalam proses pembangunan web, kita sering mendengar dua konsep pengaliran semula CSS (reflow) dan mengecat semula (repaint). Memahami cara ia berfungsi adalah penting untuk mengoptimumkan prestasi halaman web dan meningkatkan pengalaman pengguna. Artikel ini akan menyelidiki cara pengaliran semula dan pengecatan CSS berfungsi serta memberikan contoh kod khusus untuk membantu pembaca memahami dengan lebih baik kedua-dua konsep ini.

1. Cara aliran semula CSS berfungsi
1.1 Apakah aliran semula CSS
Aliran semula CSS merujuk kepada proses di mana penyemak imbas mengira semula kedudukan dan saiz elemen dan mengemas kini reka letak halaman. Apabila sifat reka letak elemen pada halaman berubah, aliran semula CSS dicetuskan.

1.2 Keadaan pencetus untuk aliran semula CSS
Situasi berikut akan mencetuskan aliran semula CSS:

Apabila nod DOM ditambah, dipadamkan atau diubah suai
Apabila kedudukan, saiz atau gaya elemen halaman diubah
saiz tetingkap ditukar ;
Apabila pengguna menatal halaman;
Apabila tetingkap penyemak imbas berubah.

1.3 Proses pengaliran semula CSS
Proses pengaliran semula CSS adalah seperti berikut:

Apabila pengaliran semula CSS dicetuskan, pelayar akan melintasi pokok DOM bermula dari nod akar di bahagian atas dan mengira kedudukan dan saiz setiap nod;
Jika tertentu Jika kedudukan atau saiz nod bergantung pada atribut nod induk atau nod saudaranya, kedudukan dan saiz nod ini perlu dikira semula
Apabila kedudukan dan saiz semua nod dikira, penyemak imbas akan mengemas kini susun atur halaman.

1.4 Bagaimana untuk mengelakkan aliran semula CSS yang tidak perlu
Untuk meningkatkan prestasi halaman web, kami boleh mengelakkan beberapa aliran semula CSS yang tidak perlu. Berikut ialah beberapa kaedah pengoptimuman biasa:

Elakkan menggunakan reka letak jadual dan cuba gunakan model reka letak CSS
Elakkan operasi DOM yang kerap dan cuba ubah suai berbilang elemen sekaligus
Gunakan pengubahsuaian gaya kelompok untuk menukar gaya sekali gus Digunakan pada berbilang elemen;
Kurangkan operasi untuk mendapatkan maklumat reka letak semasa aliran semula, seperti offsetLeft, offsetTop, dsb.

2. Cara lukisan semula CSS berfungsi
2.1 Apakah lukisan semula CSS
Lukisan semula CSS merujuk kepada proses di mana penyemak imbas melukis semula halaman mengikut perubahan gaya. Apabila atribut gaya elemen pada halaman berubah, lukisan semula CSS dicetuskan.

2.2 Keadaan mencetuskan untuk meredakan CSS situasi berikut akan mencetuskan CSS REDRAW:

Apabila menukar keterlihatan unsur.
2.3 Proses melukis semula CSS

Apabila lukisan semula CSS dicetuskan, pelayar akan melukis semula elemen mengikut gaya baharu elemen

2.4 Bagaimana untuk mengelakkan lukisan semula CSS yang tidak perlu

Gunakan pemilih kelas dan bukannya mengubah suai gaya elemen secara individu

Gunakan animasi CSS dan bukannya animasi JavaScript (Animasi JavaScript akan kerap; menukar atribut gaya elemen, mengakibatkan lukisan semula);
Elakkan menggunakan ungkapan CSS.
3. Contoh Kod

<!DOCTYPE html>
<html>
<head>
  <style>
  .box {
    width: 100px;
    height: 100px;
    background-color: red;
    transition: width 1s;
  }
  </style>
</head>
<body>
  <div class="box"></div>
  <button onclick="changeWidth()">改变宽度</button>
  <script>
    function changeWidth() {
      var box = document.querySelector('.box');
      // 触发一次CSS回流和重绘
      box.style.width = '200px';
    }
  </script>
</body>
</html>

Salin selepas log masuk

Dalam kod di atas, apabila butang diklik untuk menukar lebar kotak, disebabkan penggunaan atribut
, penyemak imbas akan menggunakan animasi CSS untuk mengalihkan perubahan lebar, dengan itu mencetuskan hanya satu aliran semula CSS dan lukis semula , meningkatkan prestasi.

Kesimpulan: transitionArtikel ini menyahsulit secara mendalam cara pengaliran semula dan pengecatan CSS berfungsi serta menyediakan contoh kod khusus. Dengan memahami cara kedua-dua konsep ini berfungsi, kami boleh mengoptimumkan prestasi halaman web dan meningkatkan pengalaman pengguna. Saya harap pembaca boleh menggunakan pengetahuan ini untuk membangunkan halaman web berprestasi tinggi dengan lebih baik.

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