Categories
程式開發

跨平台技術趨勢及字節跳動 Flutter 架構實踐


自我介紹

大家下午好!今天跟大家分享的主題是《跨平台技術趨勢及字節跳動 Flutter 架構實踐》。

我是今年加入字節跳動,目前在移動平台部負責 Flutter 架構優化工作,在此之前我在小米做了 3 年安卓手機系統的底層優化與研發工作。平時工作之餘喜歡寫寫博客,從 16 年開始,堅持寫了 4 年,產生 200 餘篇原創技術篇章,與此期間也受邀出席業界的一些安卓相關的技術大會。

面對層出不窮的新技術

在正式分享之前問大家一個問題:面對層出不窮的新技術,你是選擇繼續深耕原有技術,還是會嘗試新技術?大家不要思考,你直觀印象會選擇什麼?

跨平台技術趨勢及字節跳動 Flutter 架構實踐 1

但其實面對這個問題的時候,很多人想的是:我是不是要嘗試新技術了?就像上面這個例子,很多人會想到,我如果不斷換新技術,是不是最終一無所獲?我如果堅持一個方向,最終我能獲得我想要的東西、能夠有所成果,我就不要去嘗試新技術了。但其實這裡面有個誤區:

第一,如果你在一個領域做得足夠長時間,3 年、5 年、10 年,那麼你有可能會有所收穫,這時候你就會進入技術疲憊期,有可能就不願意再去挑戰新的東西了,有可能覺得成長空間受到限制,這個時候如果你願意跳出技術舒適區,去看一看周邊新的技術,會拓寬你的知識面。以我個人為例,我在此前做過安卓手機驅動層的開發,我又做過上面安卓Framework 層,來到字節跳動又開始做Flutter,在我不斷選擇新方向時,這何嘗不是一種深耕呢?把你的技術棧打通。

第二,如果你選擇學習更多新技術時,可以看到下面有很多鑽石,你要選擇找到一顆最大的鑽石,怎麼找?要看趨勢,一個好的趨勢不一定幫你找到最大鑽石,但是一定可以幫你更高概率找到更大的鑽石。

第三,如何找到一個新的想法,是不是每次工作時都像左邊那個人從頭開始?其實這也是一個誤區。有經驗的人都知道,你在一個領域深耕時,再學習一個新的領域絕非從零開始,到一定程度你會橫向發展、橫向打通,而不是回到零點,你的學習成本時間不會那麼長,因為技術是相通的。

所以我們在追求技術過程中,如何找到更大的鑽石?就是看技術趨勢。如何收穫更多鑽石?不要拘泥於一個方向,當然,也不建議大家頻繁的切換,但可以在多個領域收穫。如何更高效的找到鑽石?我們的技術是相通的,當你在學習新技術時,要你把原有的技術聯通、打通,融通你的的任督六脈。

為了解決這幾個問題,我們以移動跨平台為例。首先,我們先看看移動端技術發展趨勢;再則看看Flutter 引擎到底有哪些核心技術,如何跟原有技術相通的;最後介紹一下字節跳動在Flutter 新技術領域有哪些技術進展與落地實踐,看看在新領域是如何做到快速深耕。

一、移動跨平台技術趨勢

我們為什麼做移動跨平台技術?

  • 移動互聯網發展10 多年來,由之前傳統PC 端時代到移動時代,在移動時代競爭激烈,各大移動互聯網公司都在爭相搶奪市場,如何提高研發效率,產品快速迭代、快速試錯成為非常重要的因素。
  • 與此同時,還要看在關注研發效率的同時能否做出一個性能比較高的應用,往往我們的研發效率和性能是天平兩端,性能好了開發效率可能就差了,開發效率好了性能可能就差了,這就需要思考如何把開發效率和性能這兩者做到更好的平衡。
  • 再者,面對這麼多跨平台技術,能否用一種語言開發出應用在多端體驗是一致的? UI 小姐姐設計這版小龍女,研發小哥哥開發出另一款小龍女,到安卓平台變成各種各樣的小龍女,發現 UI 長得都不一樣。我們能否實現高效的多端一致性體驗?
  • 再者,能否突破渠道去快速更新我的應用?這個不光是跨平台技術,Native 技術本身也是同樣關注這個問題。

跨平台技術趨勢及字節跳動 Flutter 架構實踐 2

以上,是跨平台技術方案優劣最為關注的幾個因素。

跨端技術這幾年是怎麼發展的?

跨平台技術趨勢及字節跳動 Flutter 架構實踐 3

我們在 2011 年時,以 WebView 技術做跨端,這個跨端有比較大的局限性,性能很差、功能受限,不能做複雜場景。到了 2015 年 Facebook 出了 React Native,它是以 JS 語言,通過中間層轉換,最終渲染調到 Native 層,性能相對更好一些。接下來阿里推出了 Weex,也是通過 JS 語言調到原生渲染。 2018 年 Google 出了 Flutter,它有自自己的引擎、自渲染機制,它的性能比較好。這就是大概的演進。

跨端技術類型

跨平台技術趨勢及字節跳動 Flutter 架構實踐 4

跨端技術分為幾類:

  • 原生渲染:通過各種技術調中間層轉換,最終渲染,安卓還是調安卓的,iOS 的還是調 iOS 的。
  • WebView:通過調 WebView 的技術去渲染,我們的小程序也是基於這一塊。
  • 自渲染:可以不借助系統的,自己寫一套自渲染技術,這就是今天要講的重點——Flutter。

不管跨端技術怎麼演變,主要就是分這三大類。

Flutter 有什麼技術優勢?

跨平台技術趨勢及字節跳動 Flutter 架構實踐 5

  1. 高效率:跨平台,用 Dart 語言跑,同時可以跑在多端上,毋庸置疑有高效率。
  2. 高性能:自渲染,不靠系統原生渲染,用自己的。
  3. 高一致性:一套代碼寫完,它在多端表現是一致的。
  4. 動態化:這個東西不適合去過多講,其實引擎本身就有嘗試原生引擎。

跨平台技術趨勢及字節跳動 Flutter 架構實踐 6

我們來看高一致性,上面是 Flutter 寫的一個 Demo,在安卓和 iOS 幾乎一樣。 UI 小姐姐設計 UI 時往往希望多端體驗一致,它可以做到高度一致。

跨平台技術趨勢及字節跳動 Flutter 架構實踐 7

我們再講講它的高性能,為什麼常說它是高性能?以安卓為例,安卓原生框架 APP 調到大家熟悉的安卓 Framework,Flutter 再調到 Skia,Skia 再最終渲染調到 GPU。

右邊一般常規框架原生渲染怎麼做的?它有一個轉換層,通過轉換,最終安卓調安卓渲染,iOS 調 iOS 渲染機制,中間多了一個層。

對於 Flutter 中間調的是一個 Dart Framework,再調到 Skia,用 Flutter 平台和原生很接近,Flutter 是上限很高的技術,如果你優化足夠好,它可以媲美原生。當然,現在 Flutter 作為一個新生嬰兒可能有些方面有所不足,但是不斷發展,它終究可以做得更好。

業界公司可以直接做 Flutter,BAT、字節跳動等或多或少在它們業務上有落地,這是一個趨勢。

跨平台技術趨勢及字節跳動 Flutter 架構實踐 8

除此之外,Google 還有一個內部做的系統叫 Fusicha,它最上層也是用的 Flutter 和 Dart,這個系統未來如何?在 5G 和 IoT 市場不斷發展,很有可能這個系統也做得不錯,如果它有不錯的效果,你提前入局 Flutter,可能多了一次彎道超車的機會。

二、解讀 Flutter 引擎原理

Flutter 技術架構

跨平台技術趨勢及字節跳動 Flutter 架構實踐 9

我們來看看 Flutter 技術棧。上面是用 Dart 寫的 APP,下面有 DartFramework,Framework 裡有安卓和 iOS 的主體,裡面有很多動畫等等。再往下會調到引擎,引擎裡有消息、PlatformChannel、Dart VM 等,引擎層再到平台,我們看的是平台、安卓還是 Web,這是我們常規的一個架構。

引擎創世紀

但是我們看待一個系統一定要從動態視角去看待,什麼叫動態視角?這個 Flutter 是如何創立的?它的生命週期看它最終是怎麼起來的?

跨平台技術趨勢及字節跳動 Flutter 架構實踐 10

上圖依然是以安卓為例,安卓有 Application 和 Activity,用 Dart 寫的 APP 終究也要這樣去跟原生連接起來,Flutter 有 Flutter 的 Application 和 Flutter 的 Activity。在 Flutter Application 中就會把 Dart 寫的代碼生成一個產物,把它加載起來,我們的 Flutter Activity 過程中會拉起我們的引擎。

到了引擎層這塊,Flutter 里四個核心線程:平台線程、UI 線程、GPU 線程、IO 線程,它們各有分工:這個平台線程對於安卓和iOS 來說就是常說的主線程,這裡的UI 線程面對安卓本身的主線程,就是一個獨立的線程;GPU 線程指的是跑在CPU 上的線程,它做的主要是Skia 相關工作。 IO 線程比如圖片解碼、編解碼,主要做 IO 相關的工作。這裡既然有幾個線程,肯定涉及線程之間的通信,就回到技術的相通,如果你熟悉安卓、iOS 就知道線程怎麼通信,一會兒看看它們兩個的區別。

右邊有一個 Dart 虛擬機,這裡有一個 Isolate 的概念,這是 Flutter 裡才有的概念,從名字也可以看出來,“孤立的”,孤立的是什麼意思?兩個內存之間不會孤立、不會不共享。再看右上角,就到了 Dart 層,會有 UI 繪製。

接下來依次講一下這四塊。

Flutter 編譯產物

跨平台技術趨勢及字節跳動 Flutter 架構實踐 11

第一個圖,先看看Flutter 用Dart 寫的代碼最終編譯的東西長什麼樣,最開始Dart 代碼最馬上用前端編譯器編譯,左邊綠色的是安卓,右邊藍色的是iOS,根據不同的平台會產生不同的產物。左邊組成了一個 APK,右邊在我們的 iOS 上是 Runner APP。最下面引擎代碼通過編譯產生在安卓和 iOS 有所不同,兩部分拼湊起來成為相應不同平台的 APK。發現用 Dart 寫的代碼在不同平台會編譯成適應不同平台的應用,這是最終編譯出來的產物。 Flutter 能夠把這個產物加載起來運行。

線程通信

跨平台技術趨勢及字節跳動 Flutter 架構實踐 12

第二個圖,說到線程通信,依然以安卓為例,大家非常熟悉安卓,我們是怎麼通信的呢?這裡面有很多消息,簡單來說是把一個消息放到消息隊列裡去了,這是一個安卓的技術。我們來看一下右邊 Flutter,會發現非常神奇,技術就是這樣的相通。 Flutter 依然有一個Looper 線程,對於主線程復用了原來的Native 的,對於另外三個線程創建一個獨立的Looper,不同的是它有兩個消息隊列,依然是跑消息的方式,通過Task Runner 就好比安卓的Handle,通過PostTask 就好比把一個消息放在一個消息隊列裡去。同樣在 Dart 裡經常用 Furture 和異步的方法,核心還是用我們的 Task Runner 發一個消息。

我們要看到技術的相通,也要看到技術的不同,這裡面不同的是什麼?不同的是在於我們這裡有一個 MessageQueue,這裡有兩個隊列,它怎麼處理呢?先處理微型任務,微型任務處理完了再處理普通任務,所以在 Flutter 裡叫 Task,在安卓裡叫 Message,技術神奇的相似。大家不用擔心,學習新技術成本非常高,把技術掌握透了,學習新技術會發現成本很低,很好去理解。

Dart 虛擬機

跨平台技術趨勢及字節跳動 Flutter 架構實踐 13

再看看 Isolate,同一個進程裡可以有很多 Isolate,兩個 Isolate 的堆是不能共享的,但它們也要交互。怎麼交互?在 Dart 虛擬機裡面也有一個特殊 Isolate,是運行在 UI 線程中,和 Root Isolate 是運行在一個線程的。當兩個 Isolate 要通信,會找一個共同的可訪問的內存,安卓聽到非常多的概念是“進程間通信”,它最終怎麼通信?用戶態進程不能共享,但是內核態可以共享,這就找到一個可以共享的地方,把通信數據在內核態放進對方的隊列裡,另外一邊就可以拿到了。

同樣,Isolate 也是類似的邏輯,Isolate1 和 Isolate2 怎麼通信?在Isolate2 裡創一個ReceivePort,在Isolate1 中調用其對應的SendPort 的send 方法,在引擎PortMap 裡面有映射表,每一個port 端口對應一個相應Isolate 的MessageHandler,該Handler 裡面有兩個隊列,一個是普通的消息隊列,一個是OOB 高優先級消息,根據優先級把它放到相應消息隊列。再把這個事件封裝成一個MessageTask,拋到另外一個Isolate 裡去,我們一般創建一個Isolate,它裡面是一個worker 線程,worker 線程放入一個新的Task,它就會最終去執行這個Task,最終會解析出這個消息,你會發現技術再一次相通了。

Widget

跨平台技術趨勢及字節跳動 Flutter 架構實踐 14

我們再往上走,到了 UI 層是 Widget,在整個 Flutter 裡有很多 Widget。 Widget 可以是一行文本、一張圖片、一個顏色,所有都是 Widget。最大有兩類,一個是無狀態的 Widget,一個是有狀態的。無狀態顧名思義是一類 StatelessWidget,一旦創建狀態是不可改變的;第二類 StatefulWidget 是狀態可以改變的。這涉及狀態是跟安卓不同的地方,既然有了狀態,應用越寫越複雜時就涉及狀態管理,如何去管理狀態。

渲染原理

跨平台技術趨勢及字節跳動 Flutter 架構實踐 15

對應 Widget 創建 Widget 樹,它是 Element 的配置,如果兩個 Widget 之間做了變化它會做差分,比較一下到底哪部分做了變化,只把變化更新到 Element 裡去,以最小粒度做更新。到了 Element 裡構建渲染過程中會創建 Render 對象,創建渲染的過程。

跨平台技術趨勢及字節跳動 Flutter 架構實踐 16

渲染來了一個信號,UI 線程更新動畫,動畫完了做一個建立,建立過程中生成 Render,再往下佈局、繪製大小等工作。這個完成以後會生成一個 Layer Tree,也跨兩個線程,UI 和 GPU 線程。到了 GPU 線程之後會調用 Skia 做渲染。

Platform Channels

跨平台技術趨勢及字節跳動 Flutter 架構實踐 17

為什麼用平台的 Channel?大家常說,Flutter 是一個漂亮的 UI 工具,有時真的需要 Native 能力怎麼辦?比如調用相機的特性需要寫Native 代碼,所以Flutter 提供一套Channel 機制,橙色部分代碼,寫相應平台安卓或者iOS 定制代碼,中間有一套機制幫你實現封裝好,你寫Dart 代碼直接可以調到安卓或者iOS 代碼,這個過程是異步的。

大家大概看了 Flutter 引擎核心的技術,不光是 UI 層的,以及引擎層的機制。我過程中多次提到一點,技術是相通的,你在一個領域深耕,新的領域依然可以做到繼續深耕。

三、字節跳動在 Flutter 架構實踐

字節跳動有超過 20 個應用在用 Flutter,頭條、西瓜視頻等都在用 Flutter,內部很多應用都已經採用 Flutter 落地了,這不是紙上工程,在很多業務上都已經落地了。

Flutter 架構實踐

跨平台技術趨勢及字節跳動 Flutter 架構實踐 18

我們移動平台部在 Flutter 上做了哪些工作?

上層為了支撐我們這些應用,首先在應用框架層在工程化做了很多努力,用容器化思想,如何讓業務接起來更快;有混合工程的知識,讓業務快速接入Flutter;我們的狀態管理,在狀態混了的情況下如何高效的接入;也為了我們業務更好的接入,我們有很多技術組件的開發,提供了很多豐富的庫。

除此之外,為了監控 Flutter,有很多性能高可用平台,有穩定性測試等等。

引擎層也做了大量優化,雖然號稱 Flutter 高性能,但是業務使用中還是要做到優化。首先,我們很多工程師剛開始寫Dart 不知道如何寫出更高效率的Flutter 代碼,所以業務可以優化,其次,引擎可以做很多優化,以及多端一體化的嘗試,以及編譯、黑科技的,我們在每個領域都花了很多投入。

Flutter 容器化架構

跨平台技術趨勢及字節跳動 Flutter 架構實踐 19

簡單看看我們的容器化,為業務支撐,有很多 APP,提供容器化擴展接口。比如要調圖片,圖片調到我們的協議層,會調一個圖片的協議,裡面有一個默認的適配,還有一個用戶可以自定義的,可以不做任何定制,我們會幫你提供常用技術組建。下面跟安卓、iOS 的交互都可以忽略,寫代碼很方便,很多庫都有,這就是容器化的思想,幫你封閉了底層差異性,讓你接入起來更加快捷。

監控體系

跨平台技術趨勢及字節跳動 Flutter 架構實踐 20

再說說監控體系,看過我們 Flutter 發現引擎本身有我們的監控,上面是 GPU 線程,下面是 UI 線程,這是一個比較粗糙的性能統計方法。為什麼粗糙?有幾點做不到位的地方:第一,把性能分成UI 和GPU 線程,顯然我們看參數時希望看一個參數,第二,它的算法很粗糙,它統計每一幀耗時,做物理平均,最後再將平均耗時根據16.6ms 對應60fps,來歸一化處理。

業界不少公司做了改進,都怎麼改進的?通常的方法在框架層去統計出 UI 線程的耗時時間,看它跨了多長時間,看它有多少幀是丟幀的,這個方案有什麼缺陷?我們可以看這個圖,理解這個渲染的過程,來了一個信號,你把這個消息 post 到 UI,裡面再做 Handle,再把這個事情 Post 到我們的 GPU 線程。這個方案的缺陷是:第一,線程 Post 到 UI 線程中間有一個消息傳遞過程,有可能在 Post 過程中要等待的這段時間沒有考慮進去。第二,如果你只統計 UI 線程有什麼缺陷?我們舉個例子,UI 線程非常快,但是GPU 線程非常慢,UI 線程每次可能一兩毫秒就完成了,但是GPU 線程每次要一兩百毫秒,雖然看到性能非常好,但是真實體驗發現卡爆了,幾乎刷不動,為什麼?因為 UI 線程向 GPU 線程跑消息時最多 Post 兩個消息,這時候 GPU 線程依然處理不過來,UI 線程就不會 Post 消息,但是 UI 線程體現不出來,所以這也是業界方案的缺陷。

我們做了高精度無侵入性能監控方案:

  • 首先,要知道繪製多少幀,所以我們會統計你發了多少信號,統計 GPU 線程,最終真正繪出來多少幀,這是真正的體驗。我們是在引擎層提供了一套。
  • 第二,為什麼叫無侵入?常常的性能監控會在我們開始滾動時調一個開始,結束時調一個End,我們不需要做這個動作,接入框架系統會自動識別場景,自動判斷什麼時候開始,什麼時候結束,所以是高精度無侵入的性能監控。

多端一體化實踐

跨平台技術趨勢及字節跳動 Flutter 架構實踐 21

在多端一體化也做過嘗試,內部寫一個應用可以同時運行在 iOS、安卓端、Web,把一些內部組件串起來,做一個多端一體化的嘗試。多端一體化的核心就在於常規有一個 Flutter 引擎,右邊多一個 Flutter Web,調用 Dart2JS,這樣就把我們 Web 包容進來了。

Flutter Turbo

跨平台技術趨勢及字節跳動 Flutter 架構實踐 22

Flutter Turbo,做了性能提升的方案,如何在有限資源情況下把我們的性能發揮到極致?這個核心思想就是我要找到核心場景做有效的資源調度,比如用戶在界面滑動這個場景非常重要,你能否把一些資源有效控制?比如消息調度能否優先調度響應我的首次,這時候我在用戶非常重要的場景能否把GC 抑制了,關閉可以關閉的特效,有一系列手段,為了提高我們的性能,內部有一個Benchmark 跑分,這些方案都能夠帶來提升。

圖片透傳優化方案

跨平台技術趨勢及字節跳動 Flutter 架構實踐 23

現有圖片怎麼傳?常規Dart 裡要上網絡中去下載一張圖片會調Image.network,然後把這張圖片加載之後,要把數據傳到Dart 層,可以傳一個路徑等等之類的,Dart 層會再調用引擎層解碼。外界紋理也很不錯,但它有一些問題,沒有在這個基礎上改造,而是做了自己的一套透存的方案。

圖中右邊是我們在Dart 層調引擎的示意,引擎加載圖片時我們調到裡面加載,它生成一個Bitmap,雖然引擎是Dart 虛擬機,但兩者之間我們做了一個Bitmap 的共享,你不需要把數據傳過來,我們是共享的方式,我們再轉成Pixel buffer,對性能同樣會大大提升。

啟動速度優化

跨平台技術趨勢及字節跳動 Flutter 架構實踐 24

啟動速度優化我們做得比較早,剛開始它啟動速度也很慢,我們在引擎層裡也做了很多修改,發現它的啟動速度幾乎提升了 1 倍。

包體積優化

跨平台技術趨勢及字節跳動 Flutter 架構實踐 25

包體積是大家非常關注的一個點,為什麼關注包體積?會決定用戶願意不願意去下載這個應用,所以我們在包體積方面做了很多工作,做了很大努力。

  • 做了編譯優化,如何採用更高效率的編譯,iOS 上用了 O 編譯,發現包體積進一步壓縮。
  • Flutter 產物有數據端和代碼端,我們把數據端進一步壓縮,包體積會減少。
  • 在 Skia 我們做了裁剪,把不太需要的功能以及不那麼必要的東西裁剪了。
  • 引擎層我們也做了一些功能三方庫的裁剪。
  • 在指令這端發現用 Flutter 寫的指令會比我們用 OC 代碼指令更長一些。這塊我們跟 Google 做了積極的溝通反饋問題,Google 花了很多精力,我們也跟進推進 Google 做這件事情。

一系列方案下來,我們的包體積會接近 50%的優化。

以上是我們字節跳動在 Flutter 裡做了眾多實踐中的部分重點工作。

四、總結

第一,分享了 Flutter 的技術趨勢,Flutter 是大家爭相追尋的技術。

第二,跟大家介紹了 Flutter 引擎,發現裡面的技術是相通的,消息通信跟安卓的 Handle 機制幾乎一樣;但是它也有它的差異,技術也有不同之處。

第三,字節跳動布了一個新的領域,發現我們做了很多技術深耕。回到最開始問的問題,面對一個新技術,你是願意繼續選擇深耕老的技術,還是願意嘗試新的技術?發現在做新技術時並沒有大家想像的那麼難,而且在過程中你會收穫很多。

第四,既然選趨勢,你怎麼知道你選擇的就是那顆最大的鑽石?最後有一句話送給大家:

有時候你選擇一個方向,不是說它一定成為未來,而是它有可能成為不一樣的未來

謝謝大家!

Q&A

提問:我是一位安卓開發者,自己經常了解Flutter,很有疑問是關於代碼遷移,很多應用開發很多年了,代碼量是很大的,遷到Flutter 上,您這邊在項目上有什麼經驗呢?或者有什麼建議呢?就是在代碼量很大的這種場景下。

回答:這是一個很好的問題。 Flutter 有兩塊,第一,新業務是一個比較好的選擇,直接從零開始。第二,已有業務如何改造?建議剛開始先嘗試選擇頁面相對簡單的頁面,只能逐步切,先找相對輕量的頁面嘗試把路跑通,各方面數據指標都能達標,再嘗試更多,循序漸進把更多切進去。不要想到工程這麼大一次全部規劃好全切過去,這個風險非常高,不光是技術問題,還涉及到商業問題。

提問:Native 和引擎之間 Bitmap 如何做共享的?

回答:很簡單,它們都在一個進程裡,為什麼不能通信呢?不是物理隔離,而是邏輯隔離,什麼叫邏輯隔離?寫代碼我們在引擎層,引擎很多東西都可以直接去把地址傳過來,如果你在應用層可能做不到,但是Flutter 可以理解為一個小型系統,比如就像你可以改安卓的Framework 和底層的東西,那麼什麼東西改不了呢?

提問:我們現在一個項目兩個平台,您是怎麼解決作為項目當中的一個 Model,但是 Flutter 引用在原生當中,怎麼解決兩個平台的嵌入問題、接入問題?

回答:你問的其實是混合工程的問題。對於老業務改造一定離不開混合工程。混合工程問題,我們也有工具叫 FlutterW,把混合工程一鍵化快速接入,比如我剛才提的容器化都是讓混合工程快速接入的過程。

提問:我有一個比較有意思的問題,我看到 PPT 裡有說你們用了 Web 的東西。我比較好奇的是,這個東西處於一個Build 的階段,之前說這個東西比較傾向做手機端的應用,因為它是比較傾向於做跟移動端一樣的體驗,所以我想知道你們對於用FlutterWseb 是什麼規劃?比如是做成 H5 降級方案嗎?

回答:這個問題問得很好,首先 Flutter for Web 是一個預覽狀態,字節跳動即便是預覽版,也會跟進。剛才展示的是技術跟進,除此之外內地也有一些內部項目落地 Flutter for Web,這是一個技術嘗試。也可以用 Flutter for Web 作為 Fallback 方案,也是一種不錯的備選方案。隨著 Flutter 的發展,相信明年 for Web 會更好。現在主要是安卓、iOS,Web 這個版也要補齊,現在它確實不夠成熟,從內部數據來看現在 Flutter for Web 的性能補 H5 還會差,雖然有一些優化,但還比 H5 差。如果真正用到線上大型應用的話,建議你們觀察一段時間,如果你們團隊人力比較多的話,也可以現在接入去做相應改造。

作者介紹

袁輝輝,字節跳動移動平台部 Flutter 架構師。

本文轉載自公眾號字節跳動技術團隊(ID:toutiaotechblog)。

原文鏈接

https://mp.weixin.qq.com/s/IZ6rUfg3_-zvopc7jZZobg