1. Hindari operasi DOM yang sering langsung pada dokumen . Jika Anda benar-benar membutuhkannya, Anda dapat menggunakan metode off-dokumen. Metode spesifik termasuk tetapi tidak sepenuhnya termasuk yang berikut:
(1). Pertama -tama hapus elemen dari dokumen, dan setelah menyelesaikan modifikasi, kembalikan elemen ke posisi semula
(2). Atur tampilan elemen ke "tidak ada", dan setelah menyelesaikan modifikasi, memodifikasi tampilan ke nilai asli
(3). Jika Anda perlu membuat beberapa node DOM, Anda dapat menggunakan DocumentFragment untuk menambahkan dokumen sekaligus setelah membuatnya menggunakan DocumentFragment
2. Secara terpusat memodifikasi gaya
(1). Ubah atribut pada gaya elemen sesedikit mungkin
(2). Cobalah untuk memodifikasi gaya dengan memodifikasi classname
(3). Tetapkan nilai gaya melalui properti csstext
3. Nilai atribut tata letak cache
Untuk nilai-nilai tipe yang tidak direferensikan dalam atribut tata letak (tipe numerik), jika diperlukan beberapa akses, mereka dapat disimpan dalam variabel lokal terlebih dahulu dalam satu akses, dan kemudian menggunakan variabel lokal, yang dapat menghindari rendering oleh browser setiap kali atribut dibaca.
var width = el.offsetWidth; var scrollleft = el.scrollleft;
4. Atur posisi elemen ke absolut atau tetap
Ketika posisi elemen statis dan relatif, elemen berada dalam struktur pohon DOM. Ketika operasi pada elemen perlu dirender ulang, browser akan membuat seluruh halaman. Menetapkan posisi elemen ke absolut dan tetap dapat membuat elemen terpisah dari struktur pohon DOM, dan ketika browser perlu diterjemahkan, ia hanya perlu membuat elemen dan elemen di bawah elemen, dengan demikian mengurangi waktu rendering browser sampai batas tertentu, yang terutama layak dipertimbangkan dalam peningkatan jumlah animasi javascript saat ini.
Di atas adalah beberapa hal yang dirangkum oleh saya tentang mengurangi reflow dan mengecat ulang browser. Saya harap semua orang menyukainya.