Upgrade to Pro — share decks privately, control downloads, hide ads and more …

百度前端基础数据平台介绍

 百度前端基础数据平台介绍

大数据时代,前端作为重要的数据源,可以为产品和技术决策提供重要依据。该平台收集大量线上用户的真实数据,帮助产品线了解用户的终端环境、页面来源、访问习惯、访问耗时等基础信息,还可以统计用户的有效点击数、人均点击数、点击时间分布等用户行为数据,并且我们还监控了用户前端异常信息,帮助开发人员定位bug、修改bug。

Baidu FEX Team

March 29, 2014
Tweet

More Decks by Baidu FEX Team

Other Decks in Programming

Transcript

  1. 需求划分 • 网站的PV、UV • 广告的点击量 • 网站的主要入口 • 要和哪家网络运营商搞好关系 •

    某功能使用量 • 针对登陆用户做定制化? • 区分2G、3G、WIFI用户? • 用户什么时段访问网页? • IE6占比 • 分辨率 • 页面性能 • js异常 访问 点击 异常 性能 自定 义
  2. 指标确定---访问 • PV、UV • Refer来源(网站主要入口) • 运营商(要和哪家网络运营商搞好关系) • 登陆情况(针对登陆用户做定制化) •

    网络类型(区分2G、3G、WIFI用户) • 访问时段 • 浏览器分布(IE6占比) • 分辨率 • 操作系统 • 地域分布
  3. 系统构架 产品线 贴吧 知道 文库 …… 采 集 前 端

    性能 访问 数据 日志接受 日志过滤 数据汇总 点击 异常 自定义 展示 综合排名 涨跌幅 构成图 预警 排名 报表 报警邮件 趋势图 堆积图 数据趋势 前端数据平台(dp)
  4. 数据流程 采集 • 页面注入js脚本 • 监听事件(click、onerror、domReady等)、暴露接口 发送 • 访问特定的url地址 •

    数据作为url的参数,如:http://www.baidu.com/dp.gif?type=pv 接收 • server端接收参数数据,并且包括userAgent数据 • 将数据按行存储为文本log文件 格式化 • 读取log文件,过滤脏数据(格式错误、超过阈值等) • 结构化处理(一个字符串  多个字段) 计算 • count、sum、avg、top、group、sort等 入库 • mysql
  5. 1、js异常监控 初期: window.onerror 优点 – 可以监控到几乎所有js异常 – 产品线的js代码无需任何修改 缺点 –

    线上js是混淆压缩的,无行号 – 跨域的js,错误信息是“Script error” – 跨域的js,获取不到js文件名
  6. 1、js异常监控 Then: try/catch 优点 – 不怕跨域 – 无惧js压缩和混淆,捕获压缩前的行号 – 精确定位到模块、方法名

    难道要手动给所有js加try/catch? Of course not! js压缩打包时生成代码 FIS: https://github.com/fex-team/fis
  7. 2、大数据 数据达到 PB 级别 Hadoop  Nodejs + map/reduce 

    http://hadoop.apache.org Hive  类SQL语句来执行hadoop任务  http://hive.apache.org
  8. Google 延迟 400ms 搜索量下降 0.59% Bing 延迟2s 收入下降 4.3% Yahoo

    延迟400ms 流量下降 5-9% Mozilla 页面打开减少2.2s 下载量提升 15.4% Netflix 开启Gzip 性能提升13.25% 带宽减少50% 数据来源1 数据来源2 利益 1
  9. 类型 优点 缺点 示例 非侵入式 • 指标齐全 • 客户端主动监测 •

    竞品监控 • 无法知道性能影响用户数 • 采样少容易失真 • 无法监控复杂应用与细分功能 Yslow, Pagespeed, PhantomJS, UAQ 侵入式 • 真实海量用户数据 • 能监控复杂应用与业务功 能 • 用户点击与区域渲染 • 需插入脚本统计 • 网络指标没有全部统计到 • 无法监控竞品 DP, Google统计 监控方式对比 需要一种可持续、基于用户访问真实情况、能监控业务功能的监控
  10. 用户视角 • 为什么页面打不开? • 为什么半天页面都没显示出来? • 为什么按钮点击不了、搜索用户了? • 为什么图片显示这么慢? 监控什么指标

    1 工程师视角 DPS查询 TCP连接 发送请求 等待响应 html传输 静态资源下载 解析文档 执行JS/CSS规则 计算布局 渲染完成 联系
  11. 监控什么指标 1 • 为什么页面打不开? • 为什么半天页面都没显示出来? • 为什么按钮点击不了、搜索用户了? • 为什么图片显示这么慢?

    DPS查询 TCP连接 发送请求 等待响应 html传输 静态资源下载 解析文档 执行JS/CSS规则 计算布局 渲染完成 白屏时间 首屏时间 用户可操作 页面总下载 辅助指标 基于用户角度的关键指标选取
  12. 数据采集 - 首屏时间 2 一些陷阱: 1. 图片加载完成、出错,gif图片重复触发加载事件的处理 2. iframe的处理 :

    同图片 3. 异步渲染的处理 : 异步数据插入后再计算首屏 4. css背景图片的处理: 首屏重要css背景通过js发起图片请求判断是否已加载 5. 没有图片则以文字出现时间为准,可认为此统计js执行时刻
  13. Thanks • FEX官网 http://fex.baidu.com • Navigation Timing监控性能 • Resource Timing

    • Facebook测速方案 • 基于phantomJS的性能分析工具phantomas • http://www.webperformancetoday.com/ • js异常: http://t.cn/8sLQ9W9 • Echarts图表库: https://github.com/ecomfe/echarts 感谢大家的光临!