当前位置: 首页 > 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;红外感应模块感应是否有人。…...

装饰模式(Decorator Pattern)重构java邮件发奖系统实战

前言 现在我们有个如下的需求&#xff0c;设计一个邮件发奖的小系统&#xff0c; 需求 1.数据验证 → 2. 敏感信息加密 → 3. 日志记录 → 4. 实际发送邮件 装饰器模式&#xff08;Decorator Pattern&#xff09;允许向一个现有的对象添加新的功能&#xff0c;同时又不改变其…...

Flask RESTful 示例

目录 1. 环境准备2. 安装依赖3. 修改main.py4. 运行应用5. API使用示例获取所有任务获取单个任务创建新任务更新任务删除任务 中文乱码问题&#xff1a; 下面创建一个简单的Flask RESTful API示例。首先&#xff0c;我们需要创建环境&#xff0c;安装必要的依赖&#xff0c;然后…...

Golang dig框架与GraphQL的完美结合

将 Go 的 Dig 依赖注入框架与 GraphQL 结合使用&#xff0c;可以显著提升应用程序的可维护性、可测试性以及灵活性。 Dig 是一个强大的依赖注入容器&#xff0c;能够帮助开发者更好地管理复杂的依赖关系&#xff0c;而 GraphQL 则是一种用于 API 的查询语言&#xff0c;能够提…...

macOS多出来了:Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用

文章目录 问题现象问题原因解决办法 问题现象 macOS启动台&#xff08;Launchpad&#xff09;多出来了&#xff1a;Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用。 问题原因 很明显&#xff0c;都是Google家的办公全家桶。这些应用并不是通过独立安装的…...

苍穹外卖--缓存菜品

1.问题说明 用户端小程序展示的菜品数据都是通过查询数据库获得&#xff0c;如果用户端访问量比较大&#xff0c;数据库访问压力随之增大 2.实现思路 通过Redis来缓存菜品数据&#xff0c;减少数据库查询操作。 缓存逻辑分析&#xff1a; ①每个分类下的菜品保持一份缓存数据…...

工业自动化时代的精准装配革新:迁移科技3D视觉系统如何重塑机器人定位装配

AI3D视觉的工业赋能者 迁移科技成立于2017年&#xff0c;作为行业领先的3D工业相机及视觉系统供应商&#xff0c;累计完成数亿元融资。其核心技术覆盖硬件设计、算法优化及软件集成&#xff0c;通过稳定、易用、高回报的AI3D视觉系统&#xff0c;为汽车、新能源、金属制造等行…...

Springboot社区养老保险系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;社区养老保险系统小程序被用户普遍使用&#xff0c;为方…...

SAP学习笔记 - 开发26 - 前端Fiori开发 OData V2 和 V4 的差异 (Deepseek整理)

上一章用到了V2 的概念&#xff0c;其实 Fiori当中还有 V4&#xff0c;咱们这一章来总结一下 V2 和 V4。 SAP学习笔记 - 开发25 - 前端Fiori开发 Remote OData Service(使用远端Odata服务)&#xff0c;代理中间件&#xff08;ui5-middleware-simpleproxy&#xff09;-CSDN博客…...

HarmonyOS运动开发:如何用mpchart绘制运动配速图表

##鸿蒙核心技术##运动开发##Sensor Service Kit&#xff08;传感器服务&#xff09;# 前言 在运动类应用中&#xff0c;运动数据的可视化是提升用户体验的重要环节。通过直观的图表展示运动过程中的关键数据&#xff0c;如配速、距离、卡路里消耗等&#xff0c;用户可以更清晰…...

【7色560页】职场可视化逻辑图高级数据分析PPT模版

7种色调职场工作汇报PPT&#xff0c;橙蓝、黑红、红蓝、蓝橙灰、浅蓝、浅绿、深蓝七种色调模版 【7色560页】职场可视化逻辑图高级数据分析PPT模版&#xff1a;职场可视化逻辑图分析PPT模版https://pan.quark.cn/s/78aeabbd92d1...