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

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

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

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

B 站的视频体验进化之路

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

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): 使用字体渲染预计算宽高处理，减少重绘

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

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

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

 演讲提纲：**

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

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

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

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

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

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

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

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

 演讲提纲

1. 研发流程和现状

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

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

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

2. 性能监控体系的建立

(1) 性能监控概要

(2) 大内存和 OOM 的原因

(3) 卡顿指标的建立

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

(5) 耗电操作的监控

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

3. 单点问题追查

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

(2) 日志流系统

去哪儿网客户端无埋点监控与性能优化实践

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

 演讲提纲

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

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

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

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

从重新认识前端渲染开始，小红书的前端性能监控及优化实践

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

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

 演讲提纲

1.App WebView 开发模式给前端开发者提出的挑战，传统前端性能评估方式的崩塌

2. 核心性能体验指标的梳理和工程化的采集监控方案

3. 基于关键渲染帧的过程拆解、工具，和多个场景下的 practice

4. 小红书前端基于客户端缓存能力、服务端渲染能力的“零白屏 / 首屏秒开”方案

5. 前端性能优化的工程化思考

除了上述热门议题之外，在 GMTC 全球大前端技术大会上还有关于前端框架，工程化，性能优化，Node、小程序、Flutter、移动 AI、前端团队管理等内容的 50+ 干货技术案例分享。

目前大会 8 折倒计时报名中，欢迎联系票务小姐姐：18514549229（同微信），赶快来现场与来自 Google、Twitter、BAT、字节跳动等大厂的技术负责人面对面交流吧。