摘要

本文围绕云音乐 2023 年报的前端开发，阐述了性能体验（包括首屏秒开、页面管理等）、资源管理（图片、视频、音频和字体包）、页面适配、质量监控（异常监控、功能降级、数据准确）、工程效率（页面导航、功能调试、工程基建）以及业务和技术关系的深度思考等多方面内容，分享了相关的开发经验与成果。

一、性能体验

1. 总体要求

性能体验涵盖多个方面，如页面秒开、转场流畅、内容完整展示、音视频播放正常等。这要求从页面导航、资源管理、页面适配等方面进行优化。

这些方面涉及到前端开发的多个技术点，例如优化页面加载速度、确保资源正确加载与显示等。

2. 首屏秒开

• 首屏秒开的整个过程包括容器初始化、CDN、TCP 建连、html/js/css 加载解析、DOM/CSSOM 解析、渲染布局、绘制等阶段。

对于前端开发来说，优化难度从右到左递增，不同阶段有不同的优化策略。

• 在渲染/绘制阶段，可以隔离状态变化频繁的组件，优先选择 GPU 渲染的 CSS3 动效，逻辑动效建议使用 GSAP。
• 在 DOM/CSSDOM 解析阶段，减少 DOM 嵌套深度、避免 JavaScript 直接修改元素样式、减少不必要的 CSS 和 CSS 选择器等。
• 在 HTML/JS/CSS 加载解析阶段，可通过构件工具压缩文件，利用离线包能力提前下载资源。
• 在 CDN、TCP 建连阶段，依赖 App 网络库底层优化，如使用 HTPP/2 减少 TCP 连接数。
• 在容器初始化阶段，可预初始化 H5 容器或建立容器复用池以减少耗时。

3. 页面管理

页面路由

• 采用 SPA 形式组织 H5，为页面路由提供路由表配置。路由表是子页面路由对象的集合，可决定页面顺序并能灵活调整。

例如，定义了 PageProps 和 PageRouteProps 等接口来规范路由相关的属性。

• 建议使用 routerIndex 作为子页面的标识，方便开发和调试。

手势处理

• 年报项目中手势操作包括点击、滑动等，为防止手势冲突，全局只有一个父容器，通用逻辑在父容器实现，子容器根据不同情况处理手势事件。

如 hammerjs 用于父容器的手势监听，子容器根据需求进行特殊处理。

• 子容器有三种特殊情况：一是感知手势事件时监听父容器自定义事件；二是完全接管父容器手势监听事件时的相关操作；三是特定区域响应特定手势时阻止手势向父容器传递。

转场实现

• 最初使用 react - transition - group 组件实现页面转场，通过 z - index 和 match 控制子页面层级和显示隐藏，使用 CSSTransition 实现进场和退场动画。

例如相关的代码逻辑展示了如何根据页面顺序等因素进行转场操作。

• 为实现自定义转场效果，改造路由表对象，新增 TransitionParams 协议，提供渐隐渐显的默认转场实现。

二、资源管理

1. 总体思路

资源管理主要是将网络资源下载到本地并加载到内存，除了常规的压缩资源和使用 CDN 加速外，还有如提前、同步、异步、懒加载、缓存、延迟等通用优化方法。

2. 图片资源

• 图片资源占比高，优先手动压缩（如 tinypng），选择正确格式很重要（如 SVG、JPEG、PNG、APNG、WebP、GIF 各有适用场景）。
• 在压缩和选对格式的基础上，采用预加载和缓存策略，预加载有自动全量下载和手动按需下载两种方式，手动按需下载更可控。

手动下载可基于三方库 pxloader 封装，React 19 后有默认 preload API。

3. 视频资源

• 先明确视频尺寸，通过压测不同尺寸视频在不同机型和系统下的体验，最终确定选用三种尺寸的视频。
• 为了流畅观看视频，在封面页渲染完成后同步添加视频页面，同时设置相关参数让浏览器自动决策是否预加载视频，并进行播放异常兜底处理。

4. 音频和字体包

• 音频有两种播放能力（WebAudio H5 原生和客户端原生 RPC 方式），站内推荐使用 RPC 方式，站外只能用 H5 原生，封装 audioManager 组件统一 API 接口。
• 字体包通常懒加载，针对固定文案裁剪多余字体，在 header 中延迟下载字体包资源，特殊情况下采用静默下载。

三、页面适配

• 开发前要明确站内是否支持全屏、站外是否需要支持，然后枚举重点机型并归纳总结。
• 若只适配站内全屏/非全屏，建议将适配机型宽高比控制在 2 个以内；若适配站外，建议控制在 4 个以内。

通过媒体查询等方式实现不同机型的适配，如不同的@media 规则针对不同的宽高比范围。

四、质量监控

1. 异常监控

• 除了基本的 crash 监控平台，还需构建全面的监控体系，如分享率、视频卡顿、音频启播失败、接口异常等监控。
• 根据不同场景采用不同监控策略，考虑样本数据量决定是否采样上报（实时数据部分采样，离线数据全量上报），以 PACD 方式持续改进。

2. 功能降级

• 功能降级的本质是及时止损，将降级开关集中配置在活动研发平台统一管理，纳入上线 SOP。

3. 数据准确

• 确保用户界面数据准确，对服务端异常进行兜底；保证埋点数据准确，不出现漏报、重复报或缺失关键信息。

五、工程效率

1. 页面导航

• 涉及页面自动曝光、支持动态路由等，满足策划或视觉需求变更，如页面顺序和数量调整等。

2. 功能调试

• 为 QA 或客服提供快捷方式查看年报、快速定位特定页面的方法，减少前端接收问题的压力。

3. 工程基建

• 期望有通用组件/能力、年报模板、D2C 插件、搭建平台等，活动成果沉淀到活动研发平台，利用平台的年报模板工程快速搭建项目。

六、深度思考

1. 关系分析

• 业务和技术关系分为业务驱动技术、技术保障业务、技术引领业务三类。业务驱动技术时开发较被动，技术引领业务时业务收益可能超预期，多数需求是技术保障业务，开发要合理决策。

2. 定量分析

• 以 2023 年报为例，项目初期要分析业务目标能否达成，考虑多终端和不同投放渠道，明确分享率统计口径，分析分享行为流程并进行数据埋点。

3. 定性分析

• 日活和分享率取决于产品创意，开发者要高效传达多元媒体内容，好的体验和质量能促进年报分享和日活提升。