2-孙铁-质量洞察 —— 支付宝小程序质量数字化实践.pdf

《2-孙铁-质量洞察 —— 支付宝小程序质量数字化实践.pdf》由会员分享，可在线阅读，更多相关《2-孙铁-质量洞察 —— 支付宝小程序质量数字化实践.pdf（34页珍藏版）》请在三个皮匠报告上搜索。

1、质量洞察 支付宝小程序质量数字化实践2023 深圳站孙铁（仙林）负责小程序容器渲染引擎及JS引擎质量工作，熟悉浏览器内核原理及测试技术，同时负责小程序体验优化工作，是支付宝开放平台小程序质量类产品“质量洞察”的技术一号位蚂蚁集团 测试开发专家嘉宾照片2023 深圳站目录CONTENTS!#$01%&(02%&)*03%&+,04 Q&A05 2023 深圳站01议题背景2023 深圳站我们面临的问题!#$%!#$%&()*+,-./0()*+,-./0&1212&345345&6&678#$%78#$%&96&96:;=:;=&96&96种类多量级大水平参差不齐2023 深圳站如何解决!#$优

2、化回收激活!%&!#$%!#$%&!&!(!)*+,!%&-.()*+!/0()*+,123456789:;?A!,-!BCDEFGHIJKLMN!#$./012345OPQR%&()%*6789+-./0123456789STUVWXYTZ,!#$!_a=bccdcefghiAjklmnnop?bccdcqrs78tru4(9:(vw!xy2023 深圳站02数据采集2023 深圳站小程序运行时概览01支付宝客户端视角02端-业务服务端视角03支付宝端-服务端视角04服务端-服务端视角用户交互端，体验问题感知层用户交互端，体验问题感知层问题多样，原因复杂问题多样，原因复杂端资源请求端资源请求

3、/request请求请求引发体验问题直接因素引发体验问题直接因素 openAPI/开放能力开放能力引发体验问题直接因素引发体验问题直接因素服务端服务端openAPI/开放能力开放能力引发体验问题间接因素引发体验问题间接因素2023 深圳站资源异常资源异常JS异常异常request异常异常容器可捕获的异常2023 深圳站启动慢启动慢加载异常加载异常弹框报错弹框报错错误页错误页用户可感知的异常2023 深圳站小程序质量指标模型优势：优势：1.准确、客观可度量准确、客观可度量2.根因及解决方案明确根因及解决方案明确3.几乎无额外检测开销几乎无额外检测开销劣势：劣势：1.不不100%反映体验问题反映体

4、验问题2.业务影响未知，认可低业务影响未知，认可低3.不适合做场景准入不适合做场景准入优势：优势：1.明确的用户体感问题明确的用户体感问题2.业务认可度高业务认可度高3.契合研发阶段质量把控契合研发阶段质量把控劣势：劣势：1.检测、度量难检测、度量难/有额外开销有额外开销2.定问题根因、责任方困难定问题根因、责任方困难3.业务影响未知业务影响未知小程序质量标准通用通用业务指标业务指标复访率流失率转化率支付率模型系数稳定性性能启动失败启动慢错误页交互卡顿弹框体验行为动线视觉规范界面错位舆情舆情客诉客诉NPSNPSJS/request异常等5个指标启动耗时等1个指标卡99%/网络错误等17个指标J

5、ST2/FP/FCP等5个指标页面受限/不存在等9个指标流畅度等1个指标弹框/浮层等2个指标页面到达率/停留等11个指标字体/字号/颜色等10个指标元素重叠等1个指标业务异常定位异常/支付异常等8个指标交互异常点击无响应/弹窗等3个指标业界业界WebVitalsRAILFCP/FID/CLS等3个指标R/A/I/L等4个指标综合体验层子感知体验层输入因素层2023 深圳站技术指标采集错误码定义错误码定义一级类目（生命周期）一级类目（生命周期）00 未知阶段01 应用启动02 render03 worker04 页面加载二级类目（业务二级类目（业务/功能域）功能域）0000 未知类型0001 模

6、块类型0002 模块类型三级类目（错误编码）三级类目（错误编码）001 自定义解决的问题解决的问题问题归类排查分析2023 深圳站体感问题检测白屏：白屏：启动过程特定异常启动过程特定异常主文档内无内容节点主文档内无内容节点无渲染帧无渲染帧截图采样分析像素点截图采样分析像素点错误页：错误页：内容节点数较少内容节点数较少渲染帧较少渲染帧较少结合结合NLPNLP语义分析，语义分析，p path/ath/urlurl/class/text/class/text等含特定类型文本等含特定类型文本LoadingLoading异常：异常：加载动画检测加载动画检测整页面加载检测整页面加载检测内联加载检测内联加载

7、检测加载提示检测加载提示检测交互无响应：交互无响应：元素绑定交互事件元素绑定交互事件交互后一定时间内：无交互后一定时间内：无DOMDOM更新、页面跳转更新、页面跳转/关关闭闭/压栈等、无弹框提压栈等、无弹框提示等示等弹层报错：弹层报错：元素绝对定位元素绝对定位屏幕占比达到条件屏幕占比达到条件DOMDOM层级层级结合结合NLPNLP语义分析语义分析2023 深圳站启动链路与用户体感业务资源准备业务资源准备业务渲染耗时业务渲染耗时核心耗时核心耗时应用路由App准备Page准备render初始化Worker初始化首屏准备业务准备请求数据包准备UC初始化包RPC包下载主文档加载JSBridgeAppX

8、生命周期workerworker readyready加载资源逻辑处理首屏渲染哈 啰 出 行LoadingFirst Paint（FP）First Contentful Paint（FCP）First Meaningful Paint（FMP）Time to Interactive（TTI）2023 深圳站启动耗时检测体感耗时起点：用户点击事件体感耗时起点：用户点击事件/扫码跳转扫码跳转逐帧记录逐帧记录webview文本文本+图片渲染面积图片渲染面积回溯文本回溯文本+图片面积最大帧图片面积最大帧计算规则：计算规则：统计每一个渲染帧中图片统计每一个渲染帧中图片+文本的渲染面积文本的渲染面积计算时

9、机：计算时机：利用主进程空闲时进行记录、计算，不影响渲染及交互利用主进程空闲时进行记录、计算，不影响渲染及交互结束条件：结束条件：页面退出页面退出/页面不可见页面不可见/用户有交互用户有交互/超时超时 T2帧：帧：回溯计算图片和文本渲染面积和首次达到最大值的那一帧回溯计算图片和文本渲染面积和首次达到最大值的那一帧2023 深圳站03数据加工2023 深圳站离线大数据诊断2023 深圳站实时诊断-经验库+知识图谱快排定位快排定位-容器异常经验库容器异常经验库容器/前端异常根因编排体验问题经验库错误码细化归因用户行为还原知识图谱知识图谱-经验库迁移经验库迁移图谱建立：simCLR+Bert模型训练

10、：无监督聚类问题特征抽取：提取多模态特征预测根因：经验库迁移2023 深圳站解决方案库示例（包尺寸优化）：沉淀性能/功能/稳定性体验问题解决方案58个通过指标及根因自动匹配解决方案，持续扩展2023 深圳站启动耗时优化方案包下载容器框架初始化业务渲染T2发布2.0分包优化插件懒加载消息订阅apiAI预推CCDN子进程预启webview预启pre renderworker poolappx2.0prerun近端缓存同步转异步工具调试setData优化http2.0资源加速snapshotv8quickjsprefetch2023 深圳站一些启动优化最佳实践!#$JSAPI：JSAPI不是免费的/

11、Sync结尾的同步JSPAI尽量少用/getSystemInfo、getAuthCode、getCurrentLocation等高耗时JSAPI不要重复调用，缓存结果/大量并发JSAPI从逻辑上合并处理数据：在页面不同生命周期合理安排request请求，影响渲染的请求提前，渲染无关的请求延后/升级前端框架appx2.0后worker执行会早于render，可提前进行数据处理逻辑/使用小程序数据预拉取(prefetch)能力/串行请求优化处理逻辑资源：小程序包体积不超过2MB/常用页面放主包，不常用页面放在分包/使用合理的图片加载方式及图片格式/对于首屏不展示的图片使用懒加载策略/资源尽量放在同

12、一域名下以减少网络连接耗时/使用css、lottie动画等代替图片、动图/使用CDN资源加速渲染：单次setData应不超过256KB/setData频率不超过20次/s/setData数据嵌套层级不超过10层/列表类型数据推荐使用SpliceData/用骨架屏代替白屏给用户更好的体感/关键数据尽早setData以更快给用户展示部分页面内容2023 深圳站业务影响量化0.00%1.00%2.00%3.00%D1D2D3D4D5D6D7D8D9D10D11交易率交易率(JS异常异常_语法错误语法错误)正常组异常组0.00%1.00%2.00%3.00%4.00%D1D2D3D4D5D6D7D8D

13、9D10D11复访率复访率(页面请求异常页面请求异常_网络中断网络中断)正常组异常组样本清洗选取样本清洗选取指标模型及权重指标模型及权重历史数据分析历史数据分析业务指标预测业务指标预测2023 深圳站04数据服务2023 深圳站开发者动线2023 深圳站产品演示根因分析质量问题解决方案消息触达开发者助手2023 深圳站完整架构 小程序（前端）质量标准维护 前端体验问题检测识别技术 清洗规则维护与异常数据处理 实时离线统一、对内对外一致 体验问题经验库与数据分析相结合 技术异常、体验问题、业务指标分析 质量问题聚合及根因定位+解决方案 对内对外提供API+产品的服务 服务场景渠道的持续扩展感谢聆

14、听CSDN全球最大的中文开发者社区平台CSDN全球最大的中文开发者社区平台CSDN创立于1999年全球编程类网站排名第7（来源：Similarweb 2023.04）注册用户超过4300万，覆盖90%的中文开发者新媒体矩阵粉丝数量超过3100万超过1000家企业客户和合作伙伴目前公司员工近800名，分布在北京、长沙、上海、深圳、杭州、成都等城市，并在美国硅谷常设办事处旗下品牌旗下品牌专业中文IT技术社区：CSDN.NET多媒体专业出版：新程序员开发者专属移动APP:CSDN APP代码托管协作平台：GitCode代码工具协同平台：InsCodeIT人力资源服务：科锐福克斯丨八爪网络高校IT技术学习成长平台：高校俱乐部