以往的認知結果:
比較內容 | Flutter | RN | 原生 |
---|---|---|---|
平臺實現 | 通過Dart虛擬機編譯成機器碼 | Virtual Dom映射到原生View,通過ART虛擬機編譯成機器碼 | 通過ART虛擬機編譯成機器碼 |
繪制引擎 | Skia | JS V8+Skia/OpenGL ES | Skia/OpenGL ES |
使用語言 | Dart | React | Java/Kotlin |
上手難度 | 一般 | 難 | / |
框架程度 | 重 | 較重 | 一般 |
社區 | 豐富,谷歌力捧 | 活躍,FaceBook支持 | 龐大,谷歌支持 |
軟件發布 | 支持熱更新(暫未開放) | 支持熱更新 | 可熱更新(有點麻煩且不穩定) |
性能測試過程:
分別用Flutter、RN、原生開發三個項目,只有一個列表頁面,10000條數據,在三款低中高端機型中測試。
Demo內容
APK體積大小
APK體積占用情況:
flutter.jpg
RN.jpg
native.jpg
啟動時間
初始內存占用
操作片刻后的內存占用
CPU峰值
通過性能測試得出下表:
比較內容 | Flutter | RN | 原生 |
---|---|---|---|
APK大小 | 5.5M | 6.6M | 1.4M |
啟動時間 | 冷啟動319ms,熱啟動152ms | 冷啟動243ms,熱啟動71ms | 冷啟動181ms, 熱啟動74.8ms |
內存-cpu-魅藍Metal | 初始30M ,滑動5000穩定后32M,cpu22% | 初始38M,滑動5000,穩定在60M,cpu45% | 初始:7.6M ,滑動5000條穩定在12M,cpu10% |
內存-cpu-魅族Pro5 | 初始85M ,滑動5000條穩定后110M,cpu12% | 初始56M,滑動5000,穩定在104M,cpu22% | 初始:29.5M ,滑動5000條穩定在42M,cpu7% |
內存-cpu-華為P20Pro | 初始99M ,滑動5000條穩定110M,cpu12% | 初始63M,滑動5000,穩定在80M,cpu22% | 初始:25M ,滑動5000條穩定在32M,cpu8% |
主觀感受 | 無卡頓 | 滾動100條之后有卡頓 | 絲滑般 |
性能測試結論:
以上只是一個簡單demo通過測試得出的數據結果,僅能從大體上比較出三者的性能,可能在實際的項目中會有些出入。
1、包體積原生比較小,Flutter和RN不相上下(Ios系統需要引入Skia庫,最終包體積Flutter會明顯大于RN),由于Flutter和RN框架中需要一些C++依賴庫,導致包體積比原生大了很多。
2、啟動時間,Flutter(冷熱啟動時間)>RN=原生
3、內存占用,在高端手機上,flutter占用內存是大于RN的,但是低端手機Flutter的內存占用會低于RN,RN內存占用不穩定,頁面剛生成的時候內存占用會高一點, 之后緩慢回落。
3、CPU占用,RN明顯高于Flutter和原生,這會導致手機性能降低、耗電量增加、發熱更厲害
4、主觀感受,Flutter要比RN更加流暢,體驗感更好,但是和原生仍有不小差距,不過Flutter還很年輕,官方宣稱其性能會接近原生,甚至超過原生體驗,隨著Google不斷的改進相信在不遠的將來會實現這個可能。