1、避免使用層級較深的選擇器,或其他一些復雜的選擇器,以提高CSS渲染效率
2、避免使用CSS表達式,CSS表達式是動態(tài)設置CSS屬性的強大但危險方法,它的問題就在于計算頻率很快。不僅僅是在頁面顯示和縮放時,就是在頁面滾動、乃至移動鼠標時都會要重新計算一次
3、元素適當?shù)囟x高度或最小高度,否則元素的動態(tài)內容載入時,會出現(xiàn)頁面元素的晃動或位置,造成回流
4、給圖片設置尺寸。如果圖片不設置尺寸,第1次載入時,占據(jù)空間會從0到完全出現(xiàn),上下左右都可能位移,發(fā)生回流
5、不要使用table布局,因為一個小改動可能會造成整個table重新布局。而且table渲染通常要3倍于同等元素時間
6、能夠使用CSS實現(xiàn)的效果,盡量使用CSS而不使用JS實現(xiàn)
渲染層
1、此外,將需要多次重繪的元素獨立為render layer渲染層,如設置absolute,可以減少重繪范圍
2、對于一些進行動畫的元素,使用硬件渲染,從而避免重繪和回流
DOM優(yōu)化
1、緩存DOM
const div = document.getElementById('div')
由于查詢DOM比較耗時,在同一個節(jié)點無需多次查詢的情況下,可以緩存DOM
2、減少DOM深度及DOM數(shù)量
HTML 中標簽元素越多,標簽的層級越深,瀏覽器解析DOM并繪制到瀏覽器中所花的時間就越長,所以應盡可能保持 DOM 元素簡潔和層級較少。
3、批量操作DOM
由于DOM操作比較耗時,且可能會造成回流,因此要避免頻繁操作DOM,可以批量操作DOM,先用字符串拼接完畢,再用innerHTML更新DOM
4、批量操作CSS樣式
通過切換class或者使用元素的style.csstext屬性去批量操作元素樣式
5、在內存中操作DOM
使用DocumentFragment對象,讓DOM操作發(fā)生在內存中,而不是頁面上
6、DOM元素離線更新
對DOM進行相關操作時,例、appendChild等都可以使用Document Fragment對象進行離線操作,帶元素“組裝”完成后再一次插入頁面,或者使用display:none 對元素隱藏,在元素“消失”后進行相關操作
7、DOM讀寫分離
瀏覽器具有惰性渲染機制,連接多次修改DOM可能只觸發(fā)瀏覽器的一次渲染。而如果修改DOM后,立即讀取DOM。為了**讀取到正確的DOM值,會觸發(fā)瀏覽器的一次渲染。因此,修改DOM的操作要與訪問DOM分開進行
8、事件代理
事件代理是指將事件監(jiān)聽器注冊在父級元素上,由于子元素的事件會通過事件冒泡的方式向上傳播到父節(jié)點,因此,可以由父節(jié)點的監(jiān)聽函數(shù)統(tǒng)一處理多個子元素的事件
利用事件代理,可以減少內存使用,提高性能及降低代碼復雜度
9、防抖和節(jié)流
使用函數(shù)節(jié)流(throttle)或函數(shù)去抖(debounce),限制某一個方法的頻繁觸發(fā)
10、及時清理環(huán)境
及時消除對象引用,清除定時器,清除事件監(jiān)聽器,創(chuàng)建最小作用域變量,可以及時回收內存