QQ直播Hippy首屏耗时性能优化总结

见贤思齐

1.背景QQ直播是PCG社交线下在直播领域的一个重要业务，主要包含秀场、交友、游戏等直播内容，满足了用户浏览搜索直播内容及观看视频直播的诉求。本文的主体是QQ直播大厅，核心功能是展示各直播品类下的直播内容，采用了腾讯对外开源的类RN动态框架Hippy作为技术栈，关于Hippy框架的信息，请移步开源项目Tencent/Hippy了解更多。本文将针对功能迭代过程中遇到的一些性能问题进行全面剖析，并详细阐述过程中采取的优化手段。本文适合的阅读对象：对跨端开发感兴趣的所有朋友们，万字长文，多图预警，看不完也一定要收藏/点赞，有需要用到的时候再回来继续阅读交流。1.1. 性能问题优化前页面加载录屏如下，优化后效果视频直达第4节查看。优化前页面加载录屏目标：降低大厅首屏耗时，从而降低用户感知的页面加载耗时，提升用户体验。1.2.性能指标一个Hippy页面加载阶段，经历了哪些耗时阶段呢？Hippy页面加载阶段如何衡量一次性能优化是否有效？1.2.1.performanceAPI为了帮助开发者更好地衡量和改进Hippy页面性能，手Qhippy开发团队提供了performanceAPI，以获取Hippy加载当前页面的性能打点。performanceAPI提供了哪些性能打点？在手Q平台调用QQDebugModule#getPerformanceData，可以获得终端性能打点时间点，下面是各时间点含义：我们可以通过以上的时间点，计算出Hippy页面终端性能指标，如下：到这里，我们会发现performanceAPI并没有前端相关的性能打点，这部分需要业务按自身需要进行打点上报。1.2.2.前端性能打点通过以上前端时间点，可以就可以计算出前端性能指标：再配合终端性能打点，可以计算出首屏耗时、终端耗时、前端耗时等关键耗时，如下：1.3. 性能现状有了性能指标的量化标准，我们就可以通过统计现网真实用户数据来重新定义性能问题。2.性能分析【首屏耗时瀑布图】首屏耗时瀑布图可能增加首屏耗时的问题可能增加首屏耗时的问题3.性能优化页面性能损耗无处不在，贯穿整个页面生命周期，任何一次代码提交都有可能引入性能问题，所以性能优化是一项持续性的工作。性能优化应该遵循“前期抓大放小、后期长尾优化”原则，前期将精力聚焦在预计带来80%收益的那部分工作，后期再花时间解决另外棘手的部分。本文主要分终端、前端、后台三个方向来着手首屏耗时优化。【阶段耗时优化方向脑图】3.1.终端优化方向主进程打开大厅预处理优化调整预渲染预加载号码包3.1.1.主进程打开大厅现状：tool进程打开hippy速度慢，影响初始化速度。直播业务整体包括首页和直播间是放在tool进程启动，如果放在主进程启动，打开速度会更快，但会导致手Q内存暴增，因为直播间有两个播放器+首页hippy预览。预渲染、预加载方案，都无法优化掉初始化耗时，非常依赖主进程启动，那有没有可能在主进程启动？优化方案：方案一：解决内存暴增问题，推动直播间业务放在主进程启动；方案二：将首页和直播间拆开，首页放到主进程启动，直播间还是放在tool进程；初步估计方案二更可行，但如果只是将首页放在主进程中，和直播间跨进程通信，对终端维护成本较高，不仅影响现有系统架构，可能引入影响其他的性能问题。最终，没有采用主进程打开hippy的方案。升级运行环境被否掉了，那还有没有其他更直接有效的优化方案？换个思路，将页面加载提前一点。