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

  1. window.addEventListener("load", function() {
  2. let now = new Date().getTime();
  3. let loadingTime = now - performance.timing.navigationStart;
  4. document.querySelector(".output").innerText =
  5. loadingTime + " ms";
  6. }, false);
  1. window.addEventListener("load", function() {
  2. let now = new Date().getTime();
  3. let loadingTime = now - performance.timing.navigationStart;
  4. output = "Load time: " + loadingTime + " ms<br/>";
  5. output += "Navigation type: ";
  6. switch(performance.navigation.type) {
  7. case PerformanceNavigation.TYPE_NAVIGATE:
  8. output += "Navigation";
  9. break;
  10. case PerformanceNavigation.TYPE_RELOAD:
  11. output += "Reload";
  12. break;
  13. case PerformanceNavigation.TYPE_BACK_FORWARD:
  14. output += "History";
  15. break;
  16. default:
  17. output += "Unknown";
  18. break;
  19. }
  20. output += "<br/>Redirects: " +
  21. performance.navigation.redirectCount;
  22. document.querySelector(".output").innerHTML = output;
  23. }, 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

总阻塞时间

https://web.dev/tbt/

DCL

DOMContentLoaded Event

DOM 内容加载完成 事件

FP

First Paint

首次绘制

FCP

First Contentful Paint

首次有内容的绘制

https://web.dev/fcp/

https://web.dev/first-contentful-paint

FMP

First Meaningful Paint

首次有意义的绘制

https://web.dev/first-meaningful-paint/

LCP

Largest Contentful Paint

最大内容的绘制

https://web.dev/lcp/

TTI

Time to Interactive

可交互时间

https://web.dev/tti/

FID

First Input Delay

首次输入延迟

https://web.dev/fid/

CLS

Cumulative Layout Shift

累积布局移位

https://web.dev/cls/

SI

Speed Index

速度指数

https://web.dev/speed-index/

refs

Chrome DevTools & performance / 性能指标

https://developers.google.com/web/fundamentals/performance/user-centric-performance-metrics

https://web.dev/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 前端页面性能监控指标的更多相关文章

  1. web前端页面性能优化

    影响用户访问的最大部分是前端的页面.网站的划分一般为二:前端和后台.我们可以理解成后台是用来实现网站的功能的,比如:实现用户注册,用户能够为文章发表评论等等.而前端呢?其实应该是属于功能的表现. 而我 ...

  2. web前端页面性能优化小结

    影响用户访问的最大部分是前端的页面.网站的划分一般为二:前端和后台.我们可以理解成后台是用来实现网站的功能的,比如:实现用户注册,用户能够为文章发表评论等等.而前端呢?其实应该是属于功能的表现. 而我 ...

  3. web前端页面性能

    前段性能的意义 对于访问一个网站,最花费时间的并不是后端应用程序处理以及数据库等消耗的时间,而是前端花费的时间(包括请求.网络传输.页面加载.渲染等).根据web优化的黄金法则:80%的最终用户响应时 ...

  4. web前端页面优化——个人见解

    web前端页面优化,我们从JavaScript.css.html这3个方面说下,我的见解,希望大神们能有刚好优化方法,一起探讨. 一.  有关javascript方面 优化见解. 1. 首先举个例子: ...

  5. 页面性能监控之performance

    页面性能监测之performance author: @TiffanysBear 最近,需要对业务上的一些性能做一些优化,比如降低首屏时间.减少核心按钮可操作时间等的一些操作:在这之前,需要建立的就是 ...

  6. 现代WEB前端的性能优化

    现代WEB前端的性能优化 前言:这只是一份学习笔记. 什么是WEB前端 潜在的优化点: DNS是否可以通过缓存减少DNS查询时间? 网络请求的过程走最近的网络环境? 相同的静态资源是否可以缓存? 能否 ...

  7. web前端页面项目经验总结

    项目时间:2016年4月5日--4月9日项目名称:阿七果子园web前端页面项目内容:    1.HTML5+CSS+JavaScript(banner+timer)+JQuery(small_bann ...

  8. 基于.net EF6 MVC5+WEB Api 的Web系统框架总结(1)-Web前端页面

    本 Web 系统框架基于C# EF6+MVC+WebApi的快速应用开发平台.本节主要介绍Web前端页面设计与实现.Web前端页面主要分为普通列表页面.树状导航列表页面.普通编辑页面.数据导入页面.向 ...

  9. Web前端页面的浏览器兼容性测试心得(二)搭建原汁原味的IE8测试环境

    如果你做的页面被老板或PM要求兼容IE8,你就值得同情了.IE8不支持HTML5,在2017年的前端界,开发者不涉及HTML5标准简直寸步难行.然而,有一个可怕的事实客观存在,那就是IE8是Win7系 ...

随机推荐

  1. Git 创建新分支检查分支

    创建分支和切换分支,也可以称为检出分支 创建新分支 git branch branchName 切换到新分支 git checkout branchName 上面两个命令也可以合成为一个命令: git ...

  2. uni-app开发经验分享三: Vuex实现登录和用户信息留存

    在做用户登录的过程中,其实最重要的是登录成功后的数据要怎么储存,储存到哪里,这里我分享一个利用vuex来实现用户登录和用户数据留存的方法 vuex代码如下: //引入vue和vuex import V ...

  3. 干货!上古神器 sed 教程详解,小白也能看的懂

    目录: 介绍工作原理正则表达式基本语法数字定址和正则定址基本子命令实战练习 介绍 熟悉 Linux 的同学一定知道大名鼎鼎的 Linux 三剑客,它们是 grep.awk.sed,我们今天要聊的主角就 ...

  4. 一文告诉你Java日期时间API到底有多烂

    前言 你好,我是A哥(YourBatman). 好看的代码,千篇一律!难看的代码,卧槽卧槽~其实没有什么代码是"史上最烂"的,要有也只有"史上更烂". 日期是商 ...

  5. 向HDFS中上传任意文本文件,如果指定的文件在HDFS中已经存在,由用户指定是追加到原有文件末尾还是覆盖原有的文件

    1 import java.io.FileInputStream; 2 import java.io.IOException; 3 import java.util.Scanner; 4 5 impo ...

  6. jdk安装简洁版

    一.jdk是what? jdk其实是个软件语言开发包,包含了JAVA的运行环境(JVM+Java系统类库)和JAVA工具. 没有JDK的话,无法编译Java程序(指java源码.java文件),如果想 ...

  7. Python Data Structure and Algorithms Tutorial

    Python - Algorithm Design - Tutorialspoint https://www.tutorialspoint.com/python_data_structure/pyth ...

  8. Qedis实现

    对比redis的Qedis 实现在github 和 实验楼都有资料

  9. Zookeeper语法

    ZooKeeper 是一个典型的分布式数据一致性解决方案,分布式应用程序可以基于 ZooKeeper 实现诸如数据发布/订阅.负载均衡.命名服务.分布式协调/通知.集群管理.Master 选举.分布式 ...

  10. docker基本使用-nginx

    在docker环境中部署使用nginx 1,安装nginx docker pull nginx 2,随便启动一下nginx,测试是否安装成功 a,启动nginx sudo docker run --n ...