背景

記一次針對線上微信電競小程序賽事富文本資訊模塊進行優化。

原有的資訊采用管理端富文本編輯保存
HTML 文本，由于小程序提供的 rich-text 組件 無法支持 video 標簽等局限性，在小程序端采用 wxParse 外部開源框架 進行轉換和渲染，通過將后臺 CGI 返回的 HTML 文本 轉換成 JSON 樹再進行模版渲染的方式展示。

由于賽事資訊大部分會包含騰訊視頻，而騰訊視頻播放路徑需要通過騰訊視頻 SDK 將管理端保存資訊的視頻 VID 轉換出來，因此在 wxParse 工作之前，需要解析 HTML 文本 將 VID 轉換成對應的騰訊視頻播放路徑。

在實際體驗中，發現在某些情況下在打開資訊，內容呈現時間（這里的內容呈現時間是指用戶從進入資訊詳情頁拉取到后臺接口返回的文本內容開始到頁面內容呈現到用戶面前之間所需要的時間）會比較慢，因此對其進行了分析優化。

猜測

目前小程序主要跑在Android和iOS端，可能不同的系統性能不一致，導致不同機型設備的內容呈現時間有明顯的性能差異。而另一方面，包含騰訊視頻的資訊，需要通過騰訊視頻SDK走網絡請求進行轉換，因此呈現也可能跟網絡類型相關。

故此，對影響內容呈現時間的因素做了兩點推測：

• 平臺類型
• 網絡類型

數據分析

通過之前在小程序端的性能打點上報，以及部門內部的數據自助平臺提取上報的數據，可以快速地分析到不同機型、不同網絡類型的平均內容呈現時間。

不同平臺類型下的平均內容呈現時間

平臺平均呈現時間(ms)

Android	1084
iOS	961

不同網絡類型下的平均內容呈現時間

網絡類型平均呈現時間(ms)

wifi	937
4G	905
3G	1020
2G	1248

通過數據大概可以看到在 Android 和 iOS 兩大平臺中，平均內容呈現時間相差并不大，iOS 略優于 Android 端。而在網絡情況下，wifi 和 4G 情況相比 3G 和 2G 情況，平均內容呈現時間較短。從數據上看，影響內容呈現時間的主要因素是網絡類型。

邏輯分析

目前微信電競小程序中賽事資訊分為3種：

• 圖文資訊
• 視頻資訊
• 圖文+視頻資訊

由于大部分的賽事資訊在內容中會包含騰訊視頻 (本文也是針對包含視頻內容的資訊進行優化來展開)，而騰訊視頻播放路徑需要通過騰訊視頻 SDK 將管理端保存資訊的視頻 VID 轉換出來，因此在 wxParse 工作之前，需要解析 HTML 文本 將 VID 轉換成對應的騰訊視頻播放路徑。

因此，目前包含視頻的資訊，在完整渲染出來，需要經過以下流程：

其整個過程是一個串行的工作流，下一步的執行需要上一步的結果輸出之后才能執行，因此內容呈現時間可以由下面公式算出：

內容呈現時間 = 騰訊視頻 VID 轉換 URL 所需時間 + HTML 文本轉換 JSON 結構所需時間 + JSON 結構模版渲染所需時間

通過對現網的上報數據進行分析，發現 騰訊視頻 VID 轉換 URL 和 JSON 結構模版渲染 這兩部分所需要時間比較長。從上面的數據上報分析，也驗證了影響頁面呈現時間的主要因素是騰訊視頻 VID 轉換 URL這一過程這一結論。

優化方案

既然視頻資訊在解析渲染是一個串行的工作流，那么我們想辦法將這個工作流搞成并行的，不就可以節省一部分時間？可以很容易發現，騰訊視頻 VID 轉換 URL 這一步驟可以在小程序進行模版渲染的時候，同時進行處理。

小程序的邏輯層和渲染層是分開的兩個線程

因此，通過此方案優化后，頁面的呈現時間可以由下面公式算出：

內容呈現時間 = HTML 文本轉換 JSON 結構所需時間 + Max（騰訊視頻 VID 轉換 URL 所需時間, JSON 結構模版渲染所需時間）

在實際優化過程中，對 wxParse 進行了改造優化，改造成小程序自定義組件，加上對騰訊視頻解析的優化，也剔除了對業務內不需要用到的特性（比如 wxParse 對表情 Emoli 處理）。

優化效果

平臺平均呈現時間(ms)

Android	766
iOS	613

可以對比之前的內容呈現時間，在Android 和 iOS上 可以優化300-400ms之內，小小的優化，卻是需要做大量的功課。

最后，想體驗的可以掃以下小程序碼：

總結

以上是生活随笔為你收集整理的记一次小程序富文本的小小优化的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。