百度小程序优化总结

小程序优化背景

　　更换版本频繁: 因合规要求,5次区别较大的版本更换,立马就换了就没来得及优化

　　内容要求过大:例如首页过长导致短期内无法满足性能要求

　　百度小程序对程序要求非常苛刻：

　　白屏定义为打开后6s，页面还是空白的，  百度要求要≤1%

　　开发测试的时候肯定都是达标的,线上百分之一是个长尾数据，受限制与多方面影响，客户移动网络的不稳定性、手机性能差异

　　只有让自己的小程序性能足够好，从而减少长尾量。

　　总之，这是个综合工作,需要不断推进,版本不要变动,优化才能持续

 

1 优化准则

　　1.1 前端

　　　　控制资源（大小，数量），默认数据占位，懒加载

　　1.2 后端：API接口响应时间基线标准

　　　　① 任意 C端API接口响应时间控制在 500ms(0.5s) 内

　　　　② 任意 后台API接口响应时间控制在 3000ms(3s) 内

　　　　③ 高频(TOP10) C端API接口响应时间必须控制在300ms(0.3s)内

　　　　④ 高频(TOP10) 后台API接口响应时间必须控制在 1500ms(1.5s)内

　　　　⑤ 如果 因为业务实际情况,或者优化技术达不到以上要求需要逐级审批至部门经理  主管>经理

 

2 具体方案

　　2.1 页面渲染时长优化

　　　　优化点：

　　　　　　页面加载时一次性请求所有接口，造成渲染时间较长

　　　　方案：

　　　　　　先加载首屏，滚动到对应区域再调用接口加载对应数据，避免一进入页面就加载所有数据，缩短渲染时间

 

　　2.2 优化图片加载

　　　　优化点：

　　　　　　列表页，详情页图片较多，较大，影响加载时间

　　　　方案：

　　　　　　采用懒加载，先加载DOM结构，再去加载图片

　　　　　　静态资源压缩处理

 

　　2.3 白屏优化

　　　　优化点：

　　　　　　a、小程序不识别html结构，需要利用三方插件解析，产生短暂白屏

　　　　　　b、文章详情页缺参数访问时页面会显示空白

　　　　方案：

　　　　　　a、采用骨架屏，用色块占据空间，避免被判为白屏，具体方法需要调研

　　　　　　b、用默认文章占位，数据请求成功后替换，避免无参数白屏

 

 

　　　　优化点：

　　　　　　问答详情接口其他答案列表字段无分页，碰到某些数据量大的情况造成渲染页面区域过大，形成白屏

　　　　方案：

　　　　　　前端截取部分数据渲染出来，滚动到底部再显示剩余数据

 

以上是本司小程序优化的总结，经检验证明效果相当不错，在年底百度小程序评比中排名第一，不负大家的努力