近年来互联网的发展越来越快，技术水平、服务质量不断提升，用户体验的要求也越来越高。对于视频观看体验，用户往往会因为数秒的等待时间或频繁的卡顿而放弃观看内容。如何提高用户内容消费的能力和体验成为了我们亟待解决的问题。

B站于2018年进行了一次基于"video first"的年度性优化，针对用户体验的关键指标进行性能优化改造。包括交互设计改版、基于MPEG-DASH协议的视频体验优化、播放页秒开、弹幕体验优化等方面。希望为面对改善用户体验和性能的与会者提供参考。

1. 播放页秒开优化
（1）播放资源前置：抽离核心播放器(无依赖)、非必须模块后置、减少解析时合并逻辑
（2）前端js避让策略：前端js下载、执行避让
（3）Node内网请求playurl：合并playurl到页面内容
（4）预取playurl：结束前预取推荐视频
（5）预取视频：热门视频内容预取，输出到页面
（6）其它渠道预载播放资源：首页、动态、空间、搜索等入口
（7）内核优化：DASH改造、FLV避免预检请求
（8）配置中心：资源长缓存，通过配置中心更改
（9）效果：50分位800ms，80分位1400ms

2.播放体验优化
（1）播放内核尝试DASH：自动切换、无缝切换、卡顿低
（2）自动切换策略: 根据用户网速及当前缓冲区大小自动切换
（3）无缝切换：支持多清晰度及多线路间无缝切换，用户对切换几乎无感
（4）效果：清晰度无缝切换、卡顿率下降60%

3. 弹幕体验优化
（1）弹幕引擎: 为什么使用两套渲染引擎
（2）弹幕优化: 复用弹幕节点，直播模式下丢弃屏幕外弹幕
（3）弹幕蒙板与监测: 不遮挡弹幕，更好的视频观看体验
（4）弹幕内核改造(todo): 使用字体渲染预计算宽高处理，减少重绘

听众收益：

1. 学习性能优化和用户体验结合的经验，特别是播放性能相关
2. 获得弹幕及类似展示效果的处理方面的参考
3. 对性能优化方面的工作提供一定的参考价值

“闪开”，即用户一点即开，用Web技术来实现和Native一致的页面加载体验。本演讲将通过从浏览器内核到客户端外壳、从服务端到前端等多端协作下所实现的日均N亿级PV页面“闪开”体验所采用的优化策略，及其背后技术策略的思考和选择。

通过重新理解和定义前端页面的渲染处理，分析常见的前端性能优化方案（如PWA或SSR等）所存在不足，并通过信息流场景的内容消费页面的深度优化案例，讲解如何通过Web技术来实现100%消除页面白屏而实现“闪开”的。

演讲提纲：

1.“闪开”优化的场景及背景分析

2.“闪开”优化的难点分析及策略推导

3.“闪开”优化策略的落地及上线控制

4.极致的性能优化对技术架构的挑战

5.关于Web性能优化的总结和思考

 

听众收益：

1. 了解一种全新的区别于SSR、CSR、PWA的页面渲染优化处理技术

2. 了解浏览器离线缓存技术在前端页面性能优化中的应用价值

3. 在极致的性能优化中，优化策略对于前端或移动架构设计带来的挑战，该如何对其进行演进

移动互联网发展这么多年，稳定性、性能一直是开发者面临的主要线上问题。字节跳动发布多款App，全球几亿用户量级，在追求用户体验上面，面临着巨大的挑战。用户会因为滑动信息流、播放视频流的卡顿，手机发烫、流量消耗过大等问题而卸载使用，如何优化性能手段提升留存率是我们需要解决的问题。

本次分享，以线上产品遇到的一些问题为背景，详细介绍性能监控体系中不同维度的性能监控，提供发现线上问题、定位具体问题原因的能力。包括App耗电问题、大内存归因、流量消耗过大问题的监控原理和问题排查。对于线上单点问题排查，日志检索和指令下发的闭环系统结构。希望能对线上性能问题精细监控提供一些借鉴和帮助。

 

演讲提纲：

1. 研发流程和现状

(1) 研发流程中可能出现的问题

(2) 线上问题的主动发现

(3) 解决用户反馈问题的流程

2. 性能监控体系的建立

(1) 性能监控概要

(2) 大内存和OOM的原因

(3) 卡顿指标的建立

(4) 排查空间占用的罪魁祸首

(5) 耗电操作的监控

(6) 流量消耗的来龙去脉

3. 单点问题追查

(1) 日志中间件和日志库

(2) 日志流系统

 

听众收益：

1. 了解监控体系的内容和具体作用

2. 知道如何解决大用户量级的线上性能问题的方式手段

3. 对于线上问题的监控，提高监控的能效性具有一定的参考作用

在移动互联网的下半场，React Native、Hybrid 等跨平台框架在 Qunar 的应用也越来越广泛，框架方面的进化带来的成本节省已经没有以前那么明显，接下来，性能和体验成为了重点关注的点，希望能为用户提供更加流畅的服务体验。监控系统作为 App 性能等指标的仪表盘，变得也相对重要，但是我们也不希望开发者把大量的时间花在埋点上，所以如何提供一个方便准确的无埋点监控报警系统，并且在性能优化等方面有一定的作为，将会变得的很有价值。在 Qunar 我们已经有了完善的一套系统，希望给大家分享一些经验和心得。

演讲提纲：

1、性能优化的必要性和遇到的痛点，需要一个方便的监控系统

2、Qunar 的无埋点监控系统介绍

3、实现过程中遇到的挑战和解决思路，包括 React Native 、 Hybrid 等方面

4、监控系统在性能优化方面的实践

 

听众收益：

1. 通过 Qunar 的实践经验，了解Native、RN 和Hybrid 等混合技术并存的大前端时代，如何做好监控告警系统

2. 在性能优化方面，提升 App 性能和体验方面，监控系统发挥作用以及实践经验

3. 无埋点的监控的实现思路

4.  对性能优化、避免线上故障、灰度发现问题等过程有一个系统的认识和思考。

App WebView 的混合开发方式由于其高效的迭代效率一直在业界备受应用，也正因如此，其渲染性能也往往被拿来和 Native 应用去做横向比较，自然也对前端开发者提出了更高甚至跨 scope 的技能要求。

对此，我们的分享先会从拆解我们所关注的核心性能感官体验开始（First Paint, First Meaningful Paint, First Screen Paint），并且从工具侧和监控侧赋能工程师，找到影响各个关键渲染帧的症结，逐步渗透到包括在 Vue 等主流 MVVM 框架下一些实践对性能的影响。带着以上的思考和实践，分享会再聚焦“零白屏/首屏秒开”的目标，讲解小红书前端如何借助客户端缓存能力、服务端渲染能力，实现的工程化的前端渲染性能优化解决方案。
 

演讲提纲：

1. App WebView 开发模式给前端开发者提出的挑战，传统前端性能评估方式的崩塌
2. 核心性能体验指标的梳理和工程化的采集监控方案
3. 基于关键渲染帧的过程拆解、工具，和多个场景下的 practice
4. 小红书前端基于客户端缓存能力、服务端渲染能力的“零白屏/首屏秒开”方案
5. 前端性能优化的工程化思考

 

听众收益：

1. 理解在现代的 Web 开发模式下前端开发者了解前端渲染过程的必要性，并了解如何借助浏览器能力对其过程更加可控
2. 了解一套基于用户侧、端上的前端性能监控工程化方案
3. 了解借助客户端能力、服务端能力在前端渲染性能优化上的一些参考

随着手Q iOS客户端App越来越庞大，手Q在性能方面面临的挑战也愈发严峻，诸如App越来越卡顿、内存占用越来越大、发热耗电等等这类问题都严重影响着用户体验。为了保证手Q的性能体验，我们针对这几类问题分别进行了深入优化，最终构建了一套比较完整的移动客户端性能监控组件（ rainbow ），本次分享将重点介绍我们在实践过程中的干货技术内容。 

 

演讲提纲：

1. App性能-移动终端的兵家必争之地 

（1）手Q在发展过程中遇到的性能挑战 

（2）手Q APM性能监控体系简介 

2. 卡顿优化-为App流畅度保驾护航 

（1） iOS卡顿监控原理和方案 

（2）常见卡顿问题优化干货分享 

（3）如何在快速的版本迭代中保证App性能体验？ 

3. 内存优化-合理利用每一块内存 

（1）iOS内存监控方案：让内存问题变得“有的放矢” 

（2）常见内存问题原因总结 

（3）手Q SIGKILL爆内存监控体系介绍 

4. 节能省电-移动终端的独有挑战 

（1）iOS发热耗电监控方案 

（2）多维度分析App性能问题案例 

5. 机器学习在性能监控的应用 

（1）性能问题原因智能诊断定位 

（2）机器学习在海量性能数据分析中的应用 

 

听众收益：

1. 了解iOS性能监控的方案原理（包括卡顿、内存和耗电） 

2. 了解手Q在保证App性能质量方面的流程和方案 

3. 了解iOS常见性能问题及优化方案