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系 ...
随机推荐
- MySQL设计之Schema与数据类型优化
一.数据类型优化 1.更小通常更好 应该尽量使用可以正确存储数据的最小数据类型,更小的数据类型通常更快,因为它们占用更少的磁盘.内存和CPU缓存,并且处理时需要的CPU周期更少,但是要确保没有低估需要 ...
- 树莓派zero 使用usb串口连接
使用minicom连接bash$ lsusbBus 002 Device 001: ID 1d6b:0003 Linux Foundation 3.0 root hubBus 001 Device 0 ...
- 控制反转 依赖注入 main函数
通过依赖注入.服务定位实现控制反转 Go kit - Frequently asked questions https://gokit.io/faq/ Dependency Injection - W ...
- Flash 终将谢幕:微软将于年底( 2020 年 )停止对 Flash 的支持
近日,微软宣布将于今年 12 月终止对 Adobe Flash Player 的支持,届时,微软旗下所有浏览器都将无法使用 Flash,Adobe 也不会在今年 12 月后发布安全更新.早在 2017 ...
- CAP理论解读
经历过技术面试的小伙伴想必对这个两个概念已经再熟悉不过了! 我当年参加面试的时候,不夸张地说,只要问到分布式相关的内容,面试官几乎是必定会问这两个分布式相关的理论. 并且,这两个理论也可以说是小伙伴们 ...
- k8s之集群管理
导读 经过前面k8s系列的文章,这一系列已经基本完成,现在就用几篇文章说一下日常的集群维护. 目录 更新资源对象的Label Namespace:集群环境共享与隔离 部署集群监控 部署Web UI管理 ...
- Lambda表达式及相关练习
语法格式一无参数无返回值 语法格式二有一个参数并且无返回值 语法格式三若只有一个参数小括号可以省略不写 语法格式四有两个以上的参数有返回值并且Lambda体中有多条语句 语法格式五若Lambda体中只 ...
- Kubernetes (yaml 文件详解)
# yaml格式的pod定义文件完整内容:apiVersion: v1 #必选,版本号,例如v1kind: Pod #必选,Podmetadata: #必选,元数据 ...
- 天融信Top-app LB负载均衡SQL注入0day
POST /acc/clsf/report/datasource.php HTTP/1.1 Host: Connection: close Accept: text/javascript, text/ ...
- 使用ganglia 实现监控 hadoop 和 hbase(详细过程总结)
一,环境准备 hadoop 2.8.2 分布式环境(三个节点 安装请参考 hadoop分布式环境安装) hbase 1.2.6 分布式环境(三个节点 ,安装参考hbase分布式环境安装 ) 主节点采 ...