Petua untuk mengoptimumkan CSS untuk mengurangkan aliran semula halaman dan mengecat semula

Bagaimana untuk mengelakkan aliran semula dan lukis semula CSS yang tidak perlu

Dalam pembangunan bahagian hadapan, CSS merupakan bahagian yang amat diperlukan. Walau bagaimanapun, penggunaan CSS yang tidak betul boleh menyebabkan prestasi halaman berkurangan, dengan masalah yang paling biasa ialah aliran semula dan lukis semula CSS yang tidak perlu. Artikel ini akan memperkenalkan beberapa petua dan contoh kod khusus untuk membantu anda mengelakkan masalah ini dan meningkatkan prestasi halaman anda.

1. Elakkan kemas kini gaya yang kerap

Alir semula dan lukis semula dicetuskan berdasarkan perubahan dalam atribut gaya elemen DOM, jadi kemas kini gaya yang kerap akan meningkatkan bilangan aliran semula dan lukisan semula. Untuk mengelakkan masalah ini, anda boleh mengurangkan bilangan aliran semula dan lukisan semula dengan menumpukan kemas kini gaya ke dalam satu operasi. Contohnya, jika anda perlu mengubah suai berbilang atribut gaya sesuatu elemen, anda boleh menambah kelas dan bukannya mengubah suai atribut satu demi satu. Kod sampel adalah seperti berikut:

// 不推荐的写法
element.style.width = '100px';
element.style.height = '200px';
element.style.background = 'red';

// 推荐的写法
element.classList.add('my-class');

2. Elakkan mengubah suai gaya dalam gelung

Mengubah suai sifat gaya dalam gelung adalah masalah biasa kerana setiap pengubahsuaian akan menyebabkan aliran semula dan lukis semula. Untuk mengelakkan masalah ini, anda boleh mengalihkan pengiraan dan pengubahsuaian sifat gaya di luar gelung. Kod sampel adalah seperti berikut:

// 不推荐的写法
for (let i = 0; i < elements.length; i++) {
  elements[i].style.width = i * 10 + 'px';
}

// 推荐的写法
let styles = '';
for (let i = 0; i < elements.length; i++) {
  styles += `#${elements[i].id} { width: ${i * 10}px; }`;
}
element.styleSheet
  ? element.styleSheet.cssText = styles // IE
  : element.innerHTML = styles; // Others

3. Gunakan animasi CSS dan bukannya animasi JavaScript

Menggunakan JavaScript untuk melaksanakan animasi boleh mengakibatkan aliran semula dan lukisan semula yang kerap. Sebaliknya, menggunakan animasi CSS adalah lebih cekap kerana ia mengambil kesempatan daripada pecutan perkakasan. Kod sampel adalah seperti berikut:

/* CSS */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* JavaScript */
element.classList.add('spin');

4. Gunakan sifat CSS3 untuk mengoptimumkan prestasi

CSS3 memperkenalkan beberapa sifat yang boleh mengoptimumkan prestasi aliran semula dan lukis semula. Contohnya, gunakan transform dan bukannya kiri dan atas untuk menukar kedudukan elemen atau gunakan translate3d untuk dayakan pecutan perkakasan. Kod sampel adalah seperti berikut: transform代替left和top来改变元素的位置，或者使用translate3d开启硬件加速。示例代码如下：

/* 不推荐的写法 */
element.style.left = '100px';
element.style.top = '200px';

/* 推荐的写法 */
element.style.transform = 'translate(100px, 200px)';

5. 使用will-change属性

will-change属性可以告诉浏览器元素将要发生的变化，从而提前进行优化。使用will-change属性可以让浏览器知道哪些属性可能会触发回流或重绘，从而提前进行优化。示例代码如下：

.element {
  will-change: transform;
}

总结

通过避免频繁更新样式、在循环中修改样式、使用CSS动画代替JavaScript动画、使用CSS3属性优化性能和使用will-changerrreee

Gunakan atribut will-change 🎜🎜🎜Atribut will-change boleh memberitahu penyemak imbas perubahan yang akan berlaku pada elemen , dengan itu mengoptimumkan terlebih dahulu. Menggunakan atribut will-change boleh memberitahu penyemak imbas sifat yang boleh mencetuskan aliran semula atau lukis semula, supaya pengoptimuman boleh dilakukan terlebih dahulu. Kod sampel adalah seperti berikut: 🎜rrreee🎜Ringkasan🎜🎜Dengan mengelakkan kemas kini gaya yang kerap, mengubah suai gaya dalam gelung, menggunakan animasi CSS dan bukannya animasi JavaScript, menggunakan sifat CSS3 untuk mengoptimumkan prestasi dan menggunakan akan berubah code> atribut, kita boleh Mengelakkan aliran semula CSS yang tidak perlu dan melukis semula secara berkesan serta meningkatkan prestasi halaman. Sudah tentu, kaedah pengoptimuman khusus juga harus diselaraskan dan dioptimumkan mengikut keperluan dan keadaan khusus projek. 🎜

Atas ialah kandungan terperinci Petua untuk mengoptimumkan CSS untuk mengurangkan aliran semula halaman dan mengecat semula. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!