React
React的優(yōu)點有很多,現(xiàn)在很多應(yīng)用都接入React這個框架。
在我看來,有下列優(yōu)點:
- Facebook團隊研發(fā)并維護——有團隊維護更新且有質(zhì)量保證
- 在MVVM結(jié)構(gòu)下只起View的作用——簡單接入,不需要花費大量人力重構(gòu)代碼
- 組件化形式構(gòu)建Web應(yīng)用——復(fù)用性強,提高開發(fā)效率
- 用Virtual DOM減少對DOM的頻繁操作提高頁面性能——批量操作減少重排(reflows)和重繪(repaints)次數(shù)——性能對比舊的方式有提高
React對重排和重繪的提高
雅虎性能優(yōu)化比較重要的點,老司機自行忽略。
如下圖,HTML被瀏覽器解析為DOM樹,CSS代碼加載進來解析為樣式結(jié)構(gòu)體,兩者關(guān)聯(lián)組成渲染樹,之后瀏覽器把渲染樹繪制出來就是我們看到的網(wǎng)頁了。這里如果我們對DOM樹或者樣式結(jié)構(gòu)體做一些操作,如刪除某個節(jié)點,樣式改為隱藏(display:none)等等,會觸發(fā)重排進而導(dǎo)致重繪。
觸發(fā)重排的條件
- DOM元素的數(shù)量屬性變化
- DOM樹的結(jié)構(gòu)變化——節(jié)點的增減、移動
-
某些布局屬性的讀取和設(shè)置觸發(fā)重排——offsetTop/offsetWidth/scrollTop等等
導(dǎo)致子級、后續(xù)兄弟元素、父節(jié)點因重新計算布局而重排
觸發(fā)重繪的條件
- 簡單樣式屬性的變化——顏色、背景色等
- 重排導(dǎo)致的重繪
而React維護了一個Virtual DOM將短時間的操作合并起來一起同步到DOM,所以這也是它對整個前端領(lǐng)域提出的最重要的改變。
為什么引入Reflux?
延伸閱讀
- ssh框架 2016-09-30
- 阿里移動安全 [無線安全]玩轉(zhuǎn)無線電——不安全的藍牙鎖 2017-07-26
- 消息隊列NetMQ 原理分析4-Socket、Session、Option和Pipe 2024-03-26
- Selective Search for Object Recognition 論文筆記【圖片目標分割】 2017-07-26
- 詞向量-LRWE模型-更好地識別反義詞同義詞 2017-07-26
- 從棧不平衡問題 理解 calling convention 2017-07-26
- php imagemagick 處理 圖片剪切、壓縮、合并、插入文本、背景色透明 2017-07-26
- Swift實現(xiàn)JSON轉(zhuǎn)Model - HandyJSON使用講解 2017-07-26
- 阿里移動安全 Android端惡意鎖屏勒索應(yīng)用分析 2017-07-26
- 集合結(jié)合數(shù)據(jù)結(jié)構(gòu)來看看(二) 2017-07-26