记一次小程序富文本的小小优化
背景
记一次针对线上微信电竞小程序赛事富文本资讯模块进行优化。
原有的资讯采用管理端富文本编辑保存
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之内,小小的优化,却是需要做大量的功课。
最后,想体验的可以扫以下小程序码:
记一次小程序富文本的小小优化相关推荐
- 微信小程序富文本修改图片的大小
一.先言 有时后端直接返回的富文本内容,前端展示的时候会出现图片太大或太小,所以需要处理一下,,,实现并不难,主要是利用replace方法全局替换图片img标签的style样式,修改其宽度样式. 二. ...
- 小程序 富文本自适应屏幕_自适应文本:跨屏幕尺寸构建可读文本
小程序 富文本自适应屏幕 Many of you may already know about responsive web design. Cited from Wikipedia, respons ...
- layui获取select 文本_小程序富文本编辑器editor初体验
终于,微信在5月9号的v2.7.0版本中新增了 editor富文本编辑器组件,今天有时间了准备体验一下 在5月6日的时候写了一篇小程序富文本解析的「伪需求」,从wxParse到towxml的坑,当时还 ...
- 微信小程序富文本处理
微信小程序富文本处理 wxml页面代码: <rich-text nodes ="{{content.content}}"></rich-text> ts代码 ...
- 微信小程序富文本编辑器获取内容
1.新建wxParse文件夹 里面的结构是这样:wxParse :{ emojis (文件夹) html2json.js (文件) htmlparser.js(文件) showdown.js (文件) ...
- 微信小程序 富文本组件使用
能够使用微信小程序提供的富文本组件及引入的第三方富文本组件 掌握使用微信小程序的表单组件 掌握使用微信小程序的form表单及如何提交数据 掌握使用微信小程序的导航及跳转组件 一.基础内容组件 1.1 ...
- 微信小程序富文本渲染(rich-text)换行失效
微信小程序富文本渲染(rich-text)换行失效 给rich-text标签加css 样式 white-space: pre;
- 小程序 html编辑器,小程序富文本编辑器editor初体验
终于,微信在5月9号的v2.7.0版本中新增了 editor富文本编辑器组件,今天有时间了准备体验一下 在5月6日的时候写了一篇小程序富文本解析的「伪需求」,从wxParse到towxml的坑,当时还 ...
- 小程序富文本解析利器mp-html
微慕小程序是资讯.媒体类小程序,因为对富文本内容和媒体内容的显示有较高的需求.对于富文本解析,微慕小程序以前采用的开源的wxParse组件,不过wxParse组件存在很多的问题且已经停止维护支持,随着 ...
最新文章
- 函数图像轻松画:教你用永中图象
- php限定名称写法,php命名空间:非限定名称、限定名称、完全限定名称实例详解...
- SSH框架搭建 笔记 (含spring注解驱动)
- 【效率】再见 Typora,这款 Markdown 编辑器开源又免费!
- 学java教程之String类
- product category no need to optimize
- file_put_contents()写入数组
- 数字接口系列文章:SPI 总线
- 【maven】配置ali镜像
- RIFF和WAVE音频文件格式
- SpringBoot启动后启动内嵌浏览器
- Python处理txt文件
- mysql键值_如何在MySQL中存储键值对?
- 四川山海蓝图抖音播放量
- Oracle学习(八)——————————————子查询
- android 音频切换分析,Android音频可视化操作
- 少年五年升阿里 P8,他如何从低谷登上“光明顶”?
- 五种常见的计算机高级语言,[转]计算机语言的种类总结
- 【模板篇】splay(填坑)+模板题(普通平衡树)
- APT污水 - 使用多阶段高度混淆的PowerShell在内存中运行