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

背景

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

原有的资讯采用管理端富文本编辑保存
HTML 文本，由于小程序提供的 rich-text 组件无法支持 video 标签等局限性，在小程序端采用 wxParse 外部开源框架进行转换和渲染，通过将后台 CGI 返回的 HTML 文本转换成 JSON 树再进行模版渲染的方式展示。

由于赛事资讯大部分会包含腾讯视频，而腾讯视频播放路径需要通过腾讯视频 SDK 将管理端保存资讯的视频 VID 转换出来，因此在 wxParse 工作之前，需要解析 HTML 文本将 VID 转换成对应的腾讯视频播放路径。

在实际体验中，发现在某些情况下在打开资讯，内容呈现时间（这里的内容呈现时间是指用户从进入资讯详情页拉取到后台接口返回的文本内容开始到页面内容呈现到用户面前之间所需要的时间）会比较慢，因此对其进行了分析优化。

目前小程序主要跑在Android和iOS端，可能不同的系统性能不一致，导致不同机型设备的内容呈现时间有明显的性能差异。而另一方面，包含腾讯视频的资讯，需要通过腾讯视频SDK走网络请求进行转换，因此呈现也可能跟网络类型相关。

故此，对影响内容呈现时间的因素做了两点推测：

通过之前在小程序端的性能打点上报，以及部门内部的数据自助平台提取上报的数据，可以快速地分析到不同机型、不同网络类型的平均内容呈现时间。

不同平台类型下的平均内容呈现时间

平台	平均呈现时间(ms)
Android	1084
iOS	961

不同网络类型下的平均内容呈现时间

通过数据大概可以看到在 Android 和 iOS 两大平台中，平均内容呈现时间相差并不大，iOS 略优于 Android 端。而在网络情况下，wifi 和 4G 情况相比 3G 和 2G 情况，平均内容呈现时间较短。从数据上看，影响内容呈现时间的主要因素是网络类型。

目前微信电竞小程序中赛事资讯分为3种：

由于大部分的赛事资讯在内容中会包含腾讯视频 (本文也是针对包含视频内容的资讯进行优化来展开)，而腾讯视频播放路径需要通过腾讯视频 SDK 将管理端保存资讯的视频 VID 转换出来，因此在 wxParse 工作之前，需要解析 HTML 文本将 VID 转换成对应的腾讯视频播放路径。

因此，目前包含视频的资讯，在完整渲染出来，需要经过以下流程：

视频资讯渲染流程

其整个过程是一个串行的工作流，下一步的执行需要上一步的结果输出之后才能执行，因此内容呈现时间可以由下面公式算出：

内容呈现时间 = 腾讯视频 VID 转换 URL 所需时间 + HTML 文本转换 JSON 结构所需时间 + JSON 结构模版渲染所需时间

通过对现网的上报数据进行分析，发现 腾讯视频 VID 转换 URL 和 JSON 结构模版渲染 这两部分所需要时间比较长。从上面的数据上报分析，也验证了影响页面呈现时间的主要因素是腾讯视频 VID 转换 URL这一过程这一结论。

全平台3个步骤平均渲染时间分布

既然视频资讯在解析渲染是一个串行的工作流，那么我们想办法将这个工作流搞成并行的，不就可以节省一部分时间？可以很容易发现，腾讯视频 VID 转换 URL 这一步骤可以在小程序进行模版渲染的时候，同时进行处理。

小程序的逻辑层和渲染层是分开的两个线程

优化方案

因此，通过此方案优化后，页面的呈现时间可以由下面公式算出：

内容呈现时间 = HTML 文本转换 JSON 结构所需时间 + Max（腾讯视频 VID 转换 URL 所需时间, JSON 结构模版渲染所需时间）

在实际优化过程中，对 wxParse 进行了改造优化，改造成小程序自定义组件，加上对腾讯视频解析的优化，也剔除了对业务内不需要用到的特性（比如 wxParse 对表情 Emoli 处理）。

平台	平均呈现时间(ms)
Android	766
iOS	613

可以对比之前的内容呈现时间，在Android 和 iOS上可以优化300-400ms之内，小小的优化，却是需要做大量的功课。

最后，想体验的可以扫以下小程序码：

微信电竞