3、Chrome之前端性能指标

a、RAIL 模型

RAIL 是一种以用户为中心的性能模型。每个网络应用均具有与其生命周期有关的四个不同方面，且这些方面以不同的方式影响着性能。

1.响应：输入延迟时间（从点按到绘制）小于 100 毫秒。

一般指的是用户输入网页快速给出结果的过程，比如点击按钮，切换表单，启动动画之类的。

2.动画：每个帧的工作（从 JS 到绘制）完成时间小于 16 毫秒。

指的是涉及style，layout，paint，composite过程的行为。比如：用户滚动页面，拖动刷新，页面动画等

3.空闲：主线程 JS 工作分成不大于 50 毫秒的块。

用户没有与页面交互，但主线程应足够用于处理下一个用户输入。

4.加载：页面可以在 1000 毫秒内就绪。

一般指网页加载这一段时间。

b、用户对于网站延迟的反应

0-16ms：动画的一帧渲染不大于16ms时，用户会感觉动画是流畅的。

0-100ms：当用户进行操作时，100ms内窗口响应用户操作，用户会有一种立即获得结果的感觉。

100-300ms：用户可能微微察觉到一点延迟。

300-1000ms：此时长范围是用户能接受的页面的加载或者视图的改变所用时长。

1000+ms:用户的注意力将离开正在执行的任务。

10000+ms:用户已经没有耐心等待下去。

c、性能指标

常用的指标就是：白屏，首屏，domready,pageloaded四个指标，在通常的index.html中，我们通过性能API获取到响应的指标值。

1、白屏：一般认为浏览器开始渲染<body>标签或者解析完<head>标签的时刻就是页面白屏结束的时间点。

白屏开始时间相当于performance.timing.navigationStart

白屏结束时间相当于performance.timing.responseStart

2、首屏：首屏是指用户看到的第一屏，就是网页当前窗口的区域完整显示的时间。

首屏内容加载最慢的就是图片资源，在DOM树构建完成后将会去遍历首屏内所有图片标签，并监听所有图片的onload事件，最终遍历图片标签的加载时间的最大值，用这个最大值减去navigationStart可获取近似的首屏时间。

首屏时间相当于最后一张图片加载的时间减去navigationStart时间

3、domready:指浏览器开始对基础页文件内容进行解析到文本中构建出一个内部数据结构（DOM树）的时间。

dom渲染完成时间是DOMContentLoaded事件监听的，所有它的结束时间相当于performance.timing.domContentLoadedEventEnd。

4、pageloaded：整页加载完成时间，该结束时间通过window.onload()进行采集。

pageloaded结束时间相当于performance.timing.loadEventEnd。

总结：

unload	前一个页面卸载耗时	unloadEventEnd - unloadEventStart	前一个页面卸载时可能监听了 unload 做些数据收集，会影响页面跳转
redirect	重定向耗时	redirectEnd - redirectStart	过多重定向影响性能
appCache	缓存耗时	domainLookupStart - fetchStart
dns	DNS 解析耗时	domainLookupEnd - domainLookupStart
tcp	TCP 连接耗时	connectEnd - connectStart
ssl	SSL 安全连接耗时	connectEnd - secureConnectionStart	只在 HTTPS 下有效
ttfb	Time to First Byte（TTFB），网络请求耗时	responseStart - requestStart
response	数据传输耗时	responseEnd - responseStart
dom	可交互 DOM 解析耗时	domInteractive - responseEnd	Interactive content
dom2	剩余 DOM 解析耗时	domContentLoadedEventStart - domInteractive	DOMContentLoaded 所有DOM元素都加载完毕(除了 async script)
DCL	DOMContentLoaded 事件耗时	domContentLoadedEventEnd - domContentLoadedEventStart	document.addEventListener('DOMContentLoaded', cb)
resources	资源加载耗时	loadEventStart - domContentLoadedEventEnd	完整DOM(DOMContentLoaded)到资源加载完毕(window.onLoad)时间
onLoad	onLoad事件耗时	loadEventEnd - loadEventStart
firstbyte	首包时间	responseStart - domainLookupStart
fpt	First Paint Time, 首次渲染时间 / 白屏时间	responseStart - navigationStart	从请求开始到浏览器开始解析第一批 HTML 文档字节的时间差
tti	Time to Interact，首次可交互时间	domInteractive - navigationStart	浏览器完成所有 HTML 解析并且完成 DOM 构建，此时浏览器开始加载资源
ready	HTML 加载完成时间，即 DOM Ready 时间	domContentLoadedEventEnd - navigationStart	如果页面有同步执行的 JS，则同步 JS 执行时间 = ready - tti
load	页面完全加载时间	loadEventEnd - navigationStart	load = 首次渲染时间 + DOM 解析耗时 + 同步 JS 执行 + 资源加载耗时

navigationStart	表示从上一个文档卸载结束时的unix时间戳，如果没有上一个文档，则与fetchStart一致
unloadEventStart	表示前一个网页（与当前页面同域）unload的时间戳，如果无前一个网页unload或者前一个网页与当前页面不同域，则值为0
unloadEventEnd	返回前一个页面unload事件绑定的回调函数执行完毕的时间戳
redirectStart	重定向开始的时间戳，同域内才算，否则为0
redirectEnd	重定向结束的时间戳，同域内才算，否则为0
fetchStart	浏览器准备使用http请求抓取文档的时间戳，这发生在检查本地缓存之前
domaInLookupStart/domaInLookupEnd	DNS域名查询开始/结束时间，如果使用了本地缓存（无DNS查询）或持久链接，则与fetchStart值相等
connectStart	TCP开始建立连接的时间戳，如果是持久链接，则与fetchStart值一致
connectEnd	TCP完成握手的时间戳，如果是持久链接，则与fetchStart值一致
secureConnectionStart	HTTPS链接开始的时间，如果不是安全链接，值为0
requestStart	HTTP请求开始时间，包括从本地读取缓存
responseStart	HTTP开始接收响应的时间(获取到第一个字节)，包括从本地读取缓存
responseEnd	HTTP接收响应完成的时间（获取到最后一个字节），包括从本地读取缓存
domLoading	开始解析DOM树的时间，此时Document.readyState变为loading，抛出readystatechange事件
domInteractive	完成解析DOM树的时间，此时Document.readyState变为interactive，此时并没有加载资源,抛出readystatechange事件
domContentLoadEventStart	DOM树解析完成后，网页资源开始加载的时间，在domContentLoaded事件抛出前发生
domContentLoadEventEnd	DOM树解析完成后，网页资源加载完成的时间
domComplete	DOM树解析完成后，资源准备就绪的时间，此时Document.readyState变为complete，抛出readystatechange事件
loadEventStart	load事件开始时间
loadEventEnd	load事件结束时间，网页加载完成

d、TTI（Time to Interactive）

1、TTI：The TTI metric measures the time from when the page starts loading to when its main sub-resources have loaded and it is capable of reliably responding to user input quickly.

TTI指标测量时间是从页面开始加载到其主要子资源已加载的时间，并且能够可靠地快速响应用户输入。

2、计算TTI

Start at First Contentful Paint (FCP).从(FCP)首次内容绘制开始

Search forward in time for a quiet window of at least five seconds, where quiet window is defined as: no long tasks and no more than two in-flight network GET requests.向前搜索5秒，没有长任务，且不能超过2个get请求

Search backwards for the last long task before the quiet window, stopping at FCP if no long tasks are found.向后搜索最后一个长任务，如果没有长任务被发现就到FCP停止

TTI is the end time of the last long task before the quiet window (or the same value as FCP if no long tasks are found).TTI的时间是最后一个长任务的时间，如果没有长任务的话，则等于FCP时间

引入tti-polyfill.js(可通过npm包获取)，获取到tti值
import ttiPolyfill from './path/to/tti-polyfill.js';ttiPolyfill.getFirstConsistentlyInteractive().then((tti) => {...
});

3、long task

对于用户而言，任务耗时较长表现为滞后或卡顿，而这也是目前网页不良体验的主要根源

测量长任务

var observer = new PerformanceObserver(function(list) {var perfEntries = list.getEntries();for (var i = 0; i < perfEntries.length; i++) {// Process long task notifications:// report back for analytics and monitoring// ...}});// register observer for long task notificationsobserver.observe({entryTypes: ["longtask"]});// Long script execution after this will result in queueing// and receiving "longtask" entries in the observer.

参考文档：https://developer.mozilla.org/zh-CN/docs/Web/API/Long_Tasks_API

4、模型

旧标准参考文档：https://www.w3.org/TR/navigation-timing/#dom-window-performance

新标准参考文档：https://www.w3.org/TR/2020/WD-navigation-timing-2-20200121/

5、navigation和performance.timing

优先使用：performance.getEntriesByType('navigation')[0]，简称 navigation

不可用时降级处理：performance.timing，简述 timing

timing 时间属性是以类似 Date.now() 这样的时间戳标识，navigation 是每个页面都从 0 开始计时，精度也更高；

timing 是 navigationStart 开始，navigation 是以startTime开始；

timing 和 navigationStart 都被新的标准废弃，但兼容较高；

navigation 新增了资源大小和 serverTiming，可以分析资源是否压缩是否过大过小和离线应用处理时间。

6、名词解释

FP (First Paint) 首次绘制: 标记浏览器渲染任何在视觉上不同于导航前屏幕内容之内容的时间点.

FCP (First Contentful Paint) 首次内容绘制标记浏览器渲染来自 DOM 第一位内容的时间点，该内容可能是文本、图像、SVG 甚至元素.

LCP (Largest Contentful Paint) 最大内容渲染: 代表在viewport中最大的页面元素加载的时间. LCP的数据会通过PerformanceEntry对象记录, 每次出现更大的内容渲染, 则会产生一个新的PerformanceEntry对象.(2019年11月新增)

DCL (DomContentloaded): 当 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，无需等待样式表、图像和子框架的完成加载.

FMP(First Meaningful Paint) 首次有效绘制

L (onLoad), 当依赖的资源, 全部加载完毕之后才会触发.

TTI (Time to Interactive) 可交互时间: 指标用于标记应用已进行视觉渲染并能可靠响应用户输入的时间点.

TBT (Total Blocking Time) 页面阻塞总时长: TBT汇总所有加载过程中阻塞用户操作的时长，在FCP和TTI之间任何long task中阻塞部分都会被汇总.

参考文档：https://developer.mozilla.org/zh-CN/docs/Web/API/PerformanceEntry/entryType

https://developer.mozilla.org/zh-CN/docs/Web/API/PerformanceNavigationTiming

查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！

springboot 服务启动时，初始化加载一些配置的操作
一.操作说明1.编写一个配置类：在类上标记注解@Configuration，在具体方法添加注解@Bean，如下图package com.ljf.spt.demo.config;import org.springframework.boot.web.embedded.tomcat.TomcatServletWebServerFactory; import org.springframework.boot.web.server.WebServe…...
2024/5/3 12:14:33
Echarts实战案例代码(24)：柱图数据顶部显示图片的解决方案
调用的图片 var weatherIcons = {icon1: https://echarts.apache.org/examples/data/asset/img/weather/sunny_128.png,icon2:https://echarts.apache.org/examples/data/asset/img/weather/cloudy_128.png,icon3:https://echarts.apache.org/examples/data/asset/img/weather/…...
2024/4/27 23:41:18
673. 最长递增子序列的个数
给定一个未排序的整数数组，找到最长递增子序列的个数。示例 1: 输入: [1,3,5,4,7] 输出: 2 解释: 有两个最长递增子序列，分别是 [1, 3, 4, 7] 和[1, 3, 5, 7]。分析本题是改编自leetcode 300, 对于leetcode 300是单纯地求解最长上升子序列的长度。代码如下： class Soluti…...
2024/4/15 14:21:26
如何在express中使用ejs
使用ejs的步骤一、下载安装在终端中` npm i ejs` 指令即可下载二、引入ejs在当前所使用的js界面中加入 let ejs = require("ejs) 此行代码表示引入ejs 三、准备一个模板准备一个模板，并且必须要把模板放到views文件夹下面一个html文件就可以充当一个模板只是后缀必…...
2024/4/30 3:29:19
初出茅庐
Mybatis 准备工作： jdk1.8 Maven仓库 JDBC的CRUD会一点 IDE集成开发工具IDEA/eclipse 第一步：需要创建一个Maven项目，然后导入依赖的坐标 mybatis，mysql，junit 如果没有导入所谓的坐标就会运行报错三个坐标必须导入，等到右边Maven库没有报错就证明配置好了第二步：在re…...
2024/4/15 14:21:23
Webpack的环境搭载
1.创建package包,记录依赖 npm init -y//生成package包记录环境依赖和开发依赖2.安装webpack和webpack-cli包 cnpm webpack webpack-cli -D //安装为环境依赖 cnpm webpack webpack-cli -g //如果安装完环境依赖后依旧不能执行webpack指令则全局安装一遍即可webpack.config.js文…...
2024/4/15 14:21:22
java实现获取当前年、月、日、小时、分钟、秒、毫秒
项目需要特此记录方便以后使用有需要自取 package com.microsoft.test;import java.text.SimpleDateFormat; import java.util.Calendar; import java.util.Date;public class TestTime {/*** 英文简写（默认）如：2010-12-01*/public static String FORMAT_SHORT = "…...
2024/5/1 15:41:29
树莓派（一）
1.树莓派刷机利用Win32Disklmager把光盘映像写入SD卡2.串口方式登录树莓派默认情况，树莓派的串口和蓝牙连接，修改配置文件config.txt和cmdline.txt 1.打开SD卡根目录的"config.txt"文件，将以下内容添加在最后并且保存。 dtoverlay=pi3-miniuart-bt 2.然后再修改根…...
2024/4/29 11:15:11
约瑟夫问题（利用双向循环链表）
约瑟夫问题问题：解决问题的思路源代码List接口抽象类AbstractList双向循环链表测试代码总结问题： M个人围成一圈，从第一个开始报数，第N个将被杀掉，最后剩下一个，其余人都将被杀掉。例如M=6，N=5，被杀掉的顺序是：5，4，6，2，3。解决问题的思路利用环形链表的闭合性，…...
2024/4/23 2:08:55
查题公众号搭建详细教程，提供永久免费接口
题库收录题量千万级别需要试一试题库质量怎么样的可以关注公众号【在线查题小助手】试一试没有任何广告支持图片/语音查题支持单词查询！以下是教程首先注册自己的微信公众号然后进入微信平台里面的开发栏，点击基本配置。会出现填写URL和TOKEN的页面点我获取URL和Tok…...
2024/4/30 1:06:33
剑指offer从上到下打印二叉树I(C++/Java双重实现)
1.问题描述2.问题分析本题我们可以使用队列来做，我们首先把树的每一层结点从左到右进入一个队列，然后再按照队列的顺序，那么这个时候二叉树就已经按照层序的方式依次存入队列，再一个一个的取出来即可3.代码实现 3.1C++代码 /*** Definition for a binary tree node.* struc…...
2024/4/29 3:18:14
python 简单mysql工具类，使用连接池PooledDB案例
import pymysql import time from DBUtils.PooledDB import PooledDBclass MysqldbHelper(object): # 继承object类所有方法def __init__(self, config):self.host = config[host]self.username = config[user]self.password = config[passwd]self.db = config[db]self.port =…...
2024/5/1 3:40:13
2020 Multi-University Training Contest 5
Tetrahedron 1h2=1a2+1b2+1c2\cfrac{1}{h^2}=\cfrac{1}{a^2}+\cfrac{1}{b^2}+\cfrac{1}{c^2}h21=a21+b21+c21 E(x+y)=E(x)+E(y)E(x+y)=E(x)+E(y)E(x+y)=E(x)+E(y) #include <bits/stdc++.h> using namespace std; typedef long long ll; const ll mod = 99824435…...
2024/5/3 10:58:06
linux 内核空间与用户空间
主要是为了保护linux系统不被用户的程序搞坏参考： http://www.ruanyifeng.com/blog/2016/12/user_space_vs_kernel_space.html...
2024/5/2 14:00:30
自学python之旅（二）
自学python的第二次学习。今天是关于简单数据处理和一部分列表知识。在我看来，列表和Java语言中的数组没有太大差别，也比较易懂。关于差一错误是我很难理解的，涉及到本质的东西让我头疼，等有机会研究一下。 print(0.1+0.1); a=3*0.1; print(a); #计算机将十进制转化为二进…...
2024/4/24 23:39:56
Qt 自定义标题栏
实现mititlebar.h/** * @brief 通用的标题栏控件 * @author swang * @date 2020-08-04 */ #ifndef MITITLEBAR_H #define MITITLEBAR_H#include <QWidget> class QPushButton; class QLabel; class MiTiTleBar : public QWidget {Q_OBJECT publi…...
2024/4/15 19:17:31
系统I/O小程序-文件拷贝
系统I/O小程序-文件拷贝 #include <stdio.h> #include <string.h> #include <unistd.h> #include <sys/types.h> #include <sys/stat.h> #include <fcntl.h> #include <errno.h>/** * system i/o * ./syscopy src des …...
2024/4/24 16:04:39
算法-回溯-马踏棋盘
package datastructure.horse;import java.awt.*; import java.util.ArrayList;public class HorseTraver {private static int X;private static int Y;private static boolean[] visited;//与棋盘对应的位置为true就是访问过，false就是没有访问private static boolean finis…...
2024/4/15 19:17:30
B树、B+树、B*树
B树二叉搜索树->AVL树->红黑树->B树，由于B树之前的搜索树都是内存中存数据，如果数据量过大，内存中存不下，就没有办法了。这个时候内存中存不下的时候，就想到向磁盘中存储，B树主要就是应对在磁盘上存储数据的问题 B树的主要特点：1.搜索树的左边的子树小于当前结…...
2024/4/15 14:21:38
HDU - 5883
题目链接：HDU - 5883答案显然就是任意一个欧拉通路。首先考虑连通性。然后我们可以分度为奇数的个数，大于2显然无解。如果为0，那么任意选一个起点。如果为2，那么则是一定是路径。然后对每个点看贡献，看度除以2的奇偶性即可，因为出去一次进来一次，特判起点。AC代码： …...
2024/4/30 4:11:19

3、Chrome之前端性能指标

相关文章

最新文章