大前端時代搞定PC/Mac端開發,我有絕招(收藏版)

2024-07-21 02:03:27

字體：大中小

來源：轉載

供稿：網友

如果你是一位前端開發工程師，對“跨平臺”一詞應該不會感到陌生。像常見的前端框架：比如React、Vue、Angular，它們可以做網頁端，也可以做移動端，但很少能做到跨PC、Mac端，也就是我們熟知的Windows、Linux以及macOS上的應用程序。即使有，受限于JS的性能瓶頸，當有大量的科學計算需求時，則會略顯疲態。
有沒有一個理想的UI框架能夠通殺它們所有呢？答案是――Flutter。

Flutter的性能優勢

做為一個通用的跨平臺的UI框架，Flutter在性能方面的突出表現是非常引人奪目的。拿Android舉例，一個安卓的原生APP在繪圖的時候，要先調用Android框架的Java代碼，然后再調用skia（C/C++）繪圖引擎代碼，最后生成的CPU或者gpu的指令，在設備上完成繪圖。而Flutter的APP在繪圖的時候，是先調用Flutter框架的Dart代碼，然后直接調用skia（C/C++）代碼。所以只要Flutter框架Dart代碼的效率可以媲美原生框架的Java代碼的時候，那么Flutter的性能就可以媲美原生APP。
而如React Native，它首先要調用框架本身的JavaScript代碼，然后再調用Android框架的Java代碼，然后調用skia，這比原生的App運行過程多出了一個步驟，所以它的這個性能肯定是不及原生的。
國內知名的“閑魚”技術團隊對于Flutter在性能上逼近原生App的解釋如下：

1.預先(AOT)編譯，運行時直接執行Native(arm)代碼；
2.必需的同Native通信(channel)是C++層次，性能好；
3.其線程模型中Dart代碼執行(在UI TaskRunner)，圖片下載(IO TaskRunner)，真正的渲染(GPU TaskRunner)，同平臺的通信等(Platform TaskRunner即Native概念下的主線程)是互相隔離的。透過將耗時的邏輯放入IO TaskRunner或新開Isolate(會在Dart線程池中執行);GPU TaskRunner可以將幀數據提交給GPU時UI TaskRunner已在準備下一幀數據這種流水線的機制提高了渲染速度；
4.Flutter層面針對布局等的優化:布局計算時單次樹走動即可完成;Relayout Boundary機制:如果Child 的size是固定的，那么不會因為Child的Relayout導致Parent ReLayout；Repaint Boundry機制:如果樹的某個子樹如果同樹的其他部分不同頻地重繪，那么RenderRepaintBoundary可以改善性能。
5.Skia團隊針對Flutter的優化。
6.框架的布局優化對上層開發透明。

如果你有一定的前端開發經驗，特別是移動端的開發經驗，或者深入探究過Flutter，上述內容應該不難理解。
如今，使用Flutter開發移動端App的教程鋪天蓋地，我來手把手教你如何使用Flutter搞定PC、Mac端開發，從此徹底打通前端跨平臺。

PC端實戰

1. 準備工作

首先我們要確保Flutter開發環境準備就緒。有關搭建開發環境的步驟，可參閱：
https://flutter.cn/docs/get-started/install
此處不再贅述，我們重點關注下面的操作：
到今天為止，在Stable分支上的Flutter SDK可以設置啟用PC端開發的能力，但實際上是無法使用的。因此，我們需要將其切換到master分支上。切換的方法是在命令行窗口執行下面的語句：