记一次小程序富文本的小小优化

背景

记一次针对线上微信电竞小程序赛事富文本资讯模块进行优化。

原有的资讯采用管理端富文本编辑保存
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以内，小小的优化，倒是须要作大量的功课。

最后，想体验的能够扫如下小程序码：