Pembendungan CSS meningkatkan prestasi dengan mengasingkan unsur -unsur untuk mengehadkan penghitungan semula pelayar. 1. Harta yang mengandungi membolehkan pemaju untuk menentukan bagaimana elemen terpencil dari seluruh halaman. 2. Nilai seperti saiz, susun atur, cat, dan gaya menawarkan tahap pembendungan yang berbeza. 3. Strict menggunakan semua jenis pembendungan, manakala kandungan tidak termasuk saiz. 4. Ia lebih baik digunakan pada komponen serba lengkap seperti widget atau kad. 5. Penambahbaikan prestasi datang daripada mengehadkan susun atur, lukisan, dan pemeriksaan untuk hanya elemen yang terkandung. 6. Elakkan terlalu banyak kerana ia boleh menyebabkan overhead ingatan. 7. Sokongan penyemak imbas berbeza -beza mengikut jenis pembendungan, dengan susun atur dan cat lebih banyak disokong.

Penahanan CSS adalah ciri yang membantu meningkatkan prestasi dengan mengehadkan berapa banyak halaman pelayar yang perlu dikira semula apabila sesuatu berubah. Ia amat berguna pada laman web kompleks atau besar di mana kemas kini kecil tidak memerlukan keseluruhan halaman untuk diberikan semula.

Idea utama di sebalik pembendungan adalah: Beritahu penyemak imbas apa bahagian halaman boleh dianggap sebagai bebas , jadi ia tidak membuang masa memeriksa kawasan yang tidak berkaitan apabila membuat susun atur, gaya, cat, atau pengiraan saiz.

Ini dilakukan menggunakan harta contain dalam CSS.

Apa yang contain harta itu?

Harta contain memberitahu penyemak imbas berapa banyak elemen tertentu yang harus diasingkan dari seluruh halaman. Dengan melakukan ini, ia memberikan petunjuk penyemak imbas mengenai bahagian halaman mana yang tidak perlu terjejas apabila sesuatu di dalam perubahan elemen yang terkandung.

Anda mungkin menggunakannya seperti ini:

 .widget {
  mengandungi: ketat;
}

Atau lebih khusus:

 .widget {
  Mengandungi: saiz cat susun atur;
}

Setiap nilai mengawal jenis pengasingan yang berbeza:

• Saiz - dimensi elemen adalah bebas daripada anak -anaknya.
• Susun atur - susun atur di dalam elemen tidak akan menjejaskan apa -apa di luarnya.
• Cat - Tidak ada yang dicat di dalam elemen akan muncul di luarnya.
• Gaya - Gaya Scoped - Perubahan di dalamnya tidak akan menjejaskan unsur -unsur di luar (masih eksperimen).
• ketat - semua di atas (saiz, susun atur, cat, dan penahanan gaya).
• Kandungan - Sama seperti susun atur, cat, dan gaya tetapi tanpa pembendungan saiz.

Bilakah anda harus menggunakan pembendungan?

Pembendungan berfungsi dengan baik apabila digunakan untuk komponen serba lengkap-perkara seperti widget, kad, atau sidebars yang tidak secara visual atau susun atur bergantung pada bahagian lain halaman.

Contohnya:

• Widget dinamik di bar sisi
• Komponen kad dalam susun atur grid
• Bahagian komen yang dimuat secara bebas

Dalam kes ini, membungkusnya dengan contain: content atau contain: layout paint boleh membantu pelayar melangkau kerja yang tidak perlu semasa rendering.

Perlu diingat:

• Pembendungan hanya membantu jika penyemak imbas sebenarnya menggunakan petunjuk - tidak semua pelayar menyokong sepenuhnya setiap pilihan.
• Jangan terlalu banyak. Memohon contain segala -galanya boleh menjadi bumerang kerana ia menghasilkan lapisan tambahan dan overhead memori.

Bagaimanakah penahanan meningkatkan prestasi?

Apabila anda mengemas kini sebahagian daripada laman web - katakan, menukar beberapa teks atau menukarkan kelas - penyemak imbas biasanya perlu menyemak:

• Bagaimana perubahan itu mempengaruhi susun atur (reflow)
• Bahagian mana yang perlu dicat semula
• Sama ada perubahan itu mempengaruhi elemen lain

Dengan pembendungan, penyemak imbas tahu:

• Ia tidak perlu melihat di luar kotak yang terkandung untuk susun atur atau lukisan
• Ia dapat mengasingkan proses rendering hanya ke elemen itu

Oleh itu, bukannya mengimbas keseluruhan halaman selepas perubahan kecil, ia hanya perlu menyemak semula satu blok yang terkandung.

Fikirkan ia seperti menyegel dari bilik sebelum melakukan pembinaan yang tidak kemas - tiada apa -apa tumpahan, dan pembersihan lebih mudah.

Beberapa petua praktikal untuk menggunakan contain

Berikut adalah beberapa cara untuk memulakan dengan pembendungan:

• Gunakan contain: content pada kad atau item senarai yang dimuat secara bebas.
• Sapukan contain: layout paint ke modul yang mengemas kini secara dinamik (seperti suapan hidup atau kaunter).
• Elakkan memohon kepada unsur -unsur yang sangat bergantung pada konteks susun atur luaran, seperti kanak -kanak flex/grid.

Perlu diingat:

• contain: strict adalah kuat tetapi agresif - menguji dengan teliti.
• Sokongan penyemak imbas adalah baik untuk susun atur dan pembendungan cat, tetapi saiz dan gaya kurang disokong secara meluas.
• Keuntungan prestasi lebih ketara pada halaman besar dan kompleks.

Pada asasnya, CSS Containment memberikan pemaju alat untuk membantu pelayar mengoptimumkan rendering. Ia tidak selalu diperlukan, tetapi apabila digunakan dengan betul, ia boleh membuat laman web anda berasa lebih cepat dan licin.

Atas ialah kandungan terperinci Apakah penahanan CSS (mengandungi harta)?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!