2020 年 11 月 16 日，Google 開發(fā)者大會 (Google Developer Summit) 在線上舉行。本次大會以“代碼不止”為主題，全面介紹了產(chǎn)品更新以及一系列面向本地開發(fā)者的技術(shù)支持內(nèi)容。11 月 18 日，進(jìn)行了以 Flutter 為主題的演講，本文重點(diǎn)關(guān)注了 Flutter 性能方面的進(jìn)展以及一些新功能。

Flutter 性能進(jìn)展

2019 下半年，共收到 23 個量化的性能提升；2020 上半年，共收到 27 個量化的性能提升。2020 上半年共收到來自 78 位開發(fā)者的 49 個性能改進(jìn)。

工具的性能十分重要，性能測試也同樣至關(guān)重要，擁有良好的性能測試可以：

1. 快速重現(xiàn)問題；
2. 迭代和驗(yàn)證解決方案；
3. 提供數(shù)據(jù)，激勵進(jìn)一步的工作并防止倒退。

能耗與速度相關(guān)，每一幀渲染時間越長，能耗就越高，但能耗并不等于速度，因?yàn)樵谀承┣闆r下，渲染速度快可能會導(dǎo)致能耗升高；渲染速度慢也可能不耗能。

1. CPU 上運(yùn)行時間雖然短，但由于新的算法利用了更多的 GPU 核心，所以 GPU 能耗反而增加；
2. 有些 CPU 上的任務(wù)被別的 I/O 或 GPU 任務(wù)阻塞，進(jìn)行了長時間的等待，而等待的時間內(nèi)并無過多能耗。

因此，在速度之外增加的能耗測試是十分必要的。因?yàn)?Flutter 團(tuán)隊(duì)在 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 來確認(rèn)是否為著色器卡頓。

值得一提的是，SkSL 可以實(shí)現(xiàn)自動化生成與測試，這對于需要持續(xù)更新的 Flutter App 來說，可以節(jié)省很多的人力。

內(nèi)存和包體積的測試工具

此次，F(xiàn)lutter 團(tuán)隊(duì)更新了 Dart 開發(fā)工具。Dart 開發(fā)工具是面向 Flutter 和 Dart 開發(fā)人員的工具套件，其中包括：

1. 布局檢查（Inspector）
2. 性能調(diào)試（Performance）
3. 內(nèi)存調(diào)試（Memory）
4. 網(wǎng)絡(luò)調(diào)試（Network）
5. 包體積調(diào)試（App Size）
6. 調(diào)試器（Debugger）
7. 日志（Logging）

內(nèi)存調(diào)試器功能

1. 事件窗格（Dart 和 Android 內(nèi)存）
2. 手動和自動快照（snapshot）和垃圾回收（GC）
3. 內(nèi)存分析
4. 內(nèi)存堆分配累加器（Heap Allocation Accumulators）
5. 通過命令行界面將內(nèi)存統(tǒng)計(jì)信息到處到 JSON 文件

內(nèi)存測試

1. 通過 ADB 交互直接進(jìn)行內(nèi)存測試
2. Dart 開發(fā)工具內(nèi)存測試
3. iOS 內(nèi)存測試

更多信息可以通過這篇由 Flutter 工程師撰寫的文章進(jìn)行了解。

包體積調(diào)試器功能

1. 可視化了應(yīng)用程序的總大小，包括功能級別的 Dart AOT 快照；
2. 分析快照和應(yīng)用包（APK，IPA 等）；
3. 分析快照或應(yīng)用程序包（APK，IPA 等）的差異；
4. 查看軟件包級別的應(yīng)用大小歸因數(shù)據(jù)。

CSS Grid

前端開發(fā)者往往會因?yàn)橐恍﹩栴}而感到困擾：設(shè)置布局以及讓外觀以你所希望的方式呈現(xiàn)。現(xiàn)在，前端開發(fā)者不再需要頭痛這些問題了，也不需要 CSS 過濾器這種復(fù)雜的解決手段。CSS Grid 可以同時用于水平和垂直布局設(shè)置，這意味著開發(fā)者現(xiàn)在可以通過使用 CSS Grid 實(shí)現(xiàn)許多強(qiáng)大的功能，從元素居中到創(chuàng)建強(qiáng)大的全頁面布局，都只需一行代碼即可完成。

Super Centered

它可以解決 CSS 中最大的問題：元素居中對齊。只需要將“display”設(shè)置為“gird”，即可進(jìn)入網(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 的布局一直很受歡迎。現(xiàn)在，只需要一行代碼即可實(shí)現(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 團(tuán)隊(duì)的一位軟件工程師，主要專注于提升其性能。他畢業(yè)于清華大學(xué)計(jì)算機(jī)系本科，杜克大學(xué)計(jì)算機(jī)系博士。在加入 Flutter 前，他發(fā)明了一個新的矢量圖形抗鋸齒算法，顯著提升了其速度和順滑程度，并將其應(yīng)用于 Flutter, Android, Chrome 等程序的2D 圖像渲染引擎 Skia 中。

侯悠揚(yáng)，F(xiàn)lutter 用戶體驗(yàn)研究員。

侯悠揚(yáng)于2017年加入 Google，并于2019年加入 Flutter 團(tuán)隊(duì)。她是 Flutter 團(tuán)隊(duì)一名用戶體驗(yàn)研究員，關(guān)注提升 Flutter 產(chǎn)品和開發(fā)工具的程序員體驗(yàn)。加入 Flutter 團(tuán)隊(duì)之前她任職于 Google Cloud 團(tuán)隊(duì)，并在密歇根大學(xué)獲得人機(jī)交互博士。

Una Kravets，Google 開發(fā)技術(shù)推廣工程師。

延伸閱讀：

2020年：前端開發(fā)的痛苦與快樂-InfoQ

關(guān)注我并轉(zhuǎn)發(fā)此篇文章，私信我“領(lǐng)取資料”，即可免費(fèi)獲得InfoQ價值4999元迷你書，點(diǎn)擊文末「了解更多」，即可移步InfoQ官網(wǎng)，獲取最新資訊～