前言

上一篇文章已經講述了何為小程式，地址如下：

https://blog.csdn.net/double2hao/article/details/80956711

此篇主要講一下其架構設計。

對WebView的優化

傳統的WebView使用過程如下：

從圖中可以看到，傳統的WebView在使用的時候，會有較長時間處於無法操作的狀態。（不一定是白屏，有的可以使用引導圖之類）

小程式主要從以下幾個方面進行了優化：
1、在APP或者說程式啟動的時候就在後臺做完WebView的初始化工作，這樣在使用的時候就可以節省等待初始化的時間。
2、新增了對網路框架的快取功能，這樣在第一次之後載入的時候就不需要重新到網路去下載，直接本地讀取就可以了。
3、使用vue.js框架，將VDom操作與渲染分離。在android native提前啟動JavaScriptCore用來負責VDom的構建和找Diff等工作，而WebView只需要負責渲染即可。這樣在WebView載入其他JS程式碼的時候，JavaScriptCore就可以開始構建VDom。

優化之後的WebView的使用過程如下：

系統架構

下圖摘自github：

上圖摘自官方github開源專案，主要有以下幾個要點：
1、JS程式碼主要有兩個框架JSBridger和VUE。VUE框架負責主要的業務邏輯和介面，JSBridger主要負責與android native的互動。
2、JS執行在android native上，負責VDOM Diff相關工作。WebView則主要只負責渲染。
3、對Webview或者是native UI的事件觸發開源通過JsBridger來與JS進行互動，再而更新WebView或者是native UI。

更多內容可以檢視github官方開源專案：
https://github.com/iqiyi/LiteApp