由于 API 支持的限制和系统规格适度的限制，改进智能电视和机顶盒设备上的 Interaction to Next Paint (INP) 比桌面浏览器要面临的挑战要大得多。在本案例研究中，您将了解 Disney+ Hotstar 如何成功克服这些障碍，并因此获得显著的商业效益。
随着客厅设备的采用率不断提高，Disney+ Hotstar 意识到在其应用的智能电视和机顶盒应用中提供流畅的浏览体验是一项关键的业务要求。然而，更难为此类设备修复 INP 的原因是，任何特定电视型号都可能会使用非常旧的浏览器版本，例如，2020 年 LG TV 使用 2018 年发布的 Chrome 68。其中一些设备也可以归类为低端设备，这意味着它们对互动的响应速度没有旗舰平板电脑和笔记本电脑设备快。
下图比较了在笔记本电脑和智能电视上应用 CPU 速度减慢六倍时的网页加载时间。可以看到，笔记本电脑的速度仍然比新近生产的智能电视快得多。
虽然这些测试可以产生实验室数据，但 Disney+ Hotstar 开始使用 Web- Vitals 库从其应用的实际用户那里收集 Interaction to Next Paint (INP) 的实测数据，我们观察到，75% 的应用用户在现场遇到 INP 为 675 毫秒，根据 INP 阈值，这被视为“糟糕”用户体验。
本案例研究介绍了 Disney+ Hotstar 如何改进其在线播放应用的响应速度，尤其是在低端设备上。他们通过将 INP 值降低到 272 毫秒，实现了 61% 的改进，仍高于建议的 200 毫秒的“良好”阈值，但在这方面取得了实质性的进步。
调查结果
Disney+ Hotstar 使用 web-Vitals 库的归因 build 中的 onINP 方法对应用进行插桩处理。在初始阶段，我们遇到了各种挑战，特别是在确定精确目标元素方面。出现该问题的原因是，所有引用都指向身体，因为第三方空间导航库已用于 Disney+ Hotstar 应用中的一些自定义设置。该库仅监听文档正文上的事件，随后确定实际聚焦的元素，并根据远程按键预测下一个焦点。
Disney+ Hotstar 首先解决归因问题，以便正确识别导致高 INP 值的互动。为此，Disney+ Hotstar 记录了 focusKey 属性，该属性已存在于当前聚焦元素的空间导航库中，以及页面上所有可聚焦元素的映射中，这类似于网页生命归因构建中提供的互动目标。
focusKey，以及触发该元素的元素的路径。
现在，在采用了适当的衡量和归因方法后，从实地数据中得出的结果表明，INP 中最容易出现以下互动的是以下互动：
- 水平轮播界面导航。
- 垂直轮播托盘导航。
- 初始网页加载期间的互动次数。
在分析与 Chrome 开发者工具中的性能面板这些互动情况后，我们发现空间导航库会读取所有可聚焦元素的位置，并构建了一棵新的树。这项操作开销很大，会在每次互动时触发布局抖动，例如从一个元素移到另一个元素。
对于首页，空间导航库生成了一个树状结构，如下所示：
这意味着，如果应用显示 10 个托盘，每个托盘都有 7 张卡片，那么托盘容器将有 70 个可聚焦元素，包括导航项。互动元素数量过多。我们还使用了第三方轮播库，该库在水平导航期间读取每张卡片的尺寸来转换容器，从而增加互动延迟时间。
解决问题
为了解决整个应用的响应能力问题，有几个不同的问题必须单独解决。
水平托盘导航改进
Disney+ Hotstar 构建了自己的内部轮播库，该库不会通过使用合成动画并针对每个托盘读取一次尺寸（而不是每张卡片读取一次）来触发布局抖动。
空间导航仅专注于轮播界面的根部，为了实现进一步的水平导航，自定义轮播界面会纳入图片中。通过这种方法，Disney+ Hotstar 不再依赖空间导航，而旧版轮播库则在每次导航时都读取尺寸。
下图展示了空间导航树执行这些优化后的外观。
下图是实现轮播界面之前和之后在 Chrome 开发者工具的性能面板中测量的性能比较。
通过这项工作，Disney+ Hotstar 显著降低了其应用在现场的 INP。他们还通过移除第三方库成功节省了约 35 KB（压缩后）。此外，这些改进还让 Disney+ Hotstar 缩短了其用于衡量首页总呈现时间的自定义指标的时长，因为布局的触发频率因空间导航节点的减少而有所减少。
垂直托盘导航改进
此外，Disney+ Hotstar 延迟加载托盘，而不是预先加载所有托盘，从而提升了垂直托盘导航性能。因此，在网页加载时，应用只会加载两个托盘在视口中可见，并在上方和下方另外加载托盘，而不是加载 10 个托盘实例（它们在内部包含一个轮播组件和一系列图片）。此外，系统还使用 setTimeout() 生成策略将渲染拆分为多个任务，以便主线程有更多机会处理用户互动。
初始网页加载期间的互动次数
对于在应用启动期间处理大量脚本的应用来说，INP 会很高。这是因为浏览器必须下载、解析和评估这些脚本。尽管这一切发生，但主线程可能会长时间被占用，无法快速响应用户互动。
Disney+ Hotstar 意识到他们处理的脚本比应用启动期间（启动画面时间）实际需要的脚本多，以加快未来页面加载速度。这会产生额外的脚本评估任务，也可能会对 INP 产生负面影响。
为了解决此问题，Disney+ Hotstar 考虑采用动态加载大多数资源的方式，以节省应用启动期间的时间。但是，这样做会增加导航到未来页面的加载时间，因为此次更改不会再提前加载 JavaScript。为了解决这个问题，Disney+ Hotstar 开发了一个内部的素材资源预加载器库，用于确定用户体验历程中的下一个页面，并为该页面预加载资源。例如：
- 当用户访问登录页面时，素材资源预加载器库会为个人资料选择页面预加载素材资源。
- 在配置文件选择页上，加载了首页素材资源。
- 在首页上，加载详情页面的素材资源。
- 最后，系统会在详情页面中加载观看页面的资源。
优化资源加载对 Disney+ Hotstar 起到了两个作用：减少应用的 INP（因为主线程现在相对自由地执行用户互动），以及减少低层级设备上的内存用量。
这些更改导致字段中报告的 INP 数量减少了 32%，如以下屏幕截图所示。
其他改进
Disney+ Hotstar 还发现有针对一些用户事件的耗时较长任务，而这些任务可通过经常回退到主线程进行拆分，然后更进一步，创建了一个任务生成器实用程序，让用户能够在执行过程中取消任务。
例如，当用户浏览托盘上的多张卡片时，会发生以下情况：
- 已聚焦于下一张卡片。
- 如果需要，它会翻译该卡片。
- “特别关注”已更新。
- 系统会提取预告片（如果存在）并开始播放。
- 操作会触发 Google Analytics（分析）事件。
如果在此过程中，用户专注于下一张卡片，则无需执行其余步骤。例如，如果用户移到了下一张卡片，就不再需要对特定影视内容进行预告片提取和玩家初始化。因此，可以取消这些任务以释放主线程。
Disney+ Hotstar 的任务生成器实用程序接受作为任务的函数，而当中间有其他任务出现时，上一个任务会中止，从而节省不必要的任务执行，并快速处理必要的任务。
成果
总体而言，Disney+ Hotstar 的应用 INP 从 675 毫秒缩短至 272 毫秒，代表增长了近 60%！此外，特别是托盘交互延迟时间从约 400 毫秒降低到约 100 毫秒。
对业务的影响：每位用户的每周卡片查看次数从 111 次提高到 226 次！这一增幅是 100%，这表明界面速度更快、响应更灵敏，更有可能吸引用户在更长时间内保持互动。
这只是开端，Disney+ Hotstar 以 INP 指标为指导，仅触及了提高渲染和互动性能的皮毛。他们的团队非常期待在不久的将来为 Disney+ Hotstar 打造流畅的客户体验。
感谢来自 Disney+ Hotstar 的 Ayush、Ajay、Kiran、Milan 和 Richa，他们努力扭转局势。
特别感谢 Disney+ Hotstar 工程主管 Ankeet Maini 和 Disney+ Hotstar 客户体验主管 Rahul Krishnan P 为这项创新工作提供支持，同时感谢 Google 的 Jeremy Wagner、Gilberto、Barry Pollard 和 Brendan Kenny 审核并帮助发布本案例研究。