如何優(yōu)化前端性能（五）：減少重繪回流

1、避免使用層級(jí)較深的選擇器，或其他一些復(fù)雜的選擇器，以提高CSS渲染效率

2、避免使用CSS表達(dá)式，CSS表達(dá)式是動(dòng)態(tài)設(shè)置CSS屬性的強(qiáng)大但危險(xiǎn)方法，它的問題就在于計(jì)算頻率很快。不僅僅是在頁面顯示和縮放時(shí)，就是在頁面滾動(dòng)、乃至移動(dòng)鼠標(biāo)時(shí)都會(huì)要重新計(jì)算一次

3、元素適當(dāng)?shù)囟x高度或最小高度，否則元素的動(dòng)態(tài)內(nèi)容載入時(shí)，會(huì)出現(xiàn)頁面元素的晃動(dòng)或位置，造成回流

4、給圖片設(shè)置尺寸。如果圖片不設(shè)置尺寸，第1次載入時(shí)，占據(jù)空間會(huì)從0到完全出現(xiàn)，上下左右都可能位移，發(fā)生回流

5、不要使用table布局，因?yàn)橐粋€(gè)小改動(dòng)可能會(huì)造成整個(gè)table重新布局。而且table渲染通常要3倍于同等元素時(shí)間

6、能夠使用CSS實(shí)現(xiàn)的效果，盡量使用CSS而不使用JS實(shí)現(xiàn)

渲染層

1、此外，將需要多次重繪的元素獨(dú)立為render layer渲染層，如設(shè)置absolute，可以減少重繪范圍

2、對(duì)于一些進(jìn)行動(dòng)畫的元素，使用硬件渲染，從而避免重繪和回流

DOM優(yōu)化

1、緩存DOM

const div = document.getElementById('div')

由于查詢DOM比較耗時(shí)，在同一個(gè)節(jié)點(diǎn)無需多次查詢的情況下，可以緩存DOM

2、減少DOM深度及DOM數(shù)量

HTML 中標(biāo)簽元素越多，標(biāo)簽的層級(jí)越深，瀏覽器解析DOM并繪制到瀏覽器中所花的時(shí)間就越長，所以應(yīng)盡可能保持 DOM 元素簡潔和層級(jí)較少。

3、批量操作DOM

由于DOM操作比較耗時(shí)，且可能會(huì)造成回流，因此要避免頻繁操作DOM，可以批量操作DOM，先用字符串拼接完畢，再用innerHTML更新DOM

4、批量操作CSS樣式

通過切換class或者使用元素的style.csstext屬性去批量操作元素樣式

5、在內(nèi)存中操作DOM

使用DocumentFragment對(duì)象，讓DOM操作發(fā)生在內(nèi)存中，而不是頁面上

6、DOM元素離線更新

對(duì)DOM進(jìn)行相關(guān)操作時(shí)，例、appendChild等都可以使用Document Fragment對(duì)象進(jìn)行離線操作，帶元素“組裝”完成后再一次插入頁面，或者使用display:none 對(duì)元素隱藏，在元素“消失”后進(jìn)行相關(guān)操作

7、DOM讀寫分離

瀏覽器具有惰性渲染機(jī)制，連接多次修改DOM可能只觸發(fā)瀏覽器的一次渲染。而如果修改DOM后，立即讀取DOM。為了**讀取到正確的DOM值，會(huì)觸發(fā)瀏覽器的一次渲染。因此，修改DOM的操作要與訪問DOM分開進(jìn)行

8、事件代理

事件代理是指將事件監(jiān)聽器注冊在父級(jí)元素上，由于子元素的事件會(huì)通過事件冒泡的方式向上傳播到父節(jié)點(diǎn)，因此，可以由父節(jié)點(diǎn)的監(jiān)聽函數(shù)統(tǒng)一處理多個(gè)子元素的事件

利用事件代理，可以減少內(nèi)存使用，提高性能及降低代碼復(fù)雜度

9、防抖和節(jié)流

使用函數(shù)節(jié)流（throttle）或函數(shù)去抖（debounce），限制某一個(gè)方法的頻繁觸發(fā)

10、及時(shí)清理環(huán)境

及時(shí)消除對(duì)象引用，清除定時(shí)器，清除事件監(jiān)聽器，創(chuàng)建最小作用域變量，可以及時(shí)回收內(nèi)存