您好,欢迎访问三七文档
当前位置:首页 > 商业/管理/HR > 咨询培训 > 百度前端基础数据平台介绍
百度前端基础数据平台介绍dp:数据点评SharedBy张军前端有什么数据我是站长•网站的PV、UV•广告的点击量•网站的主要入口•要和哪家网络运营商搞好关系我是产品经理•某功能使用量•针对登陆用户做定制化?•区分2G、3G、WIFI用户?•用户什么时段访问网页?我是前端工程师•IE6占比•分辨率•页面性能•js异常需求梳理需求划分•网站的PV、UV•广告的点击量•网站的主要入口•要和哪家网络运营商搞好关系•某功能使用量•针对登陆用户做定制化?•区分2G、3G、WIFI用户?•用户什么时段访问网页?•IE6占比•分辨率•页面性能•js异常访问点击异常性能自定义指标确定---性能•白屏时间•首屏时间•用户可操作•页面总下载指标确定---访问•PV、UV•Refer来源(网站主要入口)•运营商(要和哪家网络运营商搞好关系)•登陆情况(针对登陆用户做定制化)•网络类型(区分2G、3G、WIFI用户)•访问时段•浏览器分布(IE6占比)•分辨率•操作系统•地域分布指标确定---点击•总点击量•人均点击量•流出url分布•点击时间分布•首次点击时间指标确定---异常•异常pv比例•异常的浏览器•js异常提示信息•异常的js文件、行数•某异常的数量趋势指标确定---自定义•数量趋势•维度信息系统设计系统构架产品线贴吧知道文库……采集前端性能访问数据日志接受日志过滤数据汇总点击异常自定义展示综合排名涨跌幅构成图预警排名报表报警邮件趋势图堆积图数据趋势前端数据平台(dp)展示数据可视化访问数据访问数据访问数据访问数据点击数据点击数据异常数据—概况异常数据—详细自定义数据华丽的背后数据流程采集•页面注入js脚本•监听事件(click、onerror、domReady等)、暴露接口发送•访问特定的url地址•数据作为url的参数,如:=pv接收•server端接收参数数据,并且包括userAgent数据•将数据按行存储为文本log文件格式化•读取log文件,过滤脏数据(格式错误、超过阈值等)•结构化处理(一个字符串多个字段)计算•count、sum、avg、top、group、sort等入库•mysql1、js异常监控初期:window.onerror优点–可以监控到几乎所有js异常–产品线的js代码无需任何修改缺点–线上js是混淆压缩的,无行号–跨域的js,错误信息是“Scripterror”–跨域的js,获取不到js文件名1、js异常监控Then:try/catch优点–不怕跨域–无惧js压缩和混淆,捕获压缩前的行号–精确定位到模块、方法名难道要手动给所有js加try/catch?Ofcoursenot!js压缩打包时生成代码FIS:、大数据数据达到PB级别HadoopNodejs+map/reduce类SQL语句来执行hadoop任务总结•确定数据指标•数据采集•大数据处理•可视化展示前端基础数据平台说好的性能呢?百度前端基础数据平台介绍性能监控篇SharedBy张涛1.为什么要监控性能2.常用监控方式3.开始搭建性能监控系统4.利用监控解决问题主要议题Part1为什么要监控性能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体验体验2移动时代的挑战3数据:HttpArchive前端渲染瓶颈4“Ifyoucannotmeasureit,youcannotimproveit”——WilliamThomsonPart2常用监控方式WebPageTest输入url获取各地测试数据命令行获取页面加载状况JS监测部署脚本到页面中采集类型优点缺点示例非侵入式•指标齐全•客户端主动监测•竞品监控•无法知道性能影响用户数•采样少容易失真•无法监控复杂应用与细分功能Yslow,Pagespeed,PhantomJS,UAQ侵入式•真实海量用户数据•能监控复杂应用与业务功能•用户点击与区域渲染•需插入脚本统计•网络指标没有全部统计到•无法监控竞品DP,Google统计监控方式对比需要一种可持续、基于用户访问真实情况、能监控业务功能的监控我们的做法•使用JS监测线上用户真实访问性能为主•使用phantomJS等工具线下分析页面静态资源为辅综合利用发挥最大价值Part3开始搭建性能监控系统用户视角•为什么页面打不开?•为什么半天页面都没显示出来?•为什么按钮点击不了、搜索用户了?•为什么图片显示这么慢?监控什么指标1工程师视角DPS查询TCP连接发送请求等待响应html传输静态资源下载解析文档执行JS/CSS规则计算布局渲染完成联系监控什么指标1•为什么页面打不开?•为什么半天页面都没显示出来?•为什么按钮点击不了、搜索用户了?•为什么图片显示这么慢?DPS查询TCP连接发送请求等待响应html传输静态资源下载解析文档执行JS/CSS规则计算布局渲染完成白屏时间首屏时间用户可操作页面总下载辅助指标基于用户角度的关键指标选取数据采集-统计起点2用户点击一个链接或者输入url确认开始统计方式一使用cookie/hash记录用户点击超链接的时间戳方式二使用NavigationTiming接口数据采集-白屏时间2=140318_0V_BA1-r:1-c:0首次出现内容页面白屏结束出现在头部资源下载完附近数据采集-白屏时间2头部资源下载完成≈白屏时间头部底部内嵌JS来统计头部资源加载-白屏时间数据采集-首屏时间2图片是制约首屏的主要因素获取首屏内图片的加载耗时即可获取首屏时间数据采集-首屏时间21首屏大概位置执行统计JS2绑定所有图片加载事件3页面onload之后找到最慢一张图片加载时间首屏统计流程数据采集-首屏时间2一些陷阱:1.图片加载完成、出错,gif图片重复触发加载事件的处理2.iframe的处理:同图片3.异步渲染的处理:异步数据插入后再计算首屏4.css背景图片的处理:首屏重要css背景通过js发起图片请求判断是否已加载5.没有图片则以文字出现时间为准,可认为此统计js执行时刻数据采集-可操作时间2Domreadyor核心JS加载完毕(模块化异步加载情况)数据采集-总下载时间2onloador异步渲染完成同步为主异步为主数据采集-网络指标2PerformanceTiming=zh数据采集-用户网络2移动端网络一直是瓶颈,如何统计用户使用的网络类型?1.Html5接口navigator.connection2.使用测速根据下载速度分布确定IP段对应的网络数据采集-用户网络2通过IP测速来获取全用户IP段下载速率,将不同速率分布分位三个区间分别对应2g3gWIFI数据输出3让数据会说话数据输出3数据输出3Part4利用监控解决问题预估问题监控数据查找瓶颈选择方案优化反馈调整解决流程Case:巴西DNS优化•现状分析:巴西等国家网络慢,国外部署机房又少,网页加载很慢•预估问题:可能是某静态资源域名下DNS查询很慢•监控数据:使用resourcetiming监控第三方域名DNS等时间•查找瓶颈:确认DNS查询确实很长•选择方案:服务迁移到本地等•优化实施:按照方案实施优化•反馈调整:DNS时间大为减少,页面加载有所提升,但仍需优化1.综合利用各种监控优势2.多从用户角度思考3.尝试多种方案,灵活利用Html5等新技术4.采集关键数据5.监控必须解决问题为基础6.没有牛逼的技术,关键在于更好解决需求回顾总结Thanks•FEX官网•NavigationTiming监控性能•ResourceTiming•Facebook测速方案•基于phantomJS的性能分析工具phantomas••js异常:•Echarts图表库:感谢大家的光临!
本文标题:百度前端基础数据平台介绍
链接地址:https://www.777doc.com/doc-5890527 .html