【Android高级工程师系统学习视频】百度APP-Android-H5首屏优化实践

百度App自2016年上半年尝试Feed流业务形态，至2017年下半年，历经10个版本的迭代，基本完成了产品形态的初步探索。在整个Feed流形态的闭环中，新闻详情页（文中称为落地页）作为重要的组成部分，如果打开页面后，loading时间过长，会严重影响用户体验。因此我们针对落地页这种H5的首屏展现速度进行了长期优化，本文会详细阐述整个优化思路和技术细节

二、方法论

通过分析用户反馈，发现当时的落地页从点击到首屏展现平均需要3s的时间，每次用户兴致勃勃的想要浏览感兴趣的文章时，却因为过长的loading时间，而不耐烦的选择了back。为了提升用户体验，我们进行了以下工作：

• 通过用户反馈、QA测试等多种渠道，发现落地页首屏加载慢问题
• 定义首屏性能指标（首屏含图，以图片加载为准；首屏无图，以文字渲染结束为准）
• NA、内核、H5三方针对自己加载H5的流程进行划分并埋点上报
• 统计侧根据三端上报的数据产出平均值、80分位值的性能报表
• 分析性能报表，找到不合理的耗时点，并进行优化
• 以AB实验方式，对比优化前后的性能报表数据，产出优化效果，同时评估用户体验等相关指标
• 按照长期优化的方式，不断分析定位性能瓶颈点并优化，以AB实验方式评估效果，最终达到我们的落地页秒开目标

三、Hybrid方案简述及性能瓶颈

（一）方案简述

优化之前，我们与业内大多数的App一样，在落地页的技术选型中，为了满足跨平台和动态性的要求，采用了Hybrid这种比较成熟的方案。Hybrid，顾名思义，即混合开发，也就是半原生半Web的方式。页面中的复杂交互功能采用端能力的方式，调用原生API来实现。成本低，灵活性较好，适合偏信息展示类的H5场景

下面用一张图来表示百度App中Hybrid的实现机制和加载流程

（二）性能瓶颈

为了分析Hybrid方案首屏展现较慢的原因，找到具体的性能瓶颈，客户端和前端分别针对各自加载过程中的关键节点进行埋点统计，并借由性能监控平台日志进行展示，下图是截取的某一天全网用户的落地页首屏展现速度80分位数据

各阶段性能点可以按Hybrid加载流程进行划分，可以看到，从点击到首屏展现，大致需要2600ms，其中初始化NA组件需要35