Mengoptimumkan prestasi halaman web: Kesan aliran semula dan lukis semula dan cara menanganinya

Impak aliran semula dan lukisan semula pada prestasi halaman web dan kaedah pengoptimuman

Apabila kami membuka halaman web dalam penyemak imbas, proses pemaparan halaman web boleh dibahagikan kepada empat peringkat: menghurai HTML, membina pokok DOM, membina pokok CSSOM , menggabungkan pepohon DOM dan CSSOM dan menjana pepohon rendering, dan akhirnya susun atur dan lukis halaman berdasarkan pepohon rendering. Dalam proses pemaparan ini, aliran semula dan mengecat semula ialah dua konsep yang sangat penting.

Reflow merujuk kepada proses di mana penyemak imbas mengira semula sifat geometri unsur dalam halaman dan menyusun semula halaman apabila saiz, kedudukan atau kandungan elemen DOM berubah. Melukis semula bermakna apabila gaya elemen berubah, tetapi tidak menjejaskan sifat geometrinya pada halaman, penyemak imbas hanya perlu melukis semula elemen tanpa susun atur.

Kerap berlakunya aliran semula dan lukisan semula akan memberi impak yang besar pada prestasi halaman, kerana penyemak imbas perlu mengira semula sifat geometri elemen dan susun atur semula halaman semasa proses aliran semula Proses ini sangat memakan prestasi. Begitu juga, lukisan semula juga akan menjejaskan prestasi halaman Walaupun ia lebih murah daripada aliran semula, ia masih akan menggunakan sumber tertentu.

Untuk mengoptimumkan prestasi halaman web, kami perlu mengurangkan bilangan aliran semula dan lukis semula sebanyak mungkin. Berikut ialah beberapa kaedah pengoptimuman:

1. Gunakan pemusatan gaya: Pusatkan semua operasi yang mengubah suai gaya elemen DOM tertentu dan laksanakannya bersama-sama untuk mengelakkan berbilang aliran semula dan lukisan semula yang disebabkan oleh pelbagai pengubahsuaian gaya. Sebagai contoh, anda boleh menggunakan kelas CSS untuk mengubah suai gaya berbilang elemen sekaligus dan bukannya mengubah suainya satu demi satu.
2. Gunakan serpihan dokumen: Apabila anda perlu memasukkan sejumlah besar nod ke dalam DOM, anda boleh menggunakan serpihan dokumen untuk mula-mula memasukkan nod ini ke dalam serpihan dokumen, dan kemudian masukkan serpihan dokumen ke dalam DOM sekaligus, yang boleh mengurangkan Bilangan aliran semula dan lukis semula.
3. Tetapkan gaya kepada operasi kelompok: Mengubah suai gaya dengan mengubah suai atribut gaya elemen akan menyebabkan pengaliran semula dan lukisan semula, jadi yang terbaik adalah menumpukan operasi mengubah suai gaya bersama-sama dan mengubah suai classList, className atau atribut gaya bagi elemen pada satu masa untuk mengendalikan gaya dalam kelompok dan bukannya mengubah suainya satu demi satu.
4. Elakkan menggunakan atribut reka letak penyegerakan paksa: Pembacaan atribut tertentu akan memaksa penyemak imbas melakukan reka letak segerak dan menyebabkan pengaliran semula, seperti offsetLeft, offsetTop, offsetWidth, offsetHeight, clientWidth, clientHeight, scrollTop, scrollLeft dan atribut lain Elakkan daripada menggunakannya sebanyak mungkin Baca sifat ini berulang kali apabila menukar gaya elemen dengan kerap.
5. Gunakan sifat transformasi dan kelegapan: sifat transformasi dan kelegapan tidak akan menyebabkan pengaliran semula, hanya lukis semula. Oleh itu, apabila menukar kedudukan, saiz dan atribut elemen lain, cuba gunakan kedua-dua atribut ini.
6. Gunakan fungsi pendikit dan anti goncang: Apabila memantau perubahan saiz tetingkap penyemak imbas, menatal dan acara lain, gunakan fungsi pendikit dan anti goncang untuk mengehadkan bilangan aliran semula dan lukis semula serta mengelakkan pencetus yang kerap.

Berikut ialah beberapa contoh kod khusus:

// 使用样式集中化
document.getElementById('elementId').classList.add('new-class');

// 使用文档片段
var fragment = document.createDocumentFragment();
for (var i = 0; i < 1000; i++) {
  var div = document.createElement('div');
  div.textContent = 'This is a div';
  fragment.appendChild(div);
}
document.getElementById('container').appendChild(fragment);

// 批量操作样式
var elements = document.getElementsByClassName('elements');
for (var i = 0; i < elements.length; i++) {
  elements[i].classList.add('new-class');
}

// 避免强制同步布局属性
var width = element.offsetWidth; // 读取元素的宽度

// 使用transform和opacity属性
element.style.transform = 'translateX(100px)';
element.style.opacity = 0.5;

// 使用节流函数
function throttle(fn, delay) {
  let timer = null;
  return function() {
    if (!timer) {
      timer = setTimeout(function() {
        fn.apply(this, arguments);
        timer = null;
      }, delay);
    }
  };
}

window.addEventListener('resize', throttle(function() {
  // 窗口大小变化时的处理逻辑
}, 200));

Dengan menggunakan kaedah pengoptimuman di atas, kami boleh mengurangkan bilangan aliran semula dan lukisan semula, seterusnya meningkatkan prestasi dan pengalaman pengguna halaman web. Pada masa yang sama, semasa proses pembangunan, kita juga perlu memberi perhatian untuk mengelakkan kerap mengubah suai gaya dan susun atur elemen, dan meminimumkan pencetus aliran semula dan lukis semula yang tidak perlu.

Atas ialah kandungan terperinci Mengoptimumkan prestasi halaman web: Kesan aliran semula dan lukis semula dan cara menanganinya. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!