TV端Web页面性能优化实践

01

   背景

随着互联网技术的持续创新和电视行业的高速发展，通过电视观看在线视频已经逐渐成为大众的重要娱乐方式。奇异果App作为在TV设备上用户活跃度最高的应用之一，为广大用户提供了丰富的内容播放服务，除此之外，同样有会员运营、专题活动等上线效率要求极高的服务提供给用户。为满足后者的诉求，我们调研了目前主流的动态化和跨端技术：H5、Flutter 和 React Native，最终从开发效率、人力成本、动态能力和性能上选择用H5方案，目前，H5页面承担了奇异果App内大量的收银、运营活动、专题等业务。然而，H5页面在TV设备上加载耗时过长是我们面临的主要困难，如何提升 H5页面在TV设备上的用户体验，是我们迫切需要解决的问题。

02

   面临的挑战

挑战1：TV设备换机周期较长，系统碎片化问题严重，目前TV端 5.0系统以下的设备占比约 30%，占比很高。优化首先面临的是版本的跨度，兼容低版本是首要考虑。下图为TV端系统版本占比情况：

挑战2：TV设备性能偏低，TV设备主要分为三种：电视、盒子和投影仪，以上设备的的配置严重低于同时期的主流手机配置，在我们的性能等级划分中，CPU为4核A53架构且内存超过1.5G就已可划分为高性能设备，在低性能设备中，仍存在较多A7架构处理器或内存为512M的设备。

挑战3：App版本碎片化严重，由于电视行业合作现状的复杂性，渠道较多；传统电视厂商追求稳定，对于升级较为慎重；有较多廉价设备在售，且售出后接近不维护状态；合作模式的复杂导致定制较多，升级困难，对SDK层面的优化和上线有较大挑战。

03

   优化历程

1、准备工作

在优化之前，最重要的工作是统一性能口径、制定统计指标。在口径层面上我们没有采取常规的前端页面加载耗时，采取了更符合用户真实体验的场景：从用户点击按钮开始到真正用户可见。虽然这样会导致我们统计的指标整体耗时增加，但评估后这个指标更利于我们后续优化工作的方向展