视频场景的页面性能优化

目录

1. 页面性能

1.1. 指标确定

1.2 优化方向：

2. 优化方案

2.1. 通用场景优化方案

 2.1.1. 主包大小裁剪

2.1.2. 分包策略调整

2.1.3. 核心接口请求提前

2.2. 视频场景优化方案

2.2.1. 视频首帧分片的请求策略 

2.3. 直出化页面，提升首屏体验

2.3.1 页面直出方案

2.3.1 减少页面重排

2.3.2 缓存

2.4 视觉感官细节优化内容

2.4.1  延迟非首屏组件渲染

2.4.2  header 占位优化

---

1. 页面性能

1.1. 指标确定

本次优化的核心目标为提升用户从打开页面到播放视频的速度，此处测量对象有页面内容加载耗时、页面加载到开始播放视频前各个环节的耗时、页面加载到视频首帧耗时。

此外，结合 Google 发布的侧重用户体验为准的指标 Web Vitals ，确定两个用于描述页面渲染的指标：

• LCP，Largest Contentful Paint，最大内容渲染，即页面整体内容渲染完毕的耗时，用于衡量加载耗时，建议值在 2.5 秒以下
• CLS，Cumulative Layout Shift，累积布局偏移，即页面元素移动的位置累加量，用于衡量视觉稳定性，越低越好，建议值在0.1 以下

1.2 优化方向：

1. 页面提前渲染播放器和拉流，来提升用户看到视频的速度；
2. 稳定页面元素的展示，减少页面元素闪动的情况，提升页面的视觉观感体验

2. 优化方案

2.1. 通用场景优化方案

 2.1.1. 主包大小裁剪

 在”主包下载“ 流程中，优化手段为减少首包的大小，合理调整分包策略。可通过 Chrome DevTools Network 进行可视化分析。

也可使用 webpack-bundle-analyzer 进行可视化分析，得到优化点。

优化策略：分析主要的性能瓶颈，可按业务需求，通过对部分资源进行按需加载而不是全部加载。只对相关依赖的模块进行按需加载即可。

2.1.2. 分包策略调整

把播放器渲染、拉流和页面其他元素渲染分离，优先渲染播放器，来达到更快的视频首帧速度。

2.1.3. 核心接口请求提前

前的核心请求流程在主包下载完成解析后才开始执行，整体页面开始执行有效渲染操作的时机过后。此处优化手段为利用浏览器的并行请求机制，提前执行业务接口请求，来减少此部分耗时。

2.2. 视频场景优化方案

2.2.1. 视频首帧分片的请求策略 

当前为了用户观看体验，优先从视频最高分辨率开始播放，对应也带来较久的首帧分片下载耗时，结合体验，可以考虑固定从 720p 开始播放（现分辨率级别有 480p、720p、1080p），兼顾体验和性能。

2.3. 直出化页面，提升首屏体验

页面直出化能带来更加稳定的首屏体验，以及结合一些接口在服务端去请求和缓存，可以提升页面加载性能。

2.3.1 页面直出方案

***

2.3.1 减少页面重排

用SSR，服务器渲染头部组件，chat组件和播放封面。也通过骨架屏的方式，提供更好的体验。
骨架屏：Element - The world's most popular Vue UI framework

2.3.2 缓存

1. 可以缓存业务的静态接口（数据变更的概率较低的接口）

2. 对直出 HTML 结果进行缓存，在用户二次请求时可以极速响应

2.4 视觉感官细节优化内容

2.4.1  延迟非首屏组件渲染

顾名思义，可以等视频渲染完毕后再加载部分非主需的组件的渲染。

2.4.2  header 占位优化

页面渲染过程中 header 区域总会有一次闪动，让页面视觉表达不够稳定，通过优化首屏框架，给 header 区域增加占位，来减少 header 区域的闪动。