如何收集常见的前端性能信息
前端性能指标,大多有TTFB ,首屏,首次可交互时间等
相关的文章已经有很多,细节这里就不多说了,可参考文末资料
总体来说,需要知道浏览器(新的)给我们提供了 Performance API,使用这个属性,我们可以得到一系列跟性能相关的数据
结合各个时间点的意义,我们可以计算出关键的耗时指标
看看下面这张图
经过简单的计算,可以获取到这样的信息
与DevTools 的Network来比较,数据是差不多的,应该能作为参考
简单上报一下
那么,这些个指标是怎末计算的呢,且看代码部分,看看注释应该就知道了
如何计算这些时间点,因人而异,各人有不同的版本,只要觉得合理,其实都是可以的
1 <script> 2 ;(function(window, undefined) { 3 function addEvent(type, fn) { 4 if (window.addEventListener) { 5 window.addEventListener(type, fn, false); 6 } else { 7 window.attachEvent('on' + type, fn); 8 } 9 } 10 11 // load 事件触发猴再收集相关数据 12 addEvent('load', getTiming); 13 14 // 快捷入口 15 window.getTiming = getTiming; 16 17 function getTiming() { 18 // 浏览器支持的API 19 var performance = window.performance; 20 21 if (!performance || !performance.timing) { 22 console.log('当前浏览器不支持Performance Time API'); 23 return; 24 } 25 26 var timing = performance.timing, 27 timings = { 28 page: [], 29 pageReport: [] 30 }; 31 32 // 设置某一项耗时统计 33 function setPageTiming(name, text, time) { 34 timings.page.push({ 35 name: name, 36 text: text, 37 time: time + ' ms' 38 }); 39 40 timings.pageReport.push({ 41 name: name, 42 time: time + ' ms' 43 }); 44 } 45 46 // 页面加载仍未完成,loadEventEnd值可能为0,需要延迟处理 47 if (timing.loadEventEnd - timing.navigationStart < 0) { 48 console.log('getTiming delay'); 49 setTimeout(getTiming, 1000); 50 return; 51 } 52 53 setPageTiming('redirect', '重定向', timing.redirectEnd - timing.redirectStart); 54 setPageTiming('dns', 'DNS解析', timing.domainLookupEnd - timing.domainLookupStart); 55 setPageTiming('tcp', 'TCP连接', timing.connectEnd - timing.connectStart); 56 setPageTiming('ssl', 'TCP-SSL连接', !timing.secureConnectionStart ? 0 : timing.connectEnd - timing.secureConnectionStart); 57 setPageTiming('ttfb', 'TTFB服务器返回首个字节', timing.responseStart - timing.requestStart); 58 setPageTiming('download', 'DOM资源下载', timing.responseEnd - timing.responseStart); 59 setPageTiming('before-parse-html', 'DOM解析前耗时', timing.responseEnd - timing.navigationStart); 60 setPageTiming('html-parsed', 'DOM解析完成', timing.domInteractive - timing.domLoading); 61 setPageTiming('dom-loaded', 'DOM加载完成', timing.domComplete - timing.domLoading); 62 setPageTiming('dom-content-load', 'DOMContentLoaded事件开始', timing.domContentLoadedEventStart - timing.navigationStart); 63 setPageTiming('dom-content-loaded', 'DOMContentLoaded事件结束', timing.domContentLoadedEventEnd - timing.navigationStart); 64 setPageTiming('load', 'Load事件开始', timing.loadEventStart - timing.navigationStart); 65 setPageTiming('loaded', 'Load事件结束', timing.loadEventEnd - timing.navigationStart); 66 67 // 以下两项可以直接获取 68 var paintTiming = { 69 'first-paint': '首屏(首次绘制)', 70 'first-contentful-paint': '首屏(首次内容绘制)' 71 }; 72 73 performance.getEntriesByType('paint').forEach(function(entry) { 74 if (paintTiming[entry.name]) { 75 setPageTiming(entry.name, paintTiming[entry.name], entry.startTime + entry.duration); 76 } 77 }); 78 79 // 以下两项指标与需求有关,需要根据业务要求在代码中打点统计 80 // setPageTiming('first-meaningful-paint', '首屏(首次有效绘制)', timing.domInteractive - timing.navigationStart); 81 // setPageTiming('time-to-interactive', '可交互时间', timing.domInteractive - timing.navigationStart); 82 83 // 简易版统计上报 84 if (requestIdleCallback) { 85 requestIdleCallback(function() { 86 report(timings.pageReport); 87 }); 88 } else { 89 setTimeout(function() { 90 report(timings.pageReport); 91 }); 92 } 93 94 function report(data) { 95 data = data || []; 96 97 if (!data.length) { 98 return; 99 } 100 101 (new Image()).src = 'https://a.b.c/d/e?t=' + (new Date()) 102 + '&l=' + location.href 103 + '&p=' + navigator.platform 104 + '&net=' + navigator.connection.effectiveType 105 + '&u=' + navigator.userAgent 106 + '×=' + JSON.stringify(data); 107 } 108 109 console.table(timings.page); 110 console.log(performance.timing); 111 } 112 })(window); 113 </script>
参考资料:
以用户为中心的性能指标
2018你应该知道的前端性能信息采集指南
Speed Matters
前端性能监控
转载于:https://www.cnblogs.com/imwtr/p/10119680.html
如何收集常见的前端性能信息相关推荐
- 【前端性能】常见前端性能优化
常见性能优化 前言 一.图片优化 1.雪碧图(图片精灵) 2.图片压缩 3.字体图标代替图片 4.webp图片 二.DOM优化 1.缓存DOM节点查找的结果 2.防抖和节流 3.事件代理 4.减少合并 ...
- 前端性能优化:当页面渲染遇上边缘计算
简介: 当前几种常见的前端性能优化方案仍然不可避免地会存在一些缺点.本文在 ESI (Edge Side Include) 的基础上,提出了一种新的优化思路:边缘流式渲染方案(ESR),即借助 CDN ...
- WEB前端性能优化基本套路
前言 前端性能优化这是一个老生常谈的话题,但是还是有很多人没有真正的重视起来,或者说还没有产生这种意识. 当用户打开页面,首屏加载速度越慢,流失用户的概率就越大,在体验产品的时候性能和交互对用户的影响 ...
- Web前端性能优化思路
本文旨在整理常见Web前端性能优化的思路,可供前端开发参考.因为力求精简,限于篇幅,所以并未详述具体实施方案. 基于现代Web前端框架的应用,其原理是通过浏览器向服务器发送网络请求,获取必要的inde ...
- 列举6个常见且实用的Web前端性能优化方法
在如今这个信息爆炸的时代,人们的节奏总是快速的,对于一个网站的耐心毕竟是有限的可怜的,如果网站不进行优化必定会流失相当一部分的客户,带来不必要的损失.那么从Web前端的性能优化上来说有哪些常见.实用的 ...
- 性能测试之前端性能优化(前端基础知识,前端性能测试常用工具,前端性能优化常见方法)
目录 1. 前端基础知识 1.1 为什么要关注前端页面的性能,了解页面的加载,渲染方式和顺序? 1.2 一次页面请求会经历哪些步骤? 1.3 页面的展示过程 2. 前端性能测试的常用工具 2.1 Go ...
- Script:收集11g Oracle实例IO性能信息
以下脚本可以用于收集Oracle Instance I/O 性能信息:
- WEB前端性能优化常见方法
web前端是应用服务器处理之前的部分,前端主要包括:HTML,CSS,javascript,image等各种资源,针对不同的资源有不同的优化方式. 1. 内容优化 (1)减少HTTP请求数:这条策略是 ...
- 前端性能分析工具利器
作者:basinwang,腾讯 PCG 前端开发工程师 大型项目容易遇到性能问题,一般来说,当我们遇到性能瓶颈的时候,才会开始去进行相应的分析.分析的方向除了业务本身的特点相关之外,常见的还可以借助一 ...
最新文章
- CIO:辩证看待云计算 游戏规则已改变
- INNODB的锁的类型
- Java方法的静态绑定与动态绑定讲解
- 清华大学大数据研究中心成立
- iphone登录不了媒体服务_ios快捷指令一键登录校园网(桂航为例,哆点认证)
- JAVA编程语言的基础知识(2)
- 自己动手Centos7搭建wordpress网站步骤(LNMP+wordpress)
- ieee浮点数与常规浮点数_浮点数如何工作
- java监控屏幕_Java实现简单屏幕监控
- amd vega56 ubuntu 下 tensorflow GPU rocm 运行情况记录及跑分
- 动态数组是怎么创建的?BQe
- 解决 Web、软件 视频播放黑屏
- 《开源安全运维平台-OSSIM最佳实践》将于2015年底出版
- 为文字添加下划线和中划线
- JS AES加密与PHP解密(转)
- Django项目中使用第三方登录——支付宝登录
- 【前端】JavaScript基础(二)
- mysql数据库搭建动态网站_数据库和动态网页怎么建立联系
- HTTPS(ssl)
- 五、无限法则roe-滑雪高级进阶训练