首页 > 其他分享 >紧急手撸 console.time()

紧急手撸 console.time()

时间:2024-07-15 18:29:37浏览次数:15  
标签:console new label 紧急 time Date performance now

前要
最近做需求开发想要看一下代码块的运行耗时,无意间看到了console.time()console.timeEnd(),出于好奇就深入了解了一下
原理没啥好说的,我们来看看怎么手撸一个 console.time()
最初是想着简简单单使用个 new Date() 来记录运行耗时的,谁知道后面 ...

我们来简单请出我们今天的两位主角 new Date()performance.now()new Date() 相信大家都很熟悉了,对于 performance.now() 可能比较陌生,今天就来唠唠、

new Date()

new Date() 是 JavaScript 中用于创建 Date 对象的构造函数。 Date 对象用于处理日期和时间。该函数下有很多方法,这里就细数了,各位大佬们可以自行去look look。
Date.now() 返回当前时间的时间戳(自1970年1月1日 00:00:00 UTC以来的毫秒数)。

(function () {
	// 存储计时器的对象
	const timers = {};

	// 模拟 console.time
	console.myTime = function (label) {
	  if (typeof label !== "string") {
		throw new Error("Label for console.myTime must be a string");
	  }
	  timers[label] = Date.now();
	};

	// 模拟 console.timeEnd
	console.myTimeEnd = function (label) {
	  if (typeof label !== "string") {
		throw new Error("Label for console.myTimeEnd must be a string");
	  }
	  const endTime = Date.now();
	  const startTime = timers[label];

	  if (!startTime) {
		console.warn(`No such label: ${label}`);
		return;
	  }

	  const timeDiff = endTime - startTime;
	  console.log(`${label}: ${timeDiff}ms`);
	  delete timers[label]; // 删除记录以释放内存
	};
})();

image.png
运用到实战之后发现实用性有些差,对比自带的 console.time() 精度有所欠缺,直观性比较差

new Date() 给你机会你不中用呀,弃之~✖
我们把目光放到 performance.now() 上☟

performance.now()

performance 是一个高精度的计时 API,提供了多种方法用于测量页面性能。 它是 window 对象的一部分,通常用于性能分析和优化。
performance.now() 提供比 Date.now() 更高的时间精度,通常到微秒级(千分之一毫秒),非常适合测量短时间间隔。
performance.now()new Date() 不同的是 performance.now() 的时间戳是相对的,不受系统时间更改的影响。

(function () {
	// 存储计时器的对象
	const timers = {};
	
	// 检查是否存在 performance.now() 方法
	const now =
	  typeof performance !== "undefined" && performance.now
		? performance.now.bind(performance)
		: Date.now;
	
	// 模拟 console.time
	console.myTime = function (label) {
	  if (typeof label !== "string") {
		throw new Error("Label for console.myTime must be a string");
	  }
	  timers[label] = now();
	};
	
	// 模拟 console.timeEnd
	console.myTimeEnd = function (label) {
	  if (typeof label !== "string") {
		throw new Error("Label for console.myTimeEnd must be a string");
	  }
	  const endTime = now();
	  const startTime = timers[label];
	
	  if (startTime === undefined) {
		console.warn(`No such label: ${label}`);
		return;
	  }
	
	  const timeDiff = endTime - startTime;
	  console.log(`${label}: ${timeDiff}ms`);
	  delete timers[label]; // 删除记录以释放内存
	};
})();

image.png
nice~这会看起来就具有可看性了

值得一提的是,无论是原生的 console.time() 还是手撸的 performance.now() 都会损耗 少量 性能,不宜过多使用,节制嗷~☼▲●

本篇文章的主要目的还是探究怎么去对比实现 console.time() 及其背后的代码实现原理 和了解一下 performance.now()

全剧终

感谢各位大佬查阅,跪谢~

标签:console,new,label,紧急,time,Date,performance,now
From: https://blog.csdn.net/qq_45040932/article/details/140445873

相关文章

  • TimescaleDB时间序列数据库
    TimescaleDB:这是一款支持完整sql开源的时间序列数据库。用处1、数据量庞大2、只做时间索引类的插入3、很少更新数据TimescaleDB的好处:基于时序优化自动分片(自动按时间、空间分片(chunk))全SQL接口支持垂直于横向扩展支持时间维度、空间维度自动分区。空间维度指属性字......
  • Windows11系统System.Runtime.Serialization.dll文件丢失问题
    其实很多用户玩单机游戏或者安装软件的时候就出现过这种问题,如果是新手第一时间会认为是软件或游戏出错了,其实并不是这样,其主要原因就是你电脑系统的该dll文件丢失了或没有安装一些系统软件平台所需要的动态链接库,这时你可以下载这个System.Runtime.Serialization.dll文件(挑选......
  • 解决Microsoft Visual C++ runtime package找不到问题
    使用了Dism++进行电脑清理,不小心选择了下面两个内容:尤其是第二个packagecache绝对不能清空,否则不知道哪个软件就不能运行了,报MicrosoftvisualC++runtime问题.然后再安装各个版本MicrosoftvisualC++redis仍会报同样的问题,死循环了.网上有各种解决方案,有......
  • 更新扫描MySQL库里的所有表的UPDATE_TIME,若发生变动就mysqldump
    背景 #!/bin/bash#MySQL连接信息MYSQL_USER="root"MYSQL_PASSWORD="123!"MYSQL_DATABASE="dev_flow_table"#记录上次查询的更新时间的文件LAST_RESULT_FILE="last_result.txt"CURRENT_RESULT_FILE="current_result.txt"DUMP_FILE......
  • bootstrap-datetimepicker 项目
    项目 此项目是bootstrap-datetimepicker项目 的一个分支,原项目不支持 Time 选择。其它部分也进行了改进、增强,例如load 过程增加了对ISO-8601日期格式的支持。文档是拷贝/粘贴字原项目的文档,并且加入了更多细节说明。 别犹豫了,下载下来试试吧!下载ZIP包此地......
  • mormot.rest.core--TRestBackgroundTimer
    mormot.rest.core--TRestBackgroundTimer{************自定义REST执行}type///TRestServer.Uri()方法可能执行的所有命令//-execSoaByMethod用于基于方法的服务//-execSoaByInterface用于基于接口的服务//-execOrmGet用于ORM读取操作,即Retrieve......
  • DELTA: DEGRADATION-FREE FULLY TEST-TIME ADAPTATION--论文笔记
    论文笔记资料1.代码地址2.论文地址https://arxiv.org/abs/2301.130183.数据集地址https://github.com/bwbwzhao/DELTA论文摘要的翻译完全测试时间自适应旨在使预训练模型在实时推理过程中适应测试数据流,当测试数据分布与训练数据分布不同时,这种方法很有效。为提高适......
  • Feature Alignment and Uniformity for Test Time Adaptation--论文笔记
    论文笔记资料1.代码地址https://github.com/SakurajimaMaiii/TSD2.论文地址https://arxiv.org/abs/2303.109023.数据集地址论文摘要的翻译TTA在接收训练分布外的测试域样本时对深度神经网络进行自适应。在这样设置下,模型只能访问在线未标记的测试样本和训练域上的预......
  • uniapp 使用uview 组件 DatetimePicker 默认值无效问题
    1.DatetimePicker默认值无效问题 -- 解决办法:使用$refs解决<u-datetime-pickerref="defaultPicker":show="openDatePicker":value="dateValue"mode="date" minDate="-2209017943"closeOnClickOverl......
  • “程序无法启动,因为您的计算机中丢失 VCRUNTIME140.dll。”怎么解决
    在计算机中经常会遇到各式各样的问题,其中遇到vcruntime140.dll丢失或许找不到vcruntime140.dll是经常常见的问题之一,那么当我们遇到vcruntime140.dll丢失问题时候要怎么办?下面我就给大家一一讲解vcruntime140.dll文件和vcruntime140.dll文件的多个解决方法!vcruntime140.dll......