Web 前端页面性能监控指标
Web 前端页面性能监控指标
性能监控 / 性能指标 / 性能优化
白屏时间计算
FCP
白屏时间:从浏览器输入地址并回车后到页面开始有内容的时间;
首屏时间计算
FMP
首屏时间:从浏览器输入地址并回车后到首屏内容渲染完毕的时间;
不需要交互 ? TTI
Navigation Timing API
Navigation Timing Level 2, W3C Working Draft 21 January 2020
https://www.w3.org/TR/navigation-timing-2/
Navigation Timing, W3C Recommendation 17 December 2012
https://www.w3.org/TR/navigation-timing/
https://developer.mozilla.org/en-US/docs/Web/API/Navigation_timing_API
https://developer.mozilla.org/en-US/docs/Web/API/Navigation_timing_API/Using_Navigation_Timing
window.addEventListener("load", function() {
let now = new Date().getTime();
let loadingTime = now - performance.timing.navigationStart;
document.querySelector(".output").innerText =
loadingTime + " ms";
}, false);
window.addEventListener("load", function() {
let now = new Date().getTime();
let loadingTime = now - performance.timing.navigationStart;
output = "Load time: " + loadingTime + " ms<br/>";
output += "Navigation type: ";
switch(performance.navigation.type) {
case PerformanceNavigation.TYPE_NAVIGATE:
output += "Navigation";
break;
case PerformanceNavigation.TYPE_RELOAD:
output += "Reload";
break;
case PerformanceNavigation.TYPE_BACK_FORWARD:
output += "History";
break;
default:
output += "Unknown";
break;
}
output += "<br/>Redirects: " +
performance.navigation.redirectCount;
document.querySelector(".output").innerHTML = output;
}, false);
https://developers.google.com/web/fundamentals/performance/navigation-and-resource-timing
TTFB
Time To First Byte
第一个字节到达的时间
TTFP
Time To First Paint
第一次绘制的时间
https://developers.google.com/web/fundamentals/glossary
TBT
Total Blocking Time
总阻塞时间
DCL
DOMContentLoaded Event
DOM 内容加载完成 事件
FP
First Paint
首次绘制
FCP
First Contentful Paint
首次有内容的绘制
https://web.dev/first-contentful-paint
FMP
First Meaningful Paint
首次有意义的绘制
https://web.dev/first-meaningful-paint/
LCP
Largest Contentful Paint
最大内容的绘制
TTI
Time to Interactive
可交互时间
FID
First Input Delay
首次输入延迟
CLS
Cumulative Layout Shift
累积布局移位
SI
Speed Index
速度指数
refs
Chrome DevTools & performance / 性能指标
https://developers.google.com/web/fundamentals/performance/user-centric-performance-metrics
https://web.dev/user-centric-performance-metrics/
https://web.dev/custom-metrics/
https://www.cnblogs.com/xgqfrms/p/12940170.html
xgqfrms 2012-2020
www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!
Web 前端页面性能监控指标的更多相关文章
- web前端页面性能优化
影响用户访问的最大部分是前端的页面.网站的划分一般为二:前端和后台.我们可以理解成后台是用来实现网站的功能的,比如:实现用户注册,用户能够为文章发表评论等等.而前端呢?其实应该是属于功能的表现. 而我 ...
- web前端页面性能优化小结
影响用户访问的最大部分是前端的页面.网站的划分一般为二:前端和后台.我们可以理解成后台是用来实现网站的功能的,比如:实现用户注册,用户能够为文章发表评论等等.而前端呢?其实应该是属于功能的表现. 而我 ...
- web前端页面性能
前段性能的意义 对于访问一个网站,最花费时间的并不是后端应用程序处理以及数据库等消耗的时间,而是前端花费的时间(包括请求.网络传输.页面加载.渲染等).根据web优化的黄金法则:80%的最终用户响应时 ...
- web前端页面优化——个人见解
web前端页面优化,我们从JavaScript.css.html这3个方面说下,我的见解,希望大神们能有刚好优化方法,一起探讨. 一. 有关javascript方面 优化见解. 1. 首先举个例子: ...
- 页面性能监控之performance
页面性能监测之performance author: @TiffanysBear 最近,需要对业务上的一些性能做一些优化,比如降低首屏时间.减少核心按钮可操作时间等的一些操作:在这之前,需要建立的就是 ...
- 现代WEB前端的性能优化
现代WEB前端的性能优化 前言:这只是一份学习笔记. 什么是WEB前端 潜在的优化点: DNS是否可以通过缓存减少DNS查询时间? 网络请求的过程走最近的网络环境? 相同的静态资源是否可以缓存? 能否 ...
- web前端页面项目经验总结
项目时间:2016年4月5日--4月9日项目名称:阿七果子园web前端页面项目内容: 1.HTML5+CSS+JavaScript(banner+timer)+JQuery(small_bann ...
- 基于.net EF6 MVC5+WEB Api 的Web系统框架总结(1)-Web前端页面
本 Web 系统框架基于C# EF6+MVC+WebApi的快速应用开发平台.本节主要介绍Web前端页面设计与实现.Web前端页面主要分为普通列表页面.树状导航列表页面.普通编辑页面.数据导入页面.向 ...
- Web前端页面的浏览器兼容性测试心得(二)搭建原汁原味的IE8测试环境
如果你做的页面被老板或PM要求兼容IE8,你就值得同情了.IE8不支持HTML5,在2017年的前端界,开发者不涉及HTML5标准简直寸步难行.然而,有一个可怕的事实客观存在,那就是IE8是Win7系 ...
随机推荐
- redis修改requirepass 参数 改密码
1. 不重启redis如何配置密码? a. 在配置文件中配置requirepass的密码(当redis重启时密码依然有效). # requirepass foobared -> 修改成 : ...
- Python格式化处理json数据的方式
1.问题 在遇到json数据的过程中,我们经常需要获取json数据中某个值的操作,如果是用get方法去取比较繁琐,接下来介绍两种方式来取值. 2.jsonpath来格式化处理json数据 2.1介绍 ...
- 研发流程 接口定义&开发&前后端联调 线上日志观察 模型变动
阿里等大厂的研发流程,进去前先了解一下_我们一起进大厂 - SegmentFault 思否 https://segmentfault.com/a/1190000021831640 接口定义 测试用例评 ...
- 控制反转 依赖注入 main函数
通过依赖注入.服务定位实现控制反转 Go kit - Frequently asked questions https://gokit.io/faq/ Dependency Injection - W ...
- openrstry 限流 是否有清零逻辑 连接池
openrstry 限流 是否有清零逻辑 https://github.com/openresty/lua-resty-limit-traffic # encoding=utf-8 # Shawn ...
- Apache HTTP Server 映射URL到文件系统(翻译)
div.example { background-color: rgba(229, 236, 243, 1); color: rgba(0, 0, 0, 1); padding: 0.5em; mar ...
- noip 注意事项 (个人向)
目录 非常重要 对拍 空间 极限数据 模数,YES/NO等大小写 个人 考场 神仙 czdzx 说要写,我也来写 非常重要 对拍 空间 极限数据 模数,YES/NO等大小写 个人 养身体,不要紧张,不 ...
- 前端api管理工具YApi
使用YApi接口管理工具,提升前端开发效率前端开发苦恼: 代码中使用json数据模拟后端api数据,注释调取api接口代码,代码乱七八糟 为了测试不同case,央求后端人员返回不同的数据,返回状态.返 ...
- Spring MVC——基础(简介,使用,地址映射)
Spring MVC简介 重点Spring MVC的处理流程 Spring MVC特点 Spring MVC的使用 将相应的JAR包导入lib文件下 配置相关webxml 配置servlet-mvcx ...
- jvm学习第二天
0.垃圾回收概述 1.什么是垃圾,怎么判断? 1.1引用计数法 含义 顾名思义,此种算法会在每一个对象上记录这个对象被引用的次数,只要有任何一个对象引用了此对象,这个对象的计数器就+1,取消对这个对象 ...