背景

記一次針對線上微信電競小程序賽事富文本資訊模塊進(jìn)行優(yōu)化。

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

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

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

猜測

目前小程序主要跑在Android和iOS端，可能不同的系統(tǒng)性能不一致，導(dǎo)致不同機(jī)型設(shè)備的內(nèi)容呈現(xiàn)時間有明顯的性能差異。而另一方面，包含騰訊視頻的資訊，需要通過騰訊視頻SDK走網(wǎng)絡(luò)請求進(jìn)行轉(zhuǎn)換，因此呈現(xiàn)也可能跟網(wǎng)絡(luò)類型相關(guān)。

故此，對影響內(nèi)容呈現(xiàn)時間的因素做了兩點(diǎn)推測：

• 平臺類型
• 網(wǎng)絡(luò)類型

數(shù)據(jù)分析

通過之前在小程序端的性能打點(diǎn)上報，以及部門內(nèi)部的數(shù)據(jù)自助平臺提取上報的數(shù)據(jù)，可以快速地分析到不同機(jī)型、不同網(wǎng)絡(luò)類型的平均內(nèi)容呈現(xiàn)時間。

不同平臺類型下的平均內(nèi)容呈現(xiàn)時間

平臺平均呈現(xiàn)時間(ms)

Android	1084
iOS	961

不同網(wǎng)絡(luò)類型下的平均內(nèi)容呈現(xiàn)時間

網(wǎng)絡(luò)類型平均呈現(xiàn)時間(ms)

wifi	937
4G	905
3G	1020
2G	1248

通過數(shù)據(jù)大概可以看到在 Android 和 iOS 兩大平臺中，平均內(nèi)容呈現(xiàn)時間相差并不大，iOS 略優(yōu)于 Android 端。而在網(wǎng)絡(luò)情況下，wifi 和 4G 情況相比 3G 和 2G 情況，平均內(nèi)容呈現(xiàn)時間較短。從數(shù)據(jù)上看，影響內(nèi)容呈現(xiàn)時間的主要因素是網(wǎng)絡(luò)類型。

邏輯分析

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

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

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

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

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

內(nèi)容呈現(xiàn)時間 = 騰訊視頻 VID 轉(zhuǎn)換 URL 所需時間 + HTML 文本轉(zhuǎn)換 JSON 結(jié)構(gòu)所需時間 + JSON 結(jié)構(gòu)模版渲染所需時間

通過對現(xiàn)網(wǎng)的上報數(shù)據(jù)進(jìn)行分析，發(fā)現(xiàn) 騰訊視頻 VID 轉(zhuǎn)換 URL 和 JSON 結(jié)構(gòu)模版渲染 這兩部分所需要時間比較長。從上面的數(shù)據(jù)上報分析，也驗證了影響頁面呈現(xiàn)時間的主要因素是騰訊視頻 VID 轉(zhuǎn)換 URL這一過程這一結(jié)論。

優(yōu)化方案

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

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

因此，通過此方案優(yōu)化后，頁面的呈現(xiàn)時間可以由下面公式算出：

內(nèi)容呈現(xiàn)時間 = HTML 文本轉(zhuǎn)換 JSON 結(jié)構(gòu)所需時間 + Max（騰訊視頻 VID 轉(zhuǎn)換 URL 所需時間, JSON 結(jié)構(gòu)模版渲染所需時間）

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

優(yōu)化效果

平臺平均呈現(xiàn)時間(ms)

Android	766
iOS	613

可以對比之前的內(nèi)容呈現(xiàn)時間，在Android 和 iOS上 可以優(yōu)化300-400ms之內(nèi)，小小的優(yōu)化，卻是需要做大量的功課。

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。