谭兆歆—GMTC B站的视频体验进化之路 bilibili

前端狗

2019/07/09 发布于 编程 分类

GMTC2019 

文字内容
1. 谭兆歆 - 冷⻤鬼 B 站的视频体验进化之路路
2. 在此键入姓名 在此键入tittle
3. 在此键入姓名 在此键入tittle
4. ⾃自我介绍 bilibili Web播放器器负责⼈人 在 B 站任职五年年,现负责 Web 播放相关⼯工作,即 HTML5 播放 器器及播放内核开发、弹幕⽀支持和特效研究、⽤用户体验优化⽅方⾯面。 参与的项⽬目有 HTML5 播放器器开发及在B站的全⾯面上线、DASH 内 核调研开发、蒙板弹幕、播放⻚页改版与秒开等。
5. ⽬目录 ⼀一、播放⻚页秒开 ⼆二、播放体验优化 三、弹幕体验优化 四、总结与展望
6. ⼏几组数字 思科预测到 2022 年年视频将占据全部 IP 流量量的⽐比例例 B 站⽇日均视频播放量量 ⽹网⻚页最佳打开时间不不应超过的值
7. 2018年年初的 B 站播放⻚页 ⾸首帧时间80分位 4840±182ms
8. Video First 的优化计划
9. 计划制定 - 流程梳理理 流程梳理理,细化关键数据指标
10. 计划制定 - 服务关系梳理理
11. 计划制定 - ⽬目标设定 秒开 - ⾛走出舒适圈的挑战
12. 优化实施 - Stage0 优先级 battle —— 最⾼高优先级的就应该是播放 原则:除去必需步骤外,其余服务都延到⾸首帧后处理理 服务避让,以视频⾸首帧载⼊入完成为回调,触发⻚页⾯面后续逻辑 基础样式 上报服务 > 播放服务 > 播放器器与⻚页⾯面其他服务
13. 优化实施 - Stage0 将播放器器资源提到最优先位置 第 3 个请求载⼊入播放器器资源,第 10 个左右⽹网络请求开始拉流 参考youtube的处理理⽅方式 —— 逐帧分析youtube
14. 优化实施 - Stage1 一次负优化 原先的播放器器是动态载⼊入的,容器器载⼊入播放器器 合并请求后总时间的确降低了了 ~100ms ,但⽩白屏时间变⻓长
15. 优化实施 - Stage1 播放器器结构 加载容器器 内核 弹幕 其它模块 巨⼤大的宇宙战舰
16. 优化实施 - Stage1 播放器器结构 加载容器器 内核 弹幕 其它模块 轻量量核⼼心播放器器
17. 优化实施 - Stage1 前后体积对⽐比(GZip)
18. 优化实施 - Stage2 为什什么不不和⻚页⾯面 HTML ⽂文件⼀一起输出呢? 充分利利⽤用 NodeSSR 特性 由 Node 请求内⽹网服务 使⼤大部分 playurl 请求时间保持在 10ms 内
19. 优化实施 - Stage3 Preflighted Requests(预检请求) 避免第⼀一个请求使⽤用预检请求
20. 优化实施 - Stage3 MSE(Media Source Extensions)初始化与拉流并⾏行行
21. 优化实施 - 播放⼊入⼝口
22. 优化实施 - 播放⼊入⼝口 推荐视频播放地址预取 视频临近播放结束时请求推荐视频播放地址,节约这部分 S2 时间 局部SPA化 相关推荐动态刷新当前⻚页⾯面模块,消除这部分的 S0 时间
23. 优化实施 - 播放⼊入⼝口 ⼊入⼝口部分预取播放器器资源 视频播放⻚页前⼀一个⻚页⾯面⼊入⼝口预取播放器器资源 ⾸首⻚页、空间⻚页、搜索⻚页等 热⻔门视频头部缓存预取 将热⻔门视频头部资源缓存,与⻚页⾯面同时输出,起播更更快
24. 优化实施 - ⻓长尾优化 ⻓长尾效应是最终优化的难点 3600 2700 1800 900 0 上海海 江苏 湖北北 浙江 湖南 天津 海海南 陕⻄西 重庆 ⼴广东 ⼴广⻄西 四川 北北京 河南 宁夏 云南 ⼭山东 贵州 辽宁⿊黑⻰龙江吉林林 ⼭山⻄西 安徽内蒙古福建 ⽢甘肃 ⻘青海海 澳⻔门 新疆 江⻄西 ⻄西藏 河北北 台湾 ⾹香港
25. 优化实施 - 产品化改造 旧版播放⻚页: 播放器器处在⾮非视觉中⼼心、⽆无法⾸首屏展示播放器器、播放器器载⼊入时机太过靠后 新版播放⻚页: 播放器器上移、资源优先级最⾼高 旧版 VS 新版
26. 优化实施 - Stage优化结果
27. 优化结果
28. 播放体验优化
29. 为什什么使⽤用 MPEG-DASH 格式 MPEG-DASH HLS FLV 标准类型 开放标准 苹果专有 Adobe专有(FLV) 切⽚片格式 MPD M3U8 Concat 切⽚片编码 fMP4/WebM MPEG2TS FLV 视频编码 H264/H265 VP8/VP9 AAC MP3 H264/H265 H264 AAC MP3 AAC MP3 ⾳音频编码 浏览器器⽀支持 dash.js hls.js flv.js ⾳音视频分离 ⽀支持 不不⽀支持 不不⽀支持 DRM ⽀支持 部分⽀支持 不不⽀支持 切⽚片时⻓长 灵活 固定 灵活 ⾃自适应码率 ⽀支持 ⽀支持 不不⽀支持 动态分辨率 ⽀支持 ⽀支持 不不⽀支持 视频体验需求升级 - ⽆无缝切换 - 纯⾳音频播放 业内成熟实践 - Youtube - Netflix - Twitch B站企业⽂文化⽀支持 - 新技术尝试的⽀支持
30. 播放体验优化 - ⽆无缝切换与卡顿率 MPEG-DASH 是一项通过通用 HTTP 服务 器,高质量传输动态自适应参数的媒体信 息的技术。 相比于 HTTP-FLV 能够针对网速和缓冲区 进行动态码率选择与调整,大幅降低卡顿 率
31. dash.js VS flv.js
32. 播放体验优化 - 卡顿率 bilibili HTML5 播放器器卡顿对⽐比图 8.00% • • • 校正卡顿统计 5.33% 动态切换码率策略略 动态缓冲区策略略 2.67% 0.00% 2018.08 2018.09 2018.10 Dash 卡顿率 2018.11 2018.12 FLV 卡顿率 2019.01
33. 播放体验优化 DASH ⾸首帧优化后 占总视频播放量量 60% + 接近于 FLV⾸首帧 A D 卡 顿 H S ⽀支 帧 全⾯面⽀支持 + 国内推⼴广 ⾸首 持 每⽇日 DASH 视频播放量量 DASH 视频播放中卡顿次数 对⽐比 FLV 视频下降 70% +
34. 弹幕体验优化
35. 弹幕渲染⽅方式 - CSS3与Canvas CSS3(逐帧添加) Canvas(逐帧绘制) 基于RequestAnimationFrame 但不同浏览器底层对不同弹幕渲染方式消耗不同
36. 弹幕体验优化 - 复⽤用弹幕节点 复用弹幕节点避免 DOM 频繁创建与移除
37. 弹幕体验优化 - 复⽤用弹幕节点
38. 弹幕体验优化 - ⾃自动弹幕密度 根据页面的性能状况动态调整弹幕密度 当用户当前页面性能无法满足用户设定的弹幕数量展 示时,播放器会根据一定的规则来动态调整播放器中 的弹幕设定,以保证流畅的播放器观看体验。 如果存在较为消耗性能的行为,则会影响单个 Frame 耗时,并且导致当时页面 FPS 降低 当遇到当前页面中较为消耗性能的行为时,会导致渲 染当前 Frame 的耗时变长,从而导致当前页面的 FPS 降低。
39. 蒙版弹幕 基于CSS3 mask-image属性的弹幕,配合人工智能 学习的路径点制造出防遮挡的效果 但有兼容问题,Chromium内核表现最好、FF会闪烁、Edge/IE不支持
40. 蒙版弹幕 - 体积优化 玩具的考虑与后果 初期直接用了base64整个文件,体积超大,用了新协议体积大幅降低 修改path的生成方式还能够进一步缩减体积
41. 蒙版弹幕 - 优化与局限 自动降帧策略 和弹幕类似的降帧策略 mask-image 在大屏幕下的表现 自动降帧无效,即使是静止的蒙版,配合弹幕也相当于每帧渲染了一个巨大的Canvas
42. 总结与展望 性能优化后续⼯工作 保持现有指标,继续优化,更更完善的灰度⽅方案和实验室 弹幕优化与标准展望 除了了继续实施优化⽅方案外,争取推标准,从浏览器器引擎的层⾯面推动弹幕和蒙版的优化
43. 在此键入姓名 在此键入tittle
44. 在此键入姓名 在此键入tittle
45. THANKS