大前端性能优化

会议室:待定
出品人:万里鹏

性能优化能直接提升用户更快、更流畅的产品体验,在资源受限的移动设备上显得越发重要... 展开 >

专题出品人:万里鹏

字节跳动Android 平台架构负责人

万里鹏,2017年加入字节跳动,之前参与并负责移动端性能监控体系的建设,为公司所有移动端产品提供基础监控能力服务。目前就职于今日头条Android平台架构部,负责Android端性能、稳定性优化,研发流程组建和标准化建设,研发效率优化,架构优化与演进。主要服务于今日头条、同时技术复用在抖音、西瓜视频、番茄小说、多闪等全公司级移动端产品,为提升业务开发效率、架构与开发模式演进、优化用户体验提供整套的技术服务支持。

专题: 大前端性能优化

性能优化能直接提升用户更快、更流畅的产品体验,在资源受限的移动设备上显得越发重要。通过全链路监控前端、后端、客户端整个通道,寻找用户未到达场景下主要流失原因,拆解用户到达场景下的性能瓶颈,优化整个关键耗时路径,提升产品服务稳定性和速度。本专场将邀请在全链路监控、性能优化方向有丰富经验的技术专家,分享实践经验。

by 吴开放

百度
资深研发工程师

百度移动搜索历经多年的发展,新业务模块不断增加,技术演进迭代过程中也存在多套新旧框架,这些造成了臃肿的运行时,使得页面响应用户操作变慢,交互卡顿。

如何衡量和监控体验问题,形成对产品全流程的清晰认识。如何在常规优化后,通过多种手段确定和践行一系列新优化方向。如何在辛苦优化之后,避免我们的努力泡汤,指标退化。事实上,非常多的业务都面临这些问题。本次演讲我将分享百度搜索前端近期在页面交互全流程性能优化经验,希望与大家一起探讨解决这些问题,保证业务和技术继续前进。

演讲提纲:

1. 背景与问题:搜索 H5 面临的问题

2. 解决思路:指导工作的方法论

3. 量化:了解四个首屏、可交互时间、卡顿率、体积的定义、采集和意义

4. 监控与分析:性能监控统计平台功能特性和架构介绍,了解如何设计监控平台

5. 优化实践

  • 输入阶段:预加载页面的主文档和通用子资源。
  • 搜索浏览阶段:通过精准定位首屏点加快首屏渲染、优化 MVVM 框架的 CSR 和 iframe 来减少卡顿、采用自适应 Webp 图片格式达到体积和成本双收益等
  • 点出优化:预加载资源和基于端能力的点出加速等

6. 防退化:介绍线下拦截和线上报警等多工具保障指标不退化的思路

听众收益:

1. 获得百度搜索 H5 全流程性能优化建设过程和经验
2. 了解从加载、卡顿、交互等全流程性能指标建设
3. 了解卡顿、可交互、点出加速等优化方法
4. 了解线下线上结合进行性能监控和防退化

听懂我的演讲,需要具备这些知识储备:

1. 前端基础知识
2. 性能优化
3. 数据统计和分析
4. 开发者工具、Lighthouse 工具等

by 杨凯

快手
技术专家

随着快手 App 功能越来越多,开发同学不断增加,性能方面面临的挑战也愈发严峻,诸如 App 越来越卡顿、内存占用越来越大、包大小不断增加等各类问题都严重影响着用户体验。 为了保证体验,我们针对这几类问题分别进行了深入优化,并构建了一套比较完整的移动客户端性能监控平台,本次分享将重点介绍我们在实践过程中的干货技术内容。

演讲提纲:

1. 快手 APM 系统(指标监控)
    主要解决我们面临的各种稳定性、性能问题

  • 优化了 40% 的启动速度,提升了我们的 0 播、留存等关键产品数据
  • 优化了 23M 包大小,大大降低了我们新用户获取成本
  • 两个优化,都获得了快手技术线的绩效提升奖

2. 启动优化

  • 定位问题
    • 将启动时运行的代码,按照功能,做成 Task
    • 线上收集每个 Task 的耗时
    • 线下 Android 利用 Systrace、iOS 自研火焰图工具,分析耗时
  • 一些优化手段
    • 优化整体流程
    • 主动 dex2oat
    • 二进制、dex 重排
  • 监控、维持
    • 线上埋点、分版本、机型、系统多纬度监控

3. 内存优化

  • Java
    • 内存镜像转储
    • 内存镜像分析
    • 内存镜像裁剪
  • Native

4. 卡顿优化

  • UI 卡顿
    • 监控
    • 优化
  • 视频卡顿
    • 关注百秒卡顿、起播时长
      • DNS 预解析
      • 动态码率
      • Buffer Size 的取值考虑(首帧时长和卡顿率在这个指标上是矛盾的)
      • 预缓存
      • 降低动态码率波动范围

听众收益:

深入了解过亿用户、使用时间超长的产品,怎样搭建 APM,保证 App 质量

适合人群:

 Android、iOS 开发人员,对于移动端性能比较关注的人员

by 徐磊

字节跳动
基础体验优化团队负责人

重点介绍 App 启动、内存及 ANR 性能优化演进,涵盖应用、系统层面的线上线下优化和相关基础能力建设。

1. 面临挑战

  • 产品复杂度:产品覆盖图文、视频、直播、小程序等众多业务,技术栈复杂
  • 业务迭代速度快:迭代速度高于市面大多数 App,问题接踵而至,给防劣化带来很大挑战
  • 用户时长:作为资讯类产品,前台场景/人均使用时长较长,发生问题概率大

2. 启动优化实践:

  • 头条启动优化演进历程介绍
  • 业务层面亮点优化案例分享
  • 借助系统之力让 App 性能更上一层楼
  • SpeedProfile 在头条的实践
  • 择优调度加强消息调度竞争力
  • 场景识别让预加载更有针对性
  • 资源重排让性能锦上添花
  • 深入探索虚拟机的更多潜能
  • 启动框架在性能优化的角色和思考
  • 线下防劣化体系建设介绍

3. 内存优化实践:

  • 内存不足会带来哪些问题?
  • 内存问题如何分析?
  • 业务层面的优化实践
  • 典型问题举例:就业界 App 遇到的通用问题进行深入解剖
  • OOM 问题原因和表现
  • OOM 类问题踩坑记录和分析思路
  • 系统层面内存优化的相关探索
  • 线上线下内存监控方案介绍

4. ANR 优化实践

  • ANR 设计原理及分析误区介绍
  • 系统监控方案存在的缺陷(ANR Trace 实际能帮你解决多少问题?)
  • 引起 ANR 问题都有哪些原因?
  • 当前消息耗时较长
  • 历史消息耗时
  • 系统环境:如 IPC、CPU、IO、GPU 等系统负载,进程间抢占;
  • 进程内部环境:线程抢占内存、锁等待
  • 针对上述不同问题如何分析和量化?
  • 从 App 视角如何准确分析 ANR 的 RootCase?
  • ANR 工具建设:
  • App 视觉可以开展哪些监控能力建设
  • ANR 自动归因能力的探索与实践
  • 该方向在系统层面优化的探索及方案介绍

5. 用户体验优化的回顾与展望

  • 基础体验优化对用户体验的考量
  • 基础体验优化给产品带来的价值

 

听众收益:

  • 除业界常见优化手段之外的系统层面的优化思路
  • ANR 优化实践方案

听懂我的演讲,需要具备这些知识储备:

1.具有一定 Android 基础知识,对应用开发或系统知识有较好了解的人员
2.正在从事性能优化或对移动端性能优化,比较感兴趣的人员

by 林雨

美团点评
技术专家

随着前端技术的不断发展,轻量高效灵活的动态化能力成为了业务开发的新选择, 美团经过多年的探索和实践,沉淀了MRN/Picasso/Mach等多种动态化方案。动态化容器与传统的Web或Native在生命周期、指标度量上有不小的差异和区别,为了保证动态化容器的性能治理、故障定位、异常告警等能力,美团将动态化容器的监控能力落地并提供了完整的线上运维方案。

Raptor 是美团前端监控平台,提供了 Web / 小程序 / Native / 动态化容器 / Node 等前端相关技术栈的监控能力,在各业务得到了广泛的应用,为公司的前端开发者提供了日均千亿级的监控数据。本次分享将介绍 Raptor 平台在容器监控能力上的探索过程与建设经验。

演讲提纲:

  • 容器监控的诉求:动态容器在美团的使用情况,以及对监控能力的要求。
  • Raptor 前端监控平台介绍:介绍Raptor平台的架构、演进和在各业务的使用情况。
  • 容器监控能力建设:包含性能、告警、排障、治理等多方面的多方面能力建设,同时介绍多级下发策略的实现。
  • 最佳实践及优化:合理使用容器监控能力,来保障用户体验,提升应用质量。
  • 未来规划:动态容器监控现阶段的不足及未来的展望。

听众收益:

  • 了解监控及动态化容器相关知识
  • 培养利用监控系统优化和排查前端故障的能力

知识储备:

  • 对前端监控系统有所涉猎
  • 对前端动态化相关知识

交通指南

北京富力万丽酒店

Renaissance Beijing Capital Hotel
地址: 北京朝阳区东三环中路61号
  • 微信咨询

  • 电话咨询

    联系电话:86+ 13167596032

微信联系我们