想要告别996，这些前端性能优化案例需要了解一下

　　想要告别996，这些前端性能优化案例需要了解一下

　　对于端上的性能监控与优化，一直是热门话题。移动互联网经过近10年的发展，各大APP随着时间和业务的累加变得越来越重，复杂度高的业务模块和数量巨大的第三方插件，导致APP越来越慢、越来越卡，严重影响了用户体验。

　　因此，对APP进行性能优化就变得尤为重要。性能优化有很多指标，比如Crash率、卡顿、CPU、内存、存储和网络等，建立完善的数据指标并进行有效采集是一项很复杂的任务。除了手动埋点以外，业界对自动化埋点和性能优化监控平台的探索也层出不穷，性能优化在一线大厂得到了高度的重视。

　　GMTC全球大前端技术大会北京站特别为大家设置了前端技术性能优化专场，精心挑选*敏*感*词*互联网巨头公司的诸多性能优化实战案例，邀请不同业务场景的一线技术专家分享相关技术实践，希望能给大家带来更多的思考和落地参考。

　　B 站的视频体验进化之路

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

　　B站于2018年进行了一次基于"videofirst"的年度性优化，针对用户体验的关键指标进行性能优化改造。包括交互设计改版、基于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):使用字体渲染预计算宽高处理，减少重绘

　　0.3秒完成渲染！信息流内容页“闪开”优化总结和思考

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

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

　　演讲提纲：**

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

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

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

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

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

　　字节跳动线上性能监控体系的建设

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

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

　　演讲提纲

　　1. 研发流程和现状

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

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