作者：閑魚(yú)技術(shù)-君愛(ài)

1. 前言

閑魚(yú)技術(shù)團(tuán)隊(duì)在2018年引入Flutter，目前越來(lái)越多的業(yè)務(wù)場(chǎng)景在Flutter上使用。Flutter的亞秒級(jí)熱重載一直是開(kāi)發(fā)者的神兵利器，提供給開(kāi)發(fā)者快速修改UI，增加功能，修復(fù)bug，不需要重新啟動(dòng)應(yīng)用，即可看到改動(dòng)效果。

熱重載（HotReload）到底是如何實(shí)現(xiàn)的呢？

本文帶你一步步揭開(kāi)Hot Reload神秘面紗。

2. 源碼分析

2.1 FlutterTools調(diào)試

想了解HotReload如何運(yùn)行，首先，我們需要掌握f(shuō)lutter_tools的調(diào)試方法。

我們創(chuàng)建一個(gè)名為fluttertest的簡(jiǎn)單flutter項(xiàng)目作為例子。

<img src='http://gw.alicdn.com/mt/TB1Fu3biCzqK1RjSZFpXXakSXXa-1820-798.png' width='80%'></img>

使用AndroidStudio打開(kāi)flutter_tools(/flutter/packages/flutter_tools)，斷點(diǎn)設(shè)置為HotRunner.restart()方法

<img src='http://gw.alicdn.com/mt/LB1op__iCzqK1RjSZPcXXbTepXa-2532-1576.jpg' width='80%'></img>

添加新的Debug Configurations，woking directory設(shè)置為fluttertest項(xiàng)目地址

<img src='http://gw.alicdn.com/mt/TB1yXZbiwTqK1RjSZPhXXXfOFXa-2142-1446.jpg' width='80%'></img>

觸發(fā)flutter_tools debug按鈕，待app啟動(dòng)后，簡(jiǎn)單改動(dòng)fluttertest代碼

<img src='http://gw.alicdn.com/mt/TB1PtwbipzqK1RjSZFvXXcB7VXa-1884-820.png' width='80%'></img>

在flutter_tools Debug Console中輸入r，開(kāi)始調(diào)試。

<img src='http://gw.alicdn.com/mt/LB1rHIsixYaK1RjSZFnXXa80pXa-2532-1576.jpg' width='80%'></img>

斷點(diǎn)成功！

2.1 HotReload基本流程

那么HotReload如何運(yùn)行呢？

當(dāng)我們使用運(yùn)行HotReload，無(wú)論是通過(guò)控制臺(tái)輸入r啟動(dòng)，或是點(diǎn)擊閃電運(yùn)行，最終是運(yùn)行flutter_tools中的HotRunner.restart(fullRestart: false)方法（上文斷點(diǎn)處）。

restart()方法中，調(diào)用了_reloadSources(pause: pauseAfterRestart)，正是HotReload的主要代碼之處。

（源碼位于/flutter/packages/flutter_tools/lib/src/run_hot.dart）

Future<OperationResult> _reloadSources({ bool pause = false }) 

<img src='http://gw.alicdn.com/mt/TB1Qe3hisfpK1RjSZFOXXa6nFXa-895-477.png' width='80%'></img>

_reloadSources方法中：

1. 首先_updateDevFS()會(huì)將工程中文件逐一掃描，檢查是否有刪除、新增或者改動(dòng)，掃描完成后，生成kernel files，命名為app.dill.incremental.dill文件，通過(guò)HTTP端口發(fā)送給DartVM;
2. 將掃描生成的.dill文件路徑，通過(guò)RPC接口調(diào)用_reloadSources，進(jìn)行資源加載；
3. 確認(rèn)VM資源重載成功，將FlutterDevice UI線程重置，通過(guò)RPC接口，觸發(fā)flutter widgets樹(shù)重建、重繪

理解這個(gè)流程，前提需要明確Flutter的編譯模式。

編譯模式大體可以分為兩種，AOT編譯與JIT編譯。JIT全稱是Just In Time，代碼可以在程序執(zhí)行時(shí)期編譯，因?yàn)橐诔绦驁?zhí)行前進(jìn)行分析、編譯，JIT編譯可能會(huì)導(dǎo)致程序執(zhí)行時(shí)間較慢；而AOT編譯，全稱Ahead Of Time，是在程序運(yùn)行前就已經(jīng)編譯，從開(kāi)發(fā)者修改代碼、編譯較慢，但運(yùn)行時(shí)不需要進(jìn)行分析、編譯，因此執(zhí)行速度更快。

Flutter使用了獨(dú)特的編譯模式，開(kāi)發(fā)階段下，使用Kernel Snapshot模式(對(duì)應(yīng)JIT編譯)，將dart代碼生成標(biāo)記化的源代碼，運(yùn)行時(shí)編譯，解釋執(zhí)行；release階段，ios使用AOT編譯，編譯器將dart代碼生成匯編代碼，最終生成app.framwork，android使用了Core JIT編譯，dart轉(zhuǎn)化為二進(jìn)制模式，在VM啟動(dòng)前載入。

因此，基于開(kāi)發(fā)階段的Kernel Snapshot編譯模式下，我們可以得知Hot Reload掃描項(xiàng)目文件，將有改動(dòng)的dart文件轉(zhuǎn)化為標(biāo)記化源代碼kernel files，發(fā)送到正在運(yùn)行的DartVM，DartVM替換資源，然后通知Flutter Framework重建、重新布局、重新繪制WidgetsTree，即可看到改動(dòng)效果。

到這里，我們已經(jīng)了解HotReload基本運(yùn)行流程，但app.dill.incremental.dill是怎樣的文件，又怎么和舊文件替換的呢？

2.2 增量代碼掃描

在啟動(dòng)應(yīng)用后，啟動(dòng)HotReload之前，編譯成功后，項(xiàng)目目錄/fluttertest/build文件中，自動(dòng)生成了app.dill文件。
<img src='http://gw.alicdn.com/mt/TB1ivkdiwHqK1RjSZFPXXcwapXa-1374-592.jpg' width='100%'></img>
通過(guò)strings命令解析，發(fā)現(xiàn)是標(biāo)記化的源代碼。

<img src='http://gw.alicdn.com/mt/TB16SZhiwHqK1RjSZFEXXcGMXXa-1134-772.jpg' width='80%'></img>

(篇幅較長(zhǎng)，只截取了一部分)

同時(shí)，通過(guò)adb shell檢查，發(fā)現(xiàn)設(shè)備中/data/data/com.loommo.fluttertest/com.loommo.fluttertest/app_flutter/flutter_assets下，生成三個(gè)文件；
<img src='http://gw.alicdn.com/mt/TB16ZEdizDpK1RjSZFrXXa78VXa-1188-82.jpg' width='80%'></img>

其中，kernel_blob.bin通過(guò)strings命令解析，發(fā)現(xiàn)內(nèi)容與app.dill一致；
<img src='http://gw.alicdn.com/mt/TB1E5ofipzqK1RjSZFCXXbbxVXa-1616-850.jpg' width='80%'></img>

首次啟動(dòng)應(yīng)用后，生成的業(yè)務(wù)代碼文件app.dill，在設(shè)備上體現(xiàn)為kernel_blob.bin；

我們啟動(dòng)HotReload，_updateDevFS()這一步驟執(zhí)行完畢后，

（源碼位于/flutter/packages/flutter_tools/lib/src/devfs.dart）

Future<int> update({@required String mainPath,String target,AssetBundle bundle,DateTime firstBuildTime,bool bundleFirstUpload = false,bool bundleDirty = false,Set<String> fileFilter,@required ResidentCompiler generator,String dillOutputPath,bool fullRestart = false,String projectRootPath,@required String pathToReload,}) 

檢查項(xiàng)目，可以發(fā)現(xiàn)項(xiàng)目目錄/fluttertest/build/下新增了app.dill.incremental.dill文件，通過(guò)strings命令解析后，發(fā)現(xiàn)正是我們所改動(dòng)的文件。

<img src='http://gw.alicdn.com/mt/TB1tgkgiCzqK1RjSZFjXXblCFXa-1374-738.png' width='80%'></img>

同時(shí)，通過(guò)adb shell檢查，發(fā)現(xiàn)設(shè)備中/data/data/com.loommo.fluttertest/cache/fluttertestYAYDGJ/fluttertest/lib下，也增加了一個(gè)main.dart.incremental.dill
，通過(guò)strings命令解析。

<img src='http://gw.alicdn.com/mt/TB1nR7fisbpK1RjSZFyXXX_qFXa-1370-732.png' width='80%'></img>

果然，與app.dill.incremental.dill內(nèi)容一致。

而/data/data/com.loommo.fluttertest/com.loommo.fluttertest/app_flutter/flutter_assets/kernel_blob.bin 沒(méi)有改變。

上文中可以知道Flutter Tools生成app.dill.incremental.dill文件后，通過(guò)RPC調(diào)用_reloadSources，實(shí)際觸發(fā)的是，F(xiàn)lutter Engine中DartVM Reload方法，該方法中，對(duì).incremental.dill進(jìn)行增量編譯。

(源碼位于/engine/src/third_party/dart/runtime/vm/isolate_reload.cc)

void IsolateReloadContext::Reload(bool force_reload,const char* root_script_url,const char* packages_url_) 

有興趣的同學(xué)可以仔細(xì)閱讀源碼。

2.3 WidgetsTree重建

從上文我們可以知道，Hot reload將資源重載完成后，通知flutter framework，觸發(fā)widgets樹(shù)的重新建立、重新布局、重新繪制。

那么，flutter是如何觸發(fā)widgets樹(shù)的重建呢？

Flutter framework中BindingBase注冊(cè)了名為reassemble的Dart VM服務(wù)，用于外部與正在運(yùn)行的Dart VM通信，能夠觸發(fā)根節(jié)點(diǎn)樹(shù)重建操作。

服務(wù)觸發(fā)后，BindingBase.reassembleApplication-> WidgetsBinding. performReassemble -> BuildOwner.reassemble -> Element.reassemble 由根節(jié)點(diǎn)開(kāi)始一步步實(shí)現(xiàn)widgets樹(shù)重建。

（源碼位于/flutter/packages/flutter/lib/src/foundation/binding.dart）

Future<Null> reassembleApplication() 

<img src='http://gw.alicdn.com/mt/TB1bvcvixYaK1RjSZFnXXa80pXa-495-523.png' width='60%'></img>

3. 結(jié)語(yǔ)

Flutter不同于以往Native開(kāi)發(fā)，廣受贊譽(yù)的，其一便是亞秒級(jí)熱重載，理解HotReload的原理，有助于輔助我們?nèi)粘ｉ_(kāi)發(fā)，更為后續(xù)動(dòng)態(tài)化方案提供理論支持。

加入閑魚(yú)，一起玩些“酷”的

閑魚(yú)技術(shù)團(tuán)隊(duì)是一只短小精悍的工程技術(shù)團(tuán)隊(duì)。我們不僅關(guān)注于業(yè)務(wù)問(wèn)題的有效解決，同時(shí)我們?cè)谕苿?dòng)打破技術(shù)棧分工限制（android/iOS/Html5/Server 編程模型和語(yǔ)言的統(tǒng)一）、計(jì)算機(jī)視覺(jué)技術(shù)在移動(dòng)終端上的前沿實(shí)踐工作。作為閑魚(yú)技術(shù)團(tuán)隊(duì)的軟件工程師，您有機(jī)會(huì)去展示您所有的才能和勇氣，在整個(gè)產(chǎn)品的演進(jìn)和用戶問(wèn)題解決中證明技術(shù)發(fā)展是改變生活方式的動(dòng)力。
簡(jiǎn)歷投遞：guicai.gxy@alibaba-inc.com

4. 參考文檔

1. Dart VM服務(wù)協(xié)議
2. 深入理解flutter的編譯原理與優(yōu)化
3. Using Hot Reload
4. 上述使用到的源碼

本頁(yè)內(nèi)容由塔燈網(wǎng)絡(luò)科技有限公司通過(guò)網(wǎng)絡(luò)收集編輯所得，所有資料僅供用戶學(xué)習(xí)參考，本站不擁有所有權(quán)，如您認(rèn)為本網(wǎng)頁(yè)中由涉嫌抄襲的內(nèi)容，請(qǐng)及時(shí)與我們聯(lián)系，并提供相關(guān)證據(jù)，工作人員會(huì)在5工作日內(nèi)聯(lián)系您，一經(jīng)查實(shí)，本站立刻刪除侵權(quán)內(nèi)容。本文鏈接:http://caipiao93.cn/18196.html