回流:引起Dom樹結(jié)構(gòu)變化,頁面布局變化的行為
重繪:只是樣式改變棺耍,不會引起Dom樹變化会涎,頁面布局變化的行為
1.回流必定引起重繪,但重繪不一定會伴隨回流
如何優(yōu)化代碼減少回流重繪過程
主要思想就是減少對Dom樹的操作次數(shù)和減少一些具有影響性的樣式請求
1.合并多次對樣式的修改疯攒,如改變className
2.動態(tài)改變樣式時使用cssText
3.將要改變的元素節(jié)點,先隱藏掉列荔,改變后再顯示
4.元素節(jié)點本身是處于隱藏狀態(tài)敬尺,通過cloneNode或者replaceChild將其展示,原理與第3點相同
5.不要經(jīng)常訪問會引起瀏覽器flush隊列的屬性贴浙,如要確要訪問砂吞,使用緩存即可
6.讓元素脫離動畫流,減少render樹的規(guī)模
7.犧牲平滑度來換取速度
8.避免使用table布局
9.IE中避免使用Javascript表達式