《美团通用性能监控平台和WEB性能分析框架.pdf》由会员分享，可在线阅读，更多相关《美团通用性能监控平台和WEB性能分析框架.pdf（105页珍藏版）》请在三一文库上搜索。
1、美团性能分析框架和性能监控平台 美团网 王仕军 美团性能分析框架和监控平台 前端组 王仕军 美团网 不讲什么？ 业界最佳实践 ? ? ? ? 结果指标：如完全加载时间，DomReady，首屏等 讲什么？ 讲什么？ 优化美团主站性能遇到的瓶颈？ 讲什么？ 优化美团主站性能遇到的瓶颈？ 如何突破这个瓶颈？成效如何？ 讲什么？ 优化美团主站性能遇到的瓶颈？ 如何突破这个瓶颈？成效如何？ 今天你可以带走什么？ 遇到瓶颈之前 我们都做了什么？ 6 我们都做了什么？ 结果指标数据采集：完全加载，DomReady，首屏 6 我们都做了什么？ 结果指标数据采集：完全加载，DomReady，首屏 依照“业界最
2、佳实践”快糙猛的做了很多事情 异步化、静态化、LazyLoad、BigRender 6 我们都做了什么？ 结果指标数据采集：完全加载，DomReady，首屏 依照“业界最佳实践”快糙猛的做了很多事情 异步化、静态化、LazyLoad、BigRender 决策多基于别人的经验（甚至拍脑袋）而非基于数据 6 遇到什么瓶颈？ 燃料快用尽，优化无止境 异常波动无从解释 异常波动无从解释 无法挖掘更多的优化点 无法挖掘更多的优化点 我们需要的是这个 如何突破瓶颈？ 我们到底在优化什么？ 我们到底在优化什么？ 文档生成速度？ 我们到底在优化什么？ 文档生成速度？资源加载速度？ 我们到底在优化什么？ 文档生
3、成速度？资源加载速度？ 渲染速度？ 我们到底在优化什么？ 文档生成速度？资源加载速度？ 渲染速度？用户体验？ 主文档 核心CSS 主文档 核心CSS 首屏图片 主文档 核心CSS 核心JS 首屏图片 主文档 核心CSS 核心JS 其他内容 首屏图片 主文档 瀑布流的背后？ redirect redirect cache redirect cache dns redirect cache dns connect redirect cache dns connect send redirect cache dns connect send receive redirect cache dns co
4、nnect send receive css wait css load redirect cache dns connect send receive css wait css load js wait js load redirect cache dns connect send receive css wait css load js wait js load img wait img load redirect cache dns connect send receive css wait css load js wait js load img wait img load 70% 2
5、0% 10% redirect cache dns connect send receive dispatch action template css wait css load js wait js load img wait img load 70% 20% 10% redirect cache dns connect send receive dispatch action template db cache service css wait css load js wait js load img wait img load 70% 20% 10% redirect cache dns
6、 connect send receive dispatch action template header content footer db cache service css wait css load js wait js load img wait img load 70% 20% 10% redirect cache dns connect send receive dispatch action template latency latency header content footer db cache service css wait css load js wait js l
7、oad img wait img load 70% 20% 10% redirect cache dns connect send receive dispatch action template latency latency header content footer db cache service css wait css load js wait js load img wait img load 70% 20% 10% 分析框架 如何全面把控性能？ 需要啥样的数据？ 需要啥样的数据？ 端到端 需要啥样的数据？ 端到端 多维度 需要啥样的数据？ 端到端 实时性 多维度 需要啥样的数据
8、？ 端到端 实时性 多维度多粒度 需要啥样的数据？ 端到端 实时性 多维度多粒度 准确性 需要啥样的收集脚本？ 尽量减少对业务代码的入侵和耦合 独立的数据收集脚本，类似 GA 的注入方式 不依赖于前后端框架，方便移植到其他项目 收集脚本不能影响被测量页面的性能 宿主页面完成加载后开始加载数据收集脚本 尽可能的合并性能数据的发送，节省带宽 如何获得所需数据？ 如何获得所需数据？ 主文档加载速度：Navigation Timing API 如何获得所需数据？ 主文档加载速度：Navigation Timing API 静态资源速度：Resource Timing API 如何获得所需数据？ 主文档
9、加载速度：Navigation Timing API 静态资源速度：Resource Timing API 首次渲染速度：msFirstPaint 和 loadTimes 如何获得所需数据？ 主文档加载速度：Navigation Timing API 静态资源速度：Resource Timing API 首次渲染速度：msFirstPaint 和 loadTimes 文档生成速度：后端应用内打点 如何获得所需数据？ 主文档加载速度：Navigation Timing API 静态资源速度：Resource Timing API 首次渲染速度：msFirstPaint 和 loadTimes 文
10、档生成速度：后端应用内打点 主文档加载速度 navigation timing api network backend frontend redirect dns connect send receive dom render redirectStart redirectEnd domainLookupStart domainLookupEnd connectStart connectEnd requestStart responseStart responseEnd domLoading domComplete loadEventStart loadEventEnd 如何采集主文档速度 在主
11、文档 load 之前提供可暂存数据的接口 在主文档 load 之后注入数据收集脚本 利用 navigation timing api 收集过程指标 打上页面、地理位置、浏览器等标签 静态资源加载速度 resource timing api network backend redirect dns connect send receive redirectStart redirectEnd domainLookupStart domainLookupEnd connectStart connectEnd requestStart responseStart responseEnd 静态资源加载速
12、度 resource timing api network backend redirect dns connect send receive redirectStart redirectEnd domainLookupStart domainLookupEnd connectStart connectEnd requestStart responseStart responseEnd Timing-Allow-Origin：* 如何采集静态资源速度 利用 resource timing api 收集过程指标 额外计算静态资源的阻塞时间 打上 CDN 域名、地理位置等标签 主文档生成速度 如何
13、采集文档生成速度 框架内埋点统计框架流程各环节时间 将性能数据以 JS 对象的形式放在文档中 打上服务器、页面等标签 和浏览器端数据合并发送到性能平台 有了数据之后？ 尽早输出第1个字节是否有效？ 尽早输出第1个字节是否有效？ 尽早输出第1个字节是否有效？ 关闭 Flush Early 首字节时间+100ms 尽早输出第1个字节是否有效？ 尽早输出第1个字节是否有效？ 关闭 Flush Early 文档传输时间-150ms 尽早输出第1个字节是否有效？ 尽早输出第1个字节是否有效？ 关闭 Flush Early 首次渲染时间+300ms 尽早输出第1个字节是否有效？ 快速试错 关闭 Flush
14、 Early 首次渲染时间+300ms 后端为什么那么慢？ 优化后 后端为什么那么慢？ 优化前优化后 后端为什么那么慢？ 优化前优化后 优化方向 快速迭代是好还是坏？ 快速迭代是好还是坏？ 解释波动 快速迭代是好还是坏？ 每天30余次上线，静态资源版本号变化频繁 解释波动 CDN是否正常？ CDN是否正常？ 服务监控 实际上我们走的更远 实际上我们走的更远 解决 1 个问题不如解决 1 类问题 性能监控平台 提供 1 站式的性能数据收集、计算、存储和展示服务 支持自定义的数据指标名称和数据维度 提供任意指标任意维度的实时数据查询 服务包括美团主站和商家后台在内的 10 余个系统 性能仪表盘 数
15、据分析功能 总结 总结 深入剖析问题，形成框架，让黑盒变白盒 总结 深入剖析问题，形成框架，让黑盒变白盒 如果你无法测量，你就无法真的优化 总结 深入剖析问题，形成框架，让黑盒变白盒 如果你无法测量，你就无法真的优化 如果想真的优化，就需要测量过程指标 总结 深入剖析问题，形成框架，让黑盒变白盒 如果你无法测量，你就无法真的优化 如果想真的优化，就需要测量过程指标 解决 1 个问题不如解决 1 类问题：性能监控平台 研发工程师：http:/ 前端工程师：http:/ 发简历给我： 欢迎订阅前端周刊：http:/ Q&A 声明：除系统截图外的所有图片均来自互联网，版权归原作者所有 美团网 主文档加载速度 静态资源加载速度 NodeJS Angular Express Bootstrap StatsD OpenTSDB Graphite