React Native,Flutter,相比於iOS原生的性能

一:現在越來越流行跨端誇平臺,也就是大前端開發,開發框架一類是React Native的,另一種是基於WebView的。

1:React Native 是Facebook於2015年4月開源的跨平臺移動應用開發框架,RN使用Javascript語言,類似於HTML的JSX,以及CSS來開發移動應用,因此熟悉Web前端開發的技術人員只需很少的學習就可以進入移動應用開發領域

2:Flutter是谷歌的移動UI框架,可以快速在iOS和Android上構建高質量的原生用戶界面。Flutter組件採用現代響應式框架構建。

二:那麼兩種開發方式那個性能上會更接近原生呢,那就要從渲染原理出發,關於UI上的開發蘋果有很多庫作爲支撐比如UIKit,OpenGL,CoreAnimation,Core Graphic, SwiftUI。

1:CPU計算數據(比如視圖佈局)然後交給GPU,GPU也會通過計算然後渲染生成我們想看到的UI,可以通過OpenGL庫來操作。總的來說,CPU與GPU的計算能力越快,屏幕顯示就會越流暢,反之,如果vsync信號高於16.7ms就會產生卡頓,不流暢。

2:原生渲染,首先CPU計算要顯示的內容數據(創建視圖,佈局,繪製,圖像解碼轉換等),在runloop的BeforeWaiting和Exit狀態時會發送通知,對圖層處理打包,然後發給一個獨立負責渲染的進程Render Server(主要執行OpenGL、Core Graphics 相關的操作,對圖層樹渲染)處理完數據後再交給GPU(這個過程的佈局計算會重載視圖LayoutSubViews方法以及addSubView和drawRect方法,如果調用setNeedsDisplay或setNeedsDisplayInRect都會觸發頁面更新,重新渲染)。

3:React Native從數據上講要解析JSON+JavaScript,其執行性能要比原生差,而且因爲本身腳本語言的執行速度相比原生慢,所依首次加載比較耗時。

4:Flutter界面是Widget組成的,在渲染上會有 Buid,Widget Tree,Element Tree, RenderObject Tree,Layout,Paint,Composited Layer等幾個階段,將Layer進行組合生成紋理,使用OpenGL接口向GPU提交渲染內容進行光柵化與合成,是在Flutter的C++層,使用的是Skia庫,包括提交到GPU進程後的合成計算,顯示到屏幕的過程和iOS原生基本類似,所以性能上也很接近。

5:SwiftUI是蘋果WWDC 2019 推出的UI框架,只支持iOS13及以上版本,跨Apple生態內端。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章