web效能最佳化--減少DOM操作（三）

標籤：操作   處理   解析   就會   速度   串連   數組   string   效能最佳化   

• 減少DOM數量
• 減少DOM操作
• 批量處理DOM操作
• 批量處理樣式修改
• 盡量不要使用tabel布局
• 盡量不要使用css運算式
• string用數組join
• css選擇符最佳化

1.減少DOM數量

　　在HTML產生DOM樹的時候，DOM數量越少，HTML渲染速度越快

2.減少DOM操作

　　每次操作DOM，都會帶來repaint和refolw

3.批量處理DOM操作：

　　將元素移除DOM Tree，修改完後再放回去，因此只會調用一次repaint或者reflow

4.批量修改樣式

　　改變classname，或者用css()，原理和批量處理js一樣

5.盡量不要使用tabel布局

　　tabel中某個元素改變了，整個tabel就會reflow.

　　如果非用不可，可以設定tabel-layout:auto或者tabel-layout：fixed,讓tabel一行一行的渲染，限制渲染範圍

6.盡量不要使用css運算式

　　每計算一次就會觸發reflow一次

7.string用數組join串連

　　在js中使用“+”來拼接字串效率比較低，因為每次運行都會開闢新的記憶體並產生新的字串變數，然後將拼接的字串賦值給新變數。使用數組的話效率就高一點

8.css選擇符最佳化

　　因為css是從右向左解析的，根據這個規則，盡量使右邊的樣式唯一

web效能最佳化--減少DOM操作（三）