T 沙龍移動實踐日總結 ——享物說大流量⼩程序的架構與性能優化方案

PPT 和 視頻

視頻地址
PPT地址

下面是 T 沙龍小編對分享的一些總結：

第一位分享嘉賓是來自享物說的 Rolland Safort（中文名：塞福），目前負責享物說小程序開發工做，有多年前端工做經驗，對前端開發有深刻的理解。他爲你們帶來了享物說團隊小程序開發過程當中積累的一些架構與性能優化方案。

1、小程序簡介

由於在場的同窗有很大一部分是 iOS 和 Android 開發，對 Web 端和小程序開發並非十分了解，因此塞福首先對小程序的基本組成和實現原理進行了簡單的介紹。

微信小程序運行在三端：iOS、Android 和用於調試的開發者工具中。本質上都是經過各個平臺的 WebView 和 JS 解析器來進行渲染和解釋運行。

JavaScript：微信小程序的 JavaScript 運行在微信 App 的上下文中，不能直接操做 DOM，也不能經過 Node.js 相關接口訪問操做系統 API。在 iOS 上，小程序的 JavaScript 代碼是運行在 JavaScriptCore 中；在 Android 上，小程序的 JavaScript 代碼是經過 X5 內核來解析的；在開發工具上，小程序的 JavaScript 代碼是運行在 NW.js （基於 Chromium 和 Node.js 運行，之前也叫 nodeWebkit）上的。 WXML：微信小程序的展現層，是微信本身定義的基於 XML 語法的描述語言。 WXSS：用來修飾 WXML 展現層的樣式，相似 CSS 和 HTML 的關係。WXSS（WeiXin Style Sheets）是一套樣式語言，用於描述 WXML 的組件樣式。WXSS 用來決定 WXML 的組件應該怎麼顯示。WXSS 具備 CSS 大部分特性，對 CSS 進行了擴充以及修改。

小程序的開發當中也有一些注意點須要關注：

1. 小程序發起的都是 HTTPS 網絡請求，在開發調試的過程當中能夠不校驗協議和 TLS 版本，但在實際上線後必須進行 HTTPS 通訊；
2. 微信小程序名稱在賬號信息設置時完成，名稱能夠由中文、數字、英文，長度在 3-20 個字符之間，一箇中文字等於 2 個字符，一旦設置完成後須要修改的話，300 RMB 可修改一次（別問我是怎麼知道的），且有次數限制；
3. 小程序開發完成後打包有大小限制，最大每一個包 2M，最多 4 個包，一些佔包體積較大的資源須要儘可能壓縮。

你們能夠大概想象一下小程序的執行過程：

1. 用戶在微信中點擊、打開某一個小程序；
2. 微信 App 從服務器下載這個小程序包；
3. 微信內置的運行環境分析小程序包獲得應用程序的配置信息加載並運行 app.js；
4. 根據用戶操做進一步響應各類用戶行爲。

2、享物說小程序

享物說小程序是一個比較大型的小程序，由於享物說整個平臺都是小程序起家的，因此小程序承載了享物說平臺的幾乎所有功能，iOS 和 Android 的原生 App 雖然已經發布了一些版本，但還在完善和豐富功能的過程當中。

1. 發展歷史、架構

享物說小程序目前主要經歷過一次大規模的重構，以前的舊版本使用了微信官方的小程序開發框架，而新版採用美團的 mpvue 進行重構，在性能和體驗上有了進一步的提高。

使用 mpvue 主要有如下一些優點：

1. 完全的組件化開發能力，提升代碼複用性；
2. Vuex 數據管理方案，方便構建複雜應用；
3. 快捷的 webpack 構建機制，自定義構建策略、開發階段 hotReload，提高開發效率；
4. 支持使用 npm 外部依賴；
5. 支持 H5 代碼轉換編譯成小程序代碼。

享物說小程序從 2017 年9 月上線，至今已有超過 2000 萬用戶使用，上圖展現了享物說用戶量變化的一個大體趨勢。

2. 埋點、測試、監控

小程序相比原生 App，最顯著的一個特徵就是能夠快速迭代，雖然它的主包發版也須要必定的審覈時間，可是相比原生 App，小程序能夠經過將大部分資源和配置部署到服務器上來實現變相的熱修改 / 熱更新，這爲產品的灰度發佈、BUG 修正、功能開發帶來了極大的便利。

正由於小程序的靈活性給業務帶來的便利性，須要去對它的埋點和檢測進行一個比較好的維護，不只限於小程序的頁面訪問、用戶操做、事件觸發等，還要儘量追蹤每個分享出去的 URL 的傳播軌跡和訪問流量，根據所得數據來進行分析從而爲接下來的業務方向指路。

3、性能與體驗優化

享物說小程序上線至今未滿一年，成長速度能夠用誇張來形容，但令享物說團隊欣喜之餘，帶給他們的還有嚴峻的業務壓力和流量高峯挑戰。

如下這些是享物說團隊的部分小程序優化經驗和建議：

1. 少⽤ setData，若是須要渲染可使⽤用 this.data.key = value；
2. 儘可能使用 CDN，圖片都用懶加載；
3. 使⽤用分包加載；
4. 優化代碼，清理沒有使⽤到的代碼和資源 ，減少包體積；
5. 開發環境添加 ESlint 代碼校驗；
6. 分享圖片及其餘常常變的靜態資源，不能寫死在前端，經過接口動態獲取，減小從新發版的可能性。

4、高可⽤的⼩程序

面對一個用戶量如此大的平臺，傳統的解決方案可能都會有些捉襟見肘，享物說小程序都作了哪些來得到相對穩定的線上運行狀態呢？

1. 超時設置

1. 網絡請求，默認超時時間和最大超時時間都 60s；
2. request、uploadFile、downloadFile 的最大併發限制是 10 個 超出最大併發數的請求，會等待前面的請求完成或者超時。

2. 服務降級

根據後端負載和可⽤情況，結合以前所說的服務分級，把後端 的服務等級作響應的調整。若是服務端負載太重，那麼能夠有 針對地拒絕服務或者關閉服務。高峯期間，對⾮核心業務，超出服務端負 荷的狀況下，能夠考慮暫時關閉服務。

在極端狀況下，能夠考慮僅在 CDN 提供只讀的靜態內容。

3. 服務監控

微信官⽅給⼩程序提供了運維中⼼，在這⾥能夠看到小 程序的近乎實時的運⾏⽇志。若有必要，能夠埋點收集 在異常發⽣時候的⽤戶操做路徑，幫助過後復現問題。

4. Webviews

活動和部分⾮核心業務使⽤ H5 實現，而且經過 WebView 在⼩程序內展現。

五. 總結

享物說小程序上線近一年過程當中最大的問題就是流量壓力致使的性能和穩定性問題，享物說團隊的同窗經過以下一些手段對該問題進行了解決：

1. 使用 mpvue 對整個小程序進行重構；
2. 添加完善的埋點並結合微信提供的運維中心對整個線上運行情況進行完整的監控和管理；
3. 核心業務整理 / 優化，非核心業務 H5 化，必要時非核心業務降級，保證主業務可用性；
4. 資源與配置動態話，實現無需發版的線上熱修改 / 熱更新。