React
React的優(yōu)點(diǎn)有很多，現(xiàn)在很多應(yīng)用都接入React這個框架。
在我看來，有下列優(yōu)點(diǎn)：
- Facebook團(tuán)隊(duì)研發(fā)并維護(hù)——有團(tuán)隊(duì)維護(hù)更新且有質(zhì)量保證
- 在MVVM結(jié)構(gòu)下只起View的作用——簡單接入，不需要花費(fèi)大量人力重構(gòu)代碼
- 組件化形式構(gòu)建Web應(yīng)用——復(fù)用性強(qiáng)，提高開發(fā)效率
- 用Virtual DOM減少對DOM的頻繁操作提高頁面性能——批量操作減少重排（reflows）和重繪(repaints)次數(shù)——性能對比舊的方式有提高
React對重排和重繪的提高
雅虎性能優(yōu)化比較重要的點(diǎn)，老司機(jī)自行忽略。
如下圖，HTML被瀏覽器解析為DOM樹，CSS代碼加載進(jìn)來解析為樣式結(jié)構(gòu)體，兩者關(guān)聯(lián)組成渲染樹，之后瀏覽器把渲染樹繪制出來就是我們看到的網(wǎng)頁了。這里如果我們對DOM樹或者樣式結(jié)構(gòu)體做一些操作，如刪除某個節(jié)點(diǎn)，樣式改為隱藏（display:none）等等，會觸發(fā)重排進(jìn)而導(dǎo)致重繪。
觸發(fā)重排的條件
- DOM元素的數(shù)量屬性變化
- DOM樹的結(jié)構(gòu)變化——節(jié)點(diǎn)的增減、移動
-
某些布局屬性的讀取和設(shè)置觸發(fā)重排——offsetTop/offsetWidth/scrollTop等等
導(dǎo)致子級、后續(xù)兄弟元素、父節(jié)點(diǎn)因重新計(jì)算布局而重排
觸發(fā)重繪的條件
- 簡單樣式屬性的變化——顏色、背景色等
- 重排導(dǎo)致的重繪
而React維護(hù)了一個Virtual DOM將短時(shí)間的操作合并起來一起同步到DOM，所以這也是它對整個前端領(lǐng)域提出的最重要的改變。
