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