2C 直播间-优化

概览

• 特点：课件资源需要下载、互动答题、视频播放、聊天
• 目标：进教室快、互动题易懂流畅、反馈激励丝滑、页面秒开、视频高清无黑屏无卡顿

性能

• 进教室
  • 单页：多单页面权衡(稳定性和性能取舍)
  • 资源：资源缓存、拆包、rust 资源高效下载
• 互动题
  • 创建: 预创建、基础参数读取(因是文件读取)增加缓存、多互动复用
  • 挂载：挂载方法自定义注入
• 反馈激励
  • 动画: Lottie
    • 大小有标准把控，减少粒子效果
    • 资源包构建抽离、预加载
    • 图片外挂与非外挂取舍：换肤资源用图片外挂、在线预览用 base64, 图片压缩
  • 声音: 声音统一压缩，单个音频小于 100kb
• 页面容器
  • 层级: 同步位移替换异步层级、分类别容器可选注入
  • 创建: 常驻、复用、预创建
• 基础
  • 事件：防抖节流(bv 事件成本高)、定时器(避免浏览器懒执行)、主动要而非监听(BV 崩溃导致端监听事件堆叠)
  • 时机：空闲加载(动画资源、拆包资源)、异步加载、预加载(音频预加载)
  • 数据：代理缓存(本地文件读取，常量变量分析，常量给增加缓存)
  • 资源：构建(拆包)
• 聊天
  • 动图缓存与压缩，聊天区 Lottie 2 Gif
• 策略
  • 日志: 降频落盘、高频和无意义移除
  • 低端设备: 极速模式打开

体验

• 进教室
  • 多页面过度 loading 动画统一
• 互动题
  • 流程：用户不知怎么发言、用户不知道怎么参与
  • 容器加载提示
  • 表扬棒上台
  • 自己上墙
• 反馈激励
  • 动画：学分称号效果炫酷提升
  • 声音：声音播放主要内容进行提示
• 页面容器
  • 多分辨率适配
  • 骨架屏
• 基础功能
  • 聊天区动图
  • 清晰度优化、清晰度切换、双网加速(移动)

稳定

• 多容器架构进程隔离
• CDN 容灾
• 本地资源离线化
• 数据监控
  • 进教室成功率
  • 进教室时长
  • crash 率：提示优化
  • 内存 占比
  • CPU 使用

扩展

• 框架：融合无类型、配置化
• 皮肤：zip 包配置

工具效率

• 开发帮助工具
  • 构建：不等待打包构建，端直接嵌套本地运行
  • 基础：日志课件地址、用户信息快捷查询、
  • 直播：信令模拟、进度条点位分析、融合配置信息
  • 架构：CommonData 健康度、BV 管理、CommonUI 触发
• 日志分析
• Lottie 压缩

流程挑战

• 时间：倒逼、紧迫、并行、赶不上大部队
• 业务：业务无交接和宣讲、不熟悉成本无法评估时间
• 技术：重构中、遇到一个问题解决一个
• 人人：刚组合不熟悉

场景

• 聊天
• common-ui
• 容器
• 无网｜声音
• 进教室
• CommonData
• 表扬榜