如何用AI技术降噪? QCon 广州“音视频架构实践”专场给你答案! 了解详情
写点什么

把前端性能监控做到极致

  • 2019 年 9 月 07 日
  • 本文字数:938 字

    阅读完需:约 3 分钟

把前端性能监控做到极致

ArchSummit北京2018大会上,杨森讲师做了《把前端性能监控做到极致》主题演讲,主要内容如下。


演讲简介


在衡量 Web 页面性能时,最普遍的做法是通过 YSlow、Lighthouse 等工具对页面进行一次性的诊断分析。诚然这些工具可以检查出诸多页面性能的瓶颈和优化点,但我们依然无法感知并量化用户在访问页面时的具体表现,因为真实场景的页面性能会受到诸多因素的影响,如用户使用的终端类型、服务器响应速度、所在地域 CDN 性能等。


借助“window.performance”对象我们可以在客户端获取到页面加载相关的性能指标,然而最为大家熟知的“performance.timing”字段已经被废弃,与此同时一批基于 High Resolution Time 和 Performance Timeline 的 API 也悄然加入到规范之中并逐渐被各大浏览器实现。


本次演讲将基于蚂蚁金服最新的实践结果,分享如何通过 Performance 相关的 API 准确的采集用户性能数据,并如何通过大数据计算加工最终产出用户性能分析产品,以及如何通过性能数据纵向衡量产品性能、发现性能瓶颈。


演讲提纲


1- Web 性能分析方案介绍


  • 定性(工具检测)

  • 定量(基于真实用户数据)


2- 真实用户性能数据采集方案


  • 现有方案的问题

  • 新的 API 及采集方案

  • 如何基于新的 Performance API 采集真实用户数据

  • 数据上报与脏数据的处理


3- 如何打造规范、易用、可行动的性能分析产品


  • SPA 是怎么带来 false positive 的性能数据的

  • 性能数据采集过程中的常见错误

  • 指标计算口径如何影响分析结果

  • Service Worker 等新兴 API 如何影响性能数据


4- 使用性能数据指导产品优化


  • 蚂蚁金服的实践效果


听众受益点


  • 如何准确、规范的采集 Web 性能数据

  • 避免性能数据采集过程中的常见错误

  • 利用最新的 API 采集到更多样、更精准的性能数据

  • 如何利用性能数据指导产品优化


讲师介绍


杨森


蚂蚁金服 前端技术专家


蚂蚁金服前端技术专家,W3C Web Performance Working Group 成员,目前专注于为蚂蚁金服提供规范、易用、可行动的前端 APM 数据及产品。阿里巴巴集团实时监控平台 Clue 创始人,从零开始打造了一款服务于阿里集团 70 余部门的实时监控分析平台。曾参与业务数据分析产品、数据分析 BI 工具、智能数仓引擎等多种类型数据产品的开发与前端架构工作,有丰富的数据处理经验。












完整演讲 PPT 下载链接


https://archsummit.infoq.cn/2018/beijing/schedule


2019 年 9 月 07 日 13:493364

评论

发布
暂无评论
发现更多内容

IDEA 异常退出 解决方法

任广印

IDEA

《论雨伞道德》- 不要和自己的良心捉迷藏

石云升

读书笔记 28天写作 雨伞道德

甲方日常 91

句子

工作 随笔杂谈 日常

安卓驱动开发!系统盘点Android开发者必须掌握的知识点,搞懂这些直接来阿里入职

欢喜学安卓

android 程序员 面试 移动开发

【Mysql-InnoDB 系列】幻读、死锁与事务调度

程序员架构进阶

MySQL 架构 innodb 事务 28天写作

即构SDK新增焦点语音功能,可实现特定用户语音的聚焦

ZEGO即构

Maintainer 聚光灯:KubeEdge 和 Volcano 的王泽锋

华为云原生团队

开源 边缘计算 华为云 批量计算

程序员必知的几种限流方案

Java架构师迁哥

数据中台:建立在数据网络效应之上的赛道

奇点云

大数据 数据中台 云原生 数据

【Android Tips】小厂的扫码还能怎么做?

李小四

机器学习 二维码 扫码 微信扫码

Elasticsearch 批量查询 mget

escray

elastic 七日更 28天写作 死磕Elasticsearch 60天通过Elastic认证考试

十年运维经验总结出的智能运维系统落地方案

小术晓术

人工智能 运维 企业信息化 运维自动化 信息化

【CSS】波纹效果

德育处主任

CSS小技巧 28天写作 纯CSS

Flink + Iceberg 全场景实时数仓的建设实践

Apache Flink

flink

个人信息严控的时代,AI如何实现“安全”的智能营销?

星环科技

大数据

CSS实现数据统计

德育处主任

大前端 CSS小技巧 28天写作 纯CSS

前端知识总结输出文章目录大全

梁龙先森

JavaScript 大前端 编程语言 28天写作

高阶段位机房管理:3D集装箱数据中心,触发科技“火苗”的燃烧

一只数据鲸鱼

数据可视化 3D可视化 机房管理 数据中心可视化 集装箱式数据中心

Vue 3自定义指令开发

葡萄城技术团队

阿里巴巴正式推出2021年金三银四1000道Java工程师面试题手册(含答案)

Java架构追梦

Java 阿里巴巴 面试 架构师 金三银四

android开发面试准备!Android高级工程师进阶学习,已开源

欢喜学安卓

android 程序员 面试 移动开发

「产品经理训练营」第三章作业

Sòrγy_じò ぴé

产品经理训练营 极客大学产品经理训练营 产品训练营

【CSS】不规则阴影

德育处主任

css3 html/css CSS小技巧 28天写作 纯CSS

深扒!用6部分讲完Java性能调优:多线程+设计模式+数据库

996小迁

数据库 JVM 设计模式 多线程 性能调优

灵雀云Kube-OVN进入CNCF沙箱,成为CNCF首个容器网络项目

York

灵雀云 Kubernetes Kube-OVN

[高并发]高并发分布式锁架构大解密,不是所有的锁都是分布式锁!!

for

不明白线程池?那看看这篇,附10道面试题

田维常

线程池

百度信息流和搜索业务中的弹性近线计算探索与应用 | 文末送福利

百度Geek说

Java 大前端 算法工程师 技术宅

Android JNI模板与读取系统属性笔记

Changing Lin

android

IntelliJ IDEA 20周岁啦,为期2天的周年庆活动对开发者免费开放

YourBatman

eclipse ide IDEA IntelliJ IDEA

「云智公开课」百度沧海·存储

「云智公开课」百度沧海·存储

把前端性能监控做到极致_ArchSummit_杨森_InfoQ精选文章