Sebab -sebab utama untuk melambatkan operasi DOM adalah kos penyusunan semula dan kecekapan akses yang rendah. Kaedah pengoptimuman termasuk: 1. Mengurangkan bilangan akses dan nilai baca cache; 2. Batch membaca dan menulis operasi; 3. Menggabungkan pengubahsuaian, gunakan serpihan dokumen atau elemen tersembunyi; 4. Elakkan susun atur susun atur, dan mengendalikan membaca dan menulis; 5. Rangka Kerja Gunakan atau RequestAnimationFrame untuk mengemas kini secara tidak segerak.

Secara langsung mengendalikan DOM memang mudah untuk melambatkan, terutamanya apabila kemas kini yang kerap atau memproses sejumlah besar nod. Terdapat dua sebab utama: satu ialah DOM itu sendiri adalah struktur data bebas dan diuruskan secara berasingan dari enjin JavaScript; Yang lain adalah bahawa setiap pengubahsuaian boleh mencetuskan reflow pelayar (mengecat semula) dan mengecat semula (mengecat) dan operasi ini sangat mahal.

Untuk mengoptimumkan operasi DOM, kunci adalah untuk mengurangkan bilangan lawatan, menggabungkan tindakan pengubahsuaian, dan mengelakkan susun atur segerak paksa.

Kurangkan bilangan lawatan DOM

Operasi DOM jauh lebih perlahan daripada operasi pembolehubah JS biasa, terutamanya apabila membaca atribut seperti offsetWidth atau getBoundingClientRect() . Operasi "baca" jenis ini memaksa penyemak imbas untuk mengira gaya dengan serta -merta, menghasilkan susun atur segerak paksa.

Amalan yang dicadangkan:

• Cache nilai -nilai yang perlu dibaca beberapa kali dan hanya dibaca sekali.
• Cuba simpan keadaan dengan pembolehubah dalam JS, dan bukannya berulang kali mendapatkannya dari DOM.
• Bacaan dan Penulisan Batch: Mula -mula membaca semua data, kemudian lakukan pemprosesan logik, dan akhirnya tulis kepada DOM seragam.

Contohnya:

 elemen const = document.QuerySelectorAll ('. Item');
Biarkan Totalheight = 0;

elements.foreach (el => {
  totalHeight = el.OffSetheight; // baca hanya sekali});

Gabungkan pengubahsuaian dom untuk mengelakkan penyusunan semula yang kerap

Setiap kali DOM diubahsuai, penyusunan semula boleh dicetuskan. Jika ia diubahsuai lima kali berturut -turut, penyemak imbas boleh melakukan lima reorders. Tetapi pada hakikatnya, kita hanya memerlukan hasil terakhir.

Kaedah Pengoptimuman:

• Gunakan serpihan dokumen (DocumentFragment) ke nod memasukkan batch.
• Sembunyikan elemen dan kemudian mengendalikannya, dan paparkannya setelah selesai.
• Gunakan DOM atau rangka kerja maya (seperti React) untuk membuat kemas kini kebezaan secara automatik.

Contohnya:

 const fragment = document.CreatedOcumentFragment ();
untuk (biarkan i = 0; i <100; i) {
  const div = document.createElement (&#39;div&#39;);
  div.textContent = &#39;item&#39; i;
  fragment.appendchild (div);
}
document.body.appendchild (serpihan); // menyusun semula hanya dicetuskan sekali

Elakkan susun atur susun atur (susun atur susun atur)

Jitter susun atur yang dipanggil terus membaca dan menulis sifat DOM dalam gelung, menyebabkan penyemak imbas untuk mengatur semula berulang kali.

Kaedah penulisan kesilapan biasa:

 untuk (biarkan i = 0; i <items.length; i) {
  item [i] .style.width = container.offsetWidth &#39;px&#39;; // dipaksa menyusun semula setiap bacaan}

Kaedah Pengoptimuman:

• Baca OffsetWidth terlebih dahulu dan cache itu.
• Semua operasi menulis diproses di pusat.

Gunakan alat moden dan strategi kemas kini yang tidak segerak

Kebanyakan rangka kerja front-end kini mempunyai mekanisme pengoptimuman prestasi terbina dalam, seperti perdamaian React dan sistem responsif Vue, yang akan mengemas kini DOM pada masa yang tepat dan bukannya berkuatkuasa dengan segera.

Jika anda melaksanakan logik yang sama, anda boleh menggunakan requestAnimationFrame untuk mengawal irama kemas kini, atau menggunakan throttling anti-goncang untuk mengawal kekerapan operasi DOM dalam peristiwa frekuensi tinggi (seperti saiz semula, tatal).

Secara umum, operasi DOM yang perlahan adalah disebabkan oleh kos penyusunan semula dan penyusunan semula dan kecekapan akses yang rendah. Selagi anda mencapai "kurang membaca dan menulis, menggabungkan operasi, dan kelewatan kemas kini", anda dapat meningkatkan prestasi dengan berkesan. Teknik -teknik ini tidak semestinya rumit, tetapi mereka sangat praktikal.

Atas ialah kandungan terperinci Mengapa manipulasi Dom perlahan dan bagaimanakah ia dapat dioptimumkan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!