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