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

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

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

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

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

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

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

渲染層

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

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

DOM優(yōu)化

1、緩存DOM

const div = document.getElementById('div')

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

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

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

3、批量操作DOM

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

4、批量操作CSS樣式

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

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

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

6、DOM元素離線更新

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

7、DOM讀寫分離

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

8、事件代理

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

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

9、防抖和節(jié)流

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

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

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