2020 年 11 月 16 日，Google 開發(fā)者大會 (Google Developer Summit) 在線上舉行。本次大會以“代碼不止”為主題，全面介紹了產(chǎn)品更新以及一系列面向本地開發(fā)者的技術(shù)支持內(nèi)容。11 月 18 日，進行了以 Flutter 為主題的演講，本文重點關(guān)注了 Flutter 性能方面的進展以及一些新功能。
Flutter 性能進展
2019 下半年，共收到 23 個量化的性能提升；2020 上半年，共收到 27 個量化的性能提升。2020 上半年共收到來自 78 位開發(fā)者的 49 個性能改進。
工具的性能十分重要，性能測試也同樣至關(guān)重要，擁有良好的性能測試可以：
- 快速重現(xiàn)問題；
- 迭代和驗證解決方案；
- 提供數(shù)據(jù)，激勵進一步的工作并防止倒退。
能耗與速度相關(guān)，每一幀渲染時間越長，能耗就越高，但能耗并不等于速度，因為在某些情況下，渲染速度快可能會導(dǎo)致能耗升高；渲染速度慢也可能不耗能。
- CPU 上運行時間雖然短，但由于新的算法利用了更多的 GPU 核心，所以 GPU 能耗反而增加；
- 有些 CPU 上的任務(wù)被別的 I/O 或 GPU 任務(wù)阻塞，進行了長時間的等待，而等待的時間內(nèi)并無過多能耗。
因此，在速度之外增加的能耗測試是十分必要的。因為 Flutter 團隊在 GitHub 上收到的大部分能耗問題都和 iOS 相關(guān)，所以，此次 Flutter 首先加入了 iOS 的能耗測試，Android 的能耗測試工具會于后續(xù)加入。
開發(fā)者可以使用 Flutter Gallery App 在 Timeline 中查看 CPU/GPU 的使用率，也可以用集成測試自動檢測 CPU/GPU 的使用率。
Flutter 還新加入了 SkSL 著色器編譯預(yù)熱功能，來幫助開發(fā)者消除著色器編譯卡頓。
如果一個 Flutter 程序第一次渲染某類動畫時出現(xiàn)明顯的卡頓，但是之后渲染這些動畫時，卡頓完全消失，那么這就很可能是著色器編譯卡頓。開發(fā)者可以使用 –trace-skia，然后檢查 Timeline 來確認是否為著色器卡頓。
值得一提的是，SkSL 可以實現(xiàn)自動化生成與測試，這對于需要持續(xù)更新的 Flutter App 來說，可以節(jié)省很多的人力。
內(nèi)存和包體積的測試工具
此次，F(xiàn)lutter 團隊更新了 Dart 開發(fā)工具。Dart 開發(fā)工具是面向 Flutter 和 Dart 開發(fā)人員的工具套件，其中包括：
- 布局檢查（Inspector）
- 性能調(diào)試（Performance）
- 內(nèi)存調(diào)試（Memory）
- 網(wǎng)絡(luò)調(diào)試（Network）
- 包體積調(diào)試（App Size）
- 調(diào)試器（Debugger）
- 日志（Logging）
內(nèi)存調(diào)試器功能
- 事件窗格（Dart 和 Android 內(nèi)存）
- 手動和自動快照（snapshot）和垃圾回收（GC）
- 內(nèi)存分析
- 內(nèi)存堆分配累加器（Heap Allocation Accumulators）
- 通過命令行界面將內(nèi)存統(tǒng)計信息到處到 JSON 文件
內(nèi)存測試
- 通過 ADB 交互直接進行內(nèi)存測試
- Dart 開發(fā)工具內(nèi)存測試
- iOS 內(nèi)存測試
更多信息可以通過這篇由 Flutter 工程師撰寫的文章進行了解。
包體積調(diào)試器功能
- 可視化了應(yīng)用程序的總大小，包括功能級別的 Dart AOT 快照；
- 分析快照和應(yīng)用包（APK，IPA 等）；
- 分析快照或應(yīng)用程序包（APK，IPA 等）的差異；
- 查看軟件包級別的應(yīng)用大小歸因數(shù)據(jù)。
CSS Grid
前端開發(fā)者往往會因為一些問題而感到困擾：設(shè)置布局以及讓外觀以你所希望的方式呈現(xiàn)?，F(xiàn)在，前端開發(fā)者不再需要頭痛這些問題了，也不需要 CSS 過濾器這種復(fù)雜的解決手段。CSS Grid 可以同時用于水平和垂直布局設(shè)置，這意味著開發(fā)者現(xiàn)在可以通過使用 CSS Grid 實現(xiàn)許多強大的功能，從元素居中到創(chuàng)建強大的全頁面布局，都只需一行代碼即可完成。
Super Centered
它可以解決 CSS 中最大的問題：元素居中對齊。只需要將“display”設(shè)置為“gird”，即可進入網(wǎng)格模式，然后通過一行代碼：
place-items:center;
即可解決元素居中上遇到的問題。
Pancake Stack
可用于創(chuàng)建常用的頁眉頁腳和主體布局，同樣地，先將“display”設(shè)置為“gird”，然后通過一行代碼：
grid-template-rows: auto 1fr auto;
其中“grid-template-rows”用來設(shè)置父區(qū)域布局中行的大小，而后面的“auto”的含義是，對于自動放置的行，即自動調(diào)整大小的行，我們將使用最少內(nèi)容的大小，在這種情況下就是內(nèi)容的最小高度，這樣可以使內(nèi)容剛好放入該布局的空間內(nèi)；“1fr”的含義是，我們希望用父區(qū)域剩余空間的一等份單位來容納第二行。這樣的做法會使界面變得十分整潔，開發(fā)者可以利用自動值和等份單位非常方便地設(shè)置頁眉頁腳和主體區(qū)域。
Classic Holy Grail Layout
上面所提到的“auto 1fr auto”，既可用于行，也可以用于列。通過這一功能，我們可以將頁面中除頁眉和頁腳的部分再分為三份，左右兩邊的區(qū)域依舊會根據(jù)內(nèi)容自動分配空間大小。而在主體內(nèi)容區(qū)添加內(nèi)容時，空間大小保持不變。只需要一行代碼即可創(chuàng)建全頁面、自適應(yīng)、可調(diào)整的流暢布局：
grid-template: auto 1fr auto / auto 1fr auto;
12-Span Grid
設(shè)置布局的另一種方法是使用網(wǎng)格，12-Span 的布局一直很受歡迎?，F(xiàn)在，只需要一行代碼即可實現(xiàn)這一切：
grid-template-columns: repeat ( 12 , 1fr );
其中，我們使用了 repeat 函數(shù)，這樣就不需要重復(fù)寫 12 次 1fr，而是用“( 12 , 1fr )”來創(chuàng)建一個有 12 個 span 網(wǎng)格，每段網(wǎng)格具有相同單位值，均為空間的一等份單位。
演講者介紹
李宇騫，Google 軟件工程師。
李宇騫是 Flutter 團隊的一位軟件工程師，主要專注于提升其性能。他畢業(yè)于清華大學計算機系本科，杜克大學計算機系博士。在加入 Flutter 前，他發(fā)明了一個新的矢量圖形抗鋸齒算法，顯著提升了其速度和順滑程度，并將其應(yīng)用于 Flutter, Android, Chrome 等程序的2D 圖像渲染引擎 Skia 中。
侯悠揚，F(xiàn)lutter 用戶體驗研究員。
侯悠揚于2017年加入 Google，并于2019年加入 Flutter 團隊。她是 Flutter 團隊一名用戶體驗研究員，關(guān)注提升 Flutter 產(chǎn)品和開發(fā)工具的程序員體驗。加入 Flutter 團隊之前她任職于 Google Cloud 團隊，并在密歇根大學獲得人機交互博士。
Una Kravets，Google 開發(fā)技術(shù)推廣工程師。
延伸閱讀：
關(guān)注我并轉(zhuǎn)發(fā)此篇文章，私信我“領(lǐng)取資料”，即可免費獲得InfoQ價值4999元迷你書，點擊文末「了解更多」，即可移步InfoQ官網(wǎng)，獲取最新資訊～
版權(quán)聲明：本文內(nèi)容由互聯(lián)網(wǎng)用戶自發(fā)貢獻，該文觀點僅代表作者本人。本站僅提供信息存儲空間服務(wù)，不擁有所有權(quán)，不承擔相關(guān)法律責任。如發(fā)現(xiàn)本站有涉嫌抄襲侵權(quán)/違法違規(guī)的內(nèi)容， 請發(fā)送郵件至 舉報，一經(jīng)查實，本站將立刻刪除。