TV端Web页面性能优化实践-低调大师

TV端Web页面性能优化实践

2023-12-29 373

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、准备工作

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

1）页面可见耗时：从客户端点击开始—>客户端页面跳转—>web容器初始化—>前端DOM渲染完成可见。

2）可交互总耗时：页面可见耗时 + 可响应用户遥控器按键总时间。

3）native页面耗时：客户端页面跳转耗时。

4）webview初始化：web容器初始化耗时。

5）调用h5耗时：loadUrl到h5开始执行第一行代码耗时。

6）h5加载耗时：h5开始执行第一行代码到页面可见耗时。

7）h5可交互耗时：h5页面可见到页面可响应耗时。

统计口径统一后，我们在webSDK层面对以上时间点进行投递，并回收线上数据，根据指标反馈的问题进行针对性的优化。在未经优化的情况下，H5的加载速度平均约为 5.5 秒左右，用户体验很差。通过线上数据分析H5加载耗时在整体占比较大，优化H5加载耗时是我们亟需解决的问题。

2、H5加载耗时优化

H5加载耗时主要依赖于前端部分的优化，由于文章篇幅有限，常规的H5页面优化工作不再赘述，如：

1) 资源合并

2) 数据请求合并

3) 业务逻辑优化

4) DOM结构优化

5) 同地址下不同模式Async路由化加载

3、SSR优化

除以上优化之外，SSR(服务器端预渲染)技术进入我们的视线之内，SSR是一种优化Web应用性能和SEO的技术，通过在服务器端生成初始HTML，提高了页面加载速度、搜索引擎优化和用户体验。通过选择适合的框架、创建路由、编写组件、服务器配置和数据获取，开发人员可以实现服务器端渲染，从而为用户提供更好的Web应用体验，保证首屏更快的渲染。

这种降低端上处理压力的方式，非常适合TV端设备性能较差的场景。SSR虽然也有自己的缺点，如虽然可以提高页面整体加载速度，但不利于页面的渐进加载。经过反复实验和线上数据，我们仍然认为SSR的收益整体是正向的，并研发上线。实验证明，SSR方案显著提升了H5页面加载速度。

通过SSR优化后的H5页面加载流程如下图所示：

经过前端上述方案优化后，各个版本的加载速度都得到了显著提升。H5渲染部分的耗时从平均4秒减少至1.5s以下，总耗时减少至3.5秒左右。此时，单纯从前端角度继续优化遇到了瓶颈，投入产出比也较低，需要从客户端整体角度上继续思考优化手段。

4、资源离线缓存

CDN会部署一些关键的H5资源（如css、js、png、ttf等），其中有不少是在前端版本周期内不变的，且较大，客户端在适当的时候进行预下载。在渲染页面时，我们可以利用 WebView内核的 shouldInterceptRequest 回调来拦截在线 H5 URL 的加载请求，如果离线缓存中没有找到该资源，那么就通过在线网络进行加载；如果离线缓存中找到了该资源，则直接从本地磁盘读取资源，返回给 WebView。这种方法能够较大提升加载资源的速度。

离线缓存方案的大致流程图如下：

同时在做的过程中我们发现在低版本上Android原生的请求库HttpUrlConnection还处于http1.0的阶段，不能享受http2.0的优化（如通道复用），这就使得预加载时的请求耗时较高。而TV端目前还有大量版本为5.0以下的低版本设备，因此我们选择了切换到TV端自主研发的网络库，这个网络库支持http2.0，从而提升了低版本设备的请求性能。另外我们看到从用户点击到H5页面打开是有一定的系统调度时间，这个时间也是可以用来做优化的即下面说的并行加载。

5、并行加载

除了上述提前缓存JS/CSS等资源的方案外，提前缓存html页面也是业界常用的优化手段，在页面未SSR化之前，由于性能瓶颈并不在html数据下载上，这种缓存机制并未取得较好的效果，在页面SSR化之后，这种方式又进入了我们的视野，在渲染数据已经生成完毕之后，这样的缓存机制理论上能够发挥更大的作用。

但同时我们又遇到了其他困难，由于个性化算法在业务中的应用已经非常广泛，将页面提前缓存并在一定时间内保持内容不变的方式，与业务上保持页面数据实时刷新的诉求形成了冲突。这使得我们需要找到更加适合业务场景的优化的技术方案。

Android系统在做Activity页面跳转切换时会有系统耗时，这个耗时和设备性能成反比，我们在页面跳转切换的同时拦截用户点击 web 页面的行为来提前启动任务并行加载H5页面的SSR数据。然后，根据 URL 和 cookie 参数生成一个唯一的令牌。在真正走到WebView 渲染时，将 URL 重定向到缓存中。同时，使用多线程锁同步和超时机制，以进一步提高H5的加载速度。

并行加载方案的大致流程图如下：

在完成这些优化后，我们的加载速度从3.5秒继续优化到了2.8秒左右，提升了约23%。经过上述的一系列优化措施，我们的H5加载时间从最初的平均5.5秒降低到了2.8秒左右。然而，相比于纯原生（Native）页面，这个加载速度仍然存在较大的差距，需要我们继续寻找更有效的优化手段。为了进一步提高用户体验，我们进行了各种技术尝试、并通过与其他技术团队的积极交流与合作，我们又有了新的思路。

6、容器预热

在APP启动并且主线程空闲的时候，我们可以预热WebView引擎，并构建WebView缓存池，这样就能实现预热容器的复用，从而提升WebView的加载速度。这种优化策略主要针对中高性能设备和内存较大的低性能设备。在设备空闲时，我们进行WebView容器的预热，并将预热的容器添加到缓存池中。

在我们后续的使用过程中，我们直接从WebView缓存池中获取预热的WebView容器。这样可以节省创建web容器和jscore的时间。

7、页面预渲染

在TV端H5有很多业务实时场景限制，特别是运营活动这一类有很强的时效性，这对我们的优化带来了一定的限制。但是，我们找到了一些可定制化优化的场景，如：当非会员用户在观看会员专享内容的时候，通常会有6分钟的免费试看时间，试看时间结束后会自动跳转到H5。这类场景为我们进行预渲染提供了天然的优势，在类似场景下，当开始倒计时自动触发预渲染，使得H5内容得以提前加载，实现H5的秒开效果。如下GIF图所示，上图是未进行优化的加载过程，可以看到明显的黑屏和加载过程；下图是进行了预渲染优化的结果，实现了真正的秒开。

在完成以上这些优化措施后，对比去年的同期的数据，我们从线上数据中看到，加载时间进一步降低，从最初的非SSR平均5.5秒、SSR场景下3.5秒降至现在的平均2秒左右，对用户体验起到了明显的改善作用。

04

成果

我们对端上的优化进行了AB实验。经过打散平均后的试验数据显示，我们的优化措施使得订单生成页转化率平均提升了约21%，同时支付成功率的转化也平均提升了2.4%。

实验证明，提升关键业务页面的加载速度和用户体验，对业务有非常直接的正向提升作用，这也为我们后续持续推进优化提供了充足的信心和动力。

05

未来规划

未来，我们期望通过寻找更多方法，进一步降低性能指标，将页面平均耗时控制在2秒以内，并且控制劣化。

此外，我们注意到，平均数据并不能完全反映实际的用户体验，一些尾部用户仍然面临较差的使用体验，我们将继续分析90分位值之后的用户遇到的实际情况，并进行针对性优化。同时，我们将继续针对重要的业务场景如收银台进行定制化的优化，进一步提升关键业务的加载速度，从而不断改善用户体验和提高业务转化。

也许你还想看

安卓TV插件化9.0内联崩溃原因及解决方案

维护几十种语言和站点，爱奇艺国际站WEB端网页优化实践

爱奇艺知识WEB前端组件化实践

本文分享自微信公众号 - 爱奇艺技术产品团队（iQIYI-TP）。
如有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一起分享。

微信关注我们

原文链接：https://my.oschina.net/u/4484233/blog/10555460

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

IvorySQL年度总结 | 开源的世界，走下去才有惊喜

2024-01-02

359

淘宝创新业务的优化迭代是非常高频且迅速的，在这过程中要求技术也必须是快且稳的，而为了适应这种快速变化的节奏，我们在项目开发过程中采用了一些面向拓展以及敏捷开发的设计，本文旨在总结并思考其中一些通用的编程模式。前言静心守护业务是淘宝今年4月份启动的创新项目，项目的核心逻辑是通过敲木鱼、冥想、盘手串等疗愈玩法为用户带来内心宁静的同时推动文物的保护与修复，进一步弘扬我们的传统文化。作为创新项目，业务形态与产品方案的优化迭代是非常高频且迅速的：项目从4月底投入开发到7月份最终外灰，整体方案经历过大的推倒重建，也经历过多轮小型重构优化，项目上线后也在做持续的迭代优化甚至改版升级。模式清单 ▐基于Spring容器与反射的策略模式策略模式是一种经典的行为设计模式，它的本质是定义一系列算法，并将每种算法分别放入独立的类中，以使算法的对象能够相互替换，后续也能根据需要灵活拓展出新的算法。这里推荐的是一种基于Spring容器和反射结合的策略模式，这种模式的核心思路是：每个策略模式的实现都是一个bean，在Spring容器启动时基于反射获取每个策略场景的接口类型，并基于该接口类型再获取此类型的...

2023-12-29

346

资源下载

更多资源

优质分享App

近一个月的开发和优化，本站点的第一个app全新上线。该app采用极致压缩，本体才4.36MB。系统里面做了大量数据访问、缓存优化。方便用户在手机上查看文章。后续会推出HarmonyOS的适配版本。

腾讯云软件源

为解决软件依赖安装时官方源访问速度慢的问题，腾讯云为一些软件搭建了缓存服务。您可以通过使用腾讯云软件源站来提升依赖包的安装速度。为了方便用户自由搭建服务架构，目前腾讯云软件源站支持公网访问和内网访问。

Spring

Spring框架（Spring Framework）是由Rod Johnson于2002年提出的开源Java企业级应用框架，旨在通过使用JavaBean替代传统EJB实现方式降低企业级编程开发的复杂性。该框架基于简单性、可测试性和松耦合性设计理念，提供核心容器、应用上下文、数据访问集成等模块，支持整合Hibernate、Struts等第三方框架，其适用范围不仅限于服务器端开发，绝大多数Java应用均可从中受益。

Rocky Linux

Rocky Linux（中文名：洛基）是由Gregory Kurtzer于2020年12月发起的企业级Linux发行版，作为CentOS稳定版停止维护后与RHEL（Red Hat Enterprise Linux）完全兼容的开源替代方案，由社区拥有并管理，支持x86_64、aarch64等架构。其通过重新编译RHEL源代码提供长期稳定性，采用模块化包装和SELinux安全架构，默认包含GNOME桌面环境及XFS文件系统，支持十年生命周期更新。