天天看點

Flutter概論-優勢,知識體系

大概

Flutter使用原生引擎渲染視圖

Flutter包含底層渲染邏輯,保證Android和IOS高度一緻性

Flutter運作機制

CPU線程計算好Dart和視圖結構,交給Skia渲染引擎,通過OpenGL渲染
Flutter概論-優勢,知識體系

Skia

Skia 是一款用 C++ 開發的、性能彪悍的 2D 圖像繪制引擎

底層渲染能力統一了,上層開發接口和功能體驗也就随即統一了,開發者再也不用操心平台相關的渲染特性了

Dart

同時支援JIT和AOT:

開發階段使用JIT,支援熱重載,釋出時期使用AOT,代碼執行高效

Dart集百家之長

Dart避免了搶占式排程和記憶體共享:

因為他是單線程機制,而且是沒有強制時間片打斷的,可以在沒有鎖的情況下進行對象配置設定和垃圾回收,在性能方面表現相當不錯。

Flutter實作原理

Flutter架構圖
Flutter概論-優勢,知識體系

Embedder

Embedder 是作業系統适配層,實作了渲染 Surface 設定,線程設定,以及平台插件等平台相關特性的适配

Engine

Skia、Dart 和 Text,實作了 Flutter 的渲染引擎、文字排版、事件處理和 Dart 運作時等功能。

Framework

Framework 層則是一個用 Dart 實作的 UI SDK,包含了動畫、圖形繪制和手勢識别等功能。

Flutter 采用深度優先機制周遊渲染對象樹,決定渲染對象樹中各渲染對象在螢幕上的位置和尺寸。

Flutter概論-優勢,知識體系

Flutter 加入了一個機制——布局邊界

可以在某些節點自動或手動地設定布局邊界,當邊界内的任何對象發生重新布局時,不會影響邊界外的對象。

Flutter概論-優勢,知識體系

繪制過程也是深度優先周遊,而且總是先繪制自身,再繪制子節點。

Flutter概論-優勢,知識體系

重繪邊界

在重繪邊界内,Flutter 會強制切換新的圖層,這樣就可以避免邊界内外的互相影響,避免無關内容置于同一圖層引起不必要的重繪

Flutter概論-優勢,知識體系
頁面複雜,層級非常多,将相同的圖層歸類合并,提高渲染效率。

Flutter知識體系

Flutter概論-優勢,知識體系