Penyelesaian kepada Isu Aliran Semula Biasa dan Lukis Semula

Masalah dan penyelesaian aliran semula dan lukis semula biasa, contoh kod khusus diperlukan

Dalam pembangunan web, pengoptimuman prestasi ialah topik penting. Aliran semula dan lukis semula ialah masalah prestasi biasa yang dihadapi semasa pemaparan halaman web. Ia boleh menyebabkan halaman terhenti dan pembaziran sumber. Artikel ini akan memperkenalkan masalah aliran semula dan lukis semula biasa serta menyediakan beberapa penyelesaian untuk membantu pembangun mengoptimumkan prestasi halaman.

1. Konsep Reflow dan Repaint

1. Reflow bermaksud pelayar mengira dan menentukan kedudukan dan saiz setiap elemen pada halaman berdasarkan elemen dalam pepohon DOM. Proses pengaliran semula halaman memakan masa, jadi kita perlu meminimumkan bilangan pengaliran semula.
2. Cat semula merujuk kepada elemen lukisan penyemak imbas pada halaman berdasarkan maklumat gaya yang disediakan oleh elemen dalam pepohon DOM. Melukis semula adalah lebih murah daripada mengalir semula.

2 lukis semula elemen. Contohnya, kerap mengubah suai gaya elemen melalui JavaScript akan menyebabkan pengaliran semula dan lukisan semula berterusan, menyebabkan halaman menjadi beku.

Penyelesaian: Minimumkan operasi DOM. Anda boleh menyatukan berbilang pengubahsuaian menjadi satu, atau menggunakan animasi CSS dan bukannya animasi JavaScript untuk mengurangkan bilangan lukisan semula.
1. Contoh kod:

// 不推荐的方式
element.style.width = '100px';
element.style.height = '100px';
element.style.marginLeft = '10px';
element.style.marginTop = '10px';

// 推荐的方式
element.style.cssText = 'width: 100px; height: 100px; margin-left: 10px; margin-top: 10px;';

Susun atur segerak paksa akan kerap menyebabkan pengaliran semula

Dalam JavaScript, mendapatkan sifat elemen tertentu (seperti offsetTop, offsetLeft, scrollTop, dll.) boleh menyebabkan pengaliran semula secara paksa.

Penyelesaian: Cuba elakkan kerap mendapatkan semula sifat ini Anda boleh mengurangkan bilangan aliran semula dengan menyimpan cache atau mendapatkan semula kelompok.
2. Contoh kod:

// 不推荐的方式
for (let i = 0; i < elements.length; i++) {
  const element = elements[i];
  const top = element.offsetTop;
  // 其它处理
}

// 推荐的方式
let tops = [];
for (let i = 0; i < elements.length; i++) {
  tops.push(elements[i].offsetTop);
}

Kerap menukar saiz tetingkap akan menyebabkan reflow dan redraw

Apabila saiz tetingkap berubah, penyemak imbas akan mengira semula susun atur halaman, menyebabkan reflow dan redraw.

Penyelesaian: Untuk mengelakkan menukar saiz tetingkap dengan kerap, anda boleh menggunakan fungsi pendikit untuk mengawal kekerapan pelaksanaan fungsi panggil balik untuk perubahan saiz tetingkap.
3. Kod contoh:

// 不推荐的方式
window.addEventListener('resize', handleResize);

// 推荐的方式
function throttle(fn, delay) {
  let timer = null;
  return function () {
    if (!timer) {
      timer = setTimeout(() => {
        fn.apply(this, arguments);
        timer = null;
      }, delay);
    }
  };
}

window.addEventListener('resize', throttle(handleResize, 200));

3. Kesimpulan

Isu pengaliran semula dan lukisan semula adalah masalah pengoptimuman prestasi yang biasa dan penting dalam pembangunan web. Dengan mengurangkan operasi DOM, mengelakkan penyegerakan paksa reka letak, dan perubahan saiz tetingkap yang kerap, aliran semula dan lukisan semula boleh dikurangkan dengan berkesan dan prestasi halaman serta pengalaman pengguna dipertingkatkan. Kami berharap penyelesaian dan kod sampel yang disediakan dalam artikel ini dapat membantu pembangun mengoptimumkan prestasi halaman dengan lebih baik.

Atas ialah kandungan terperinci Penyelesaian kepada Isu Aliran Semula Biasa dan Lukis Semula. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!