当前位置: 首页 > news >正文

performance.timing

performance.timing 是 Web 性能 API 的一部分,用于获取页面加载过程中的各个时间戳。这些时间戳可以帮助开发者分析页面加载性能,找出潜在的瓶颈。performance.timing 返回一个 PerformanceTiming 对象,该对象包含了多个属性,每个属性代表页面加载过程中的某个特定事件的时间戳。

以下是一些常用的 performance.timing 属性及其含义:

  • navigationStart: 页面导航开始的时间戳。
  • unloadEventStart: 卸载前一个页面的事件开始时间。
  • unloadEventEnd: 卸载前一个页面的事件结束时间。
  • redirectStart: 第一个重定向开始的时间。
  • redirectEnd: 最后一个重定向结束的时间。
  • fetchStart: 浏览器开始获取文档的时间。
  • domainLookupStart: DNS 查询开始的时间。
  • domainLookupEnd: DNS 查询结束的时间。
  • connectStart: TCP 连接开始的时间。
  • connectEnd: TCP 连接结束的时间。
  • secureConnectionStart: 安全连接开始的时间(仅 HTTPS)。
  • requestStart: 浏览器向服务器发送请求的时间。
  • responseStart: 浏览器从服务器接收第一个字节的时间。
  • responseEnd: 浏览器从服务器接收最后一个字节的时间。
  • domLoading: 解析器开始解析 DOM 的时间。
  • domInteractive: DOM 解析完成,但资源(如图片、样式表)可能仍在加载的时间。
  • domContentLoadedEventStartDOMContentLoaded 事件开始的时间。
  • domContentLoadedEventEndDOMContentLoaded 事件结束的时间。
  • domComplete: DOM 和所有子资源都已完全加载的时间。
  • loadEventStartload 事件开始的时间。
  • loadEventEndload 事件结束的时间。

示例代码

以下是一个简单的示例,展示如何使用 performance.timing 获取页面加载时间:

// 获取 PerformanceTiming 对象
const timing = performance.timing;// 计算页面加载时间
const loadTime = timing.loadEventEnd - timing.navigationStart;console.log(`Page load time: ${loadTime} ms`);// 计算 DNS 查找时间
const dnsLookupTime = timing.domainLookupEnd - timing.domainLookupStart;console.log(`DNS lookup time: ${dnsLookupTime} ms`);// 计算 TCP 连接时间
const tcpConnectTime = timing.connectEnd - timing.connectStart;console.log(`TCP connect time: ${tcpConnectTime} ms`);// 计算请求响应时间
const responseTime = timing.responseEnd - timing.requestStart;console.log(`Response time: ${responseTime} ms`);// 计算 DOMContentLoaded 事件时间
const domContentLoadedTime = timing.domContentLoadedEventEnd - timing.domContentLoadedEventStart;console.log(`DOMContentLoaded event time: ${domContentLoadedTime} ms`);

注意事项

  1. 兼容性performance.timing 在大多数现代浏览器中都是支持的,但在一些较旧的浏览器中可能不可用。
  2. 隐私: 由于 performance.timing 可以用于精确测量网络请求的时间,可能会引发隐私问题。因此,某些浏览器可能会限制或修改这些时间戳,以防止指纹识别攻击。
  3. 废弃警告performance.timing 的某些属性在未来的浏览器版本中可能会被废弃,建议使用 PerformanceNavigationTiming 接口来获取更详细的性能数据。

替代方案

如果你需要更详细和准确的性能数据,可以考虑使用 PerformanceObserverPerformanceNavigationTiming 接口:

new PerformanceObserver((list) => {list.getEntries().forEach((entry) => {console.log(entry.name, entry.startTime, entry.duration);});
}).observe({ entryTypes: ['navigation'] });

这将提供更丰富的性能数据,并且更加符合现代 Web 性能测量的最佳实践。

相关文章:

performance.timing

performance.timing 是 Web 性能 API 的一部分,用于获取页面加载过程中的各个时间戳。这些时间戳可以帮助开发者分析页面加载性能,找出潜在的瓶颈。performance.timing 返回一个 PerformanceTiming 对象,该对象包含了多个属性,每个…...

教你不用下载 maven,不用配置环境变量,在 idea 上创建 maven 项目

我的主页:2的n次方_ 1. Maven Maven是⼀个项⽬管理⼯具, 通过 pom.xml ⽂件的配置获取 jar 包,⽽不⽤⼿动去添加 jar 包,这样就大大的提高了开发效率 2. Maven 的核心功能 2.1. 项目构建 创建第一个 Maven 项目 Maven 提供了标准的…...

linux 设置tomcat开机启动

在Linux系统中,要配置Tomcat开机自启动,可以创建一个名为 tomcat.service 的 systemd 服务文件,并将其放置在 /etc/systemd/system/ 目录下。以下是一个基本的服务文件示例,假设Tomcat安装在 /usr/local/tomcat 路径下&#xff1a…...

opencv出错以及解决技巧

opencv配置 一开始&#xff0c;include的路径是<opencv4/opencv2/…> 这样在using namespace cv的时候导致了报错&#xff0c; 所以在cmakelist中需要对cmake的版本进行升级。 set(CMAKE_CXX_FLAGS “-stdc14 -O0 -Wall”)-O0 表示在编译过程中不进行任何优化 对应的pac…...

Python爬虫进阶(实战篇一)

接&#xff0c;基础篇&#xff0c;链接&#xff1a;python爬虫入门&#xff08;所有演示代码&#xff0c;均有逐行分析&#xff01;&#xff09;-CSDN博客 目录 1.爬取博客网站全部文章列表 ps:补充&#xff08;正则表达式&#xff09; 爬虫实现 爬虫代码&#xff1a; 2.爬…...

运维面试题(2)

ssh服务&#xff08;重点&#xff09;协议使用 端口 号&#xff1a;默认是 22&#xff0c; 可以是被修改的&#xff0c;如果需要修改&#xff0c;则需要修改 ssh 服务的配置文件&#xff1a;#/etc/ssh/ssh_config&#xff0c;可以通过这个配置文件来修改端口 端口号可以修改&am…...

Django CSRF Token缺失或不正确

在Django中&#xff0c;CSRF&#xff08;跨站请求伪造&#xff09;验证失败&#xff0c;提示“CSRF token missing or incorrect”的错误&#xff0c;通常是由以下几个原因造成的&#xff1a; 忘记在表单中添加 {% csrf_token %} 模板标签&#xff1a;这是最常见的原因之一。确…...

10.12Python数学基础-矩阵(下)

9.矩阵的转置 矩阵的转置&#xff08;Transpose&#xff09;是矩阵操作中的一种基本运算。它通过交换矩阵的行和列来生成一个新的矩阵。具体来说&#xff0c;如果 A 是一个 mn 的矩阵&#xff0c;那么它的转置矩阵 A^T 是一个 nm 的矩阵&#xff0c;其中 A^T 的第 i 行第 j 列…...

vue网络自学知识点汇总

初体验 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</title><!--1.引入vue.j…...

Springboot项目Activemq延迟自定义消息完整代码案例(亲测可用)

1、porm.xml增加依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-activemq</artifactId> </dependency> 2、application.properties增加配置 # 连接地址 spring.activemq.broker-url=fa…...

常见ElasticSearch 面试题解析(上)

前言 ElasticSearch是一个基于Lucene的搜索服务器。它提供了一个分布式多用户能力的全文搜索引擎&#xff0c;基于RESTful web接口。Elasticsearch是用Java语言开发的&#xff0c;并作为Apache许可条款下的开放源码发布&#xff0c;是一种流行的企业级搜索引擎。ElasticSearch…...

训练VLM(视觉语言模型)的经验

知乎&#xff1a;lym 链接&#xff1a;https://zhuanlan.zhihu.com/p/890327005 如果可以用prompt解决&#xff0c;尽量用prompt解决&#xff0c;因为训练&#xff08;精调&#xff09;的模型往往通用能力会下降&#xff0c;训练和长期部署成本都比较高&#xff0c;这个成本也包…...

犬儒乐队热歌《阶梯》主观

犬儒乐队一直以来是中国独立音乐界的一支重要力量。他们的音乐作品总是充满创意与实验&#xff0c;擅长将不同的音乐元素融合在一起&#xff0c;给人带来耳目一新的感受。最近&#xff0c;犬儒乐队发布了一首新歌《阶梯》&#xff0c;让我们一起来评价一下这首作品。 首先&…...

多模态大语言模型(MLLM)-Blip3/xGen-MM

论文链接&#xff1a;https://www.arxiv.org/abs/2408.08872 代码链接&#xff1a;https://github.com/salesforce/LAVIS/tree/xgen-mm 本次解读xGen-MM (BLIP-3): A Family of Open Large Multimodal Models 可以看作是 [1] Blip: Bootstrapping language-image pre-training…...

flutter TabBar自定义指示器(带文字的指示器、上弦弧形指示器、条形背景指示器、渐变色的指示器)

带文字的TabBar指示器 1.绘制自定义TabBar的绿色带白色文字的指示器 2.将底部灰色文字与TabrBar层叠&#xff0c;并调整高度位置与胶囊指示器重叠 自定义的带文字的TabBar指示器 import package:atui/jade/utils/JadeColors.dart; import package:flutter/material.dart; im…...

【Fargo】9:模拟图片采集的内存泄漏std::bad_alloc

std::bad_alloc 崩溃。这样的内存分配会导致内存耗尽 is simulating an image of size 640x480 with 3 bytes per pixel, resulting in an allocation of approximately 921,600 bytes (or around 900 KB) for each image. The error you’re encountering (std::bad_alloc) ty…...

c# 前端无插件打印导出实现方式

打印 打印导出分布页 model List<界面的数据模型类> using WingSoft; using Newtonsoft.Json; <style type"text/css">.modal-content {width: 800px;}.modal-body {height: 400px;} </style> <script type"text/javascript">$(…...

数组的初始化,参数传递,和求和

在自己做的这个C语言解释器中&#xff0c;数组的使用非常简便。下面小程序是一个例子。演示了数组的初始化&#xff0c;参数传递&#xff0c; 和求和。 all[] { WA12,OR8,CA54, ID4, MT4, WY3, NV6, UT6, AZ11, CO10, NM5, ND3,SD3,NE4, KS6, OK7,TX40, MN10, WI10,IA6, MO10,…...

初始JavaEE篇——多线程(1):Thread类的介绍与使用

找往期文章包括但不限于本期文章中不懂的知识点&#xff1a; 个人主页&#xff1a;我要学编程(ಥ_ಥ)-CSDN博客 所属专栏&#xff1a;JavaEE 目录 创建线程 1、继承 Thread类 2、实现Runnable接口 3、使用匿名内部类 1&#xff09;继承Thread类的匿名内部类 2&#xff09…...

基于单片机的LED照明自动控制系统的设计

本设计主控核心芯片选用了AT89C51单片机&#xff0c;接入了光照采集模块、红外感应模块、继电器控制模块&#xff0c;通过控制发光二极管模拟教室智能灯组的控制。首先通过光敏感应的方式感应当前光照环境为白天还是夜晚&#xff0c;同时&#xff0c;红外感应模块感应是否有人。…...

SpringBoot-17-MyBatis动态SQL标签之常用标签

文章目录 1 代码1.1 实体User.java1.2 接口UserMapper.java1.3 映射UserMapper.xml1.3.1 标签if1.3.2 标签if和where1.3.3 标签choose和when和otherwise1.4 UserController.java2 常用动态SQL标签2.1 标签set2.1.1 UserMapper.java2.1.2 UserMapper.xml2.1.3 UserController.ja…...

观成科技:隐蔽隧道工具Ligolo-ng加密流量分析

1.工具介绍 Ligolo-ng是一款由go编写的高效隧道工具&#xff0c;该工具基于TUN接口实现其功能&#xff0c;利用反向TCP/TLS连接建立一条隐蔽的通信信道&#xff0c;支持使用Let’s Encrypt自动生成证书。Ligolo-ng的通信隐蔽性体现在其支持多种连接方式&#xff0c;适应复杂网…...

日语AI面试高效通关秘籍:专业解读与青柚面试智能助攻

在如今就业市场竞争日益激烈的背景下&#xff0c;越来越多的求职者将目光投向了日本及中日双语岗位。但是&#xff0c;一场日语面试往往让许多人感到步履维艰。你是否也曾因为面试官抛出的“刁钻问题”而心生畏惧&#xff1f;面对生疏的日语交流环境&#xff0c;即便提前恶补了…...

【第二十一章 SDIO接口(SDIO)】

第二十一章 SDIO接口 目录 第二十一章 SDIO接口(SDIO) 1 SDIO 主要功能 2 SDIO 总线拓扑 3 SDIO 功能描述 3.1 SDIO 适配器 3.2 SDIOAHB 接口 4 卡功能描述 4.1 卡识别模式 4.2 卡复位 4.3 操作电压范围确认 4.4 卡识别过程 4.5 写数据块 4.6 读数据块 4.7 数据流…...

ESP32 I2S音频总线学习笔记(四): INMP441采集音频并实时播放

简介 前面两期文章我们介绍了I2S的读取和写入&#xff0c;一个是通过INMP441麦克风模块采集音频&#xff0c;一个是通过PCM5102A模块播放音频&#xff0c;那如果我们将两者结合起来&#xff0c;将麦克风采集到的音频通过PCM5102A播放&#xff0c;是不是就可以做一个扩音器了呢…...

【论文笔记】若干矿井粉尘检测算法概述

总的来说&#xff0c;传统机器学习、传统机器学习与深度学习的结合、LSTM等算法所需要的数据集来源于矿井传感器测量的粉尘浓度&#xff0c;通过建立回归模型来预测未来矿井的粉尘浓度。传统机器学习算法性能易受数据中极端值的影响。YOLO等计算机视觉算法所需要的数据集来源于…...

html css js网页制作成品——HTML+CSS榴莲商城网页设计(4页)附源码

目录 一、&#x1f468;‍&#x1f393;网站题目 二、✍️网站描述 三、&#x1f4da;网站介绍 四、&#x1f310;网站效果 五、&#x1fa93; 代码实现 &#x1f9f1;HTML 六、&#x1f947; 如何让学习不再盲目 七、&#x1f381;更多干货 一、&#x1f468;‍&#x1f…...

为什么要创建 Vue 实例

核心原因:Vue 需要一个「控制中心」来驱动整个应用 你可以把 Vue 实例想象成你应用的**「大脑」或「引擎」。它负责协调模板、数据、逻辑和行为,将它们变成一个活的、可交互的应用**。没有这个实例,你的代码只是一堆静态的 HTML、JavaScript 变量和函数,无法「活」起来。 …...

通过 Ansible 在 Windows 2022 上安装 IIS Web 服务器

拓扑结构 这是一个用于通过 Ansible 部署 IIS Web 服务器的实验室拓扑。 前提条件&#xff1a; 在被管理的节点上安装WinRm 准备一张自签名的证书 开放防火墙入站tcp 5985 5986端口 准备自签名证书 PS C:\Users\azureuser> $cert New-SelfSignedCertificate -DnsName &…...

Kubernetes 网络模型深度解析:Pod IP 与 Service 的负载均衡机制,Service到底是什么?

Pod IP 的本质与特性 Pod IP 的定位 纯端点地址&#xff1a;Pod IP 是分配给 Pod 网络命名空间的真实 IP 地址&#xff08;如 10.244.1.2&#xff09;无特殊名称&#xff1a;在 Kubernetes 中&#xff0c;它通常被称为 “Pod IP” 或 “容器 IP”生命周期&#xff1a;与 Pod …...