首页 > 其他分享 >你是如何比较js函数的执行速度的?

你是如何比较js函数的执行速度的?

时间:2024-12-06 09:54:35浏览次数:5  
标签:console 函数 js functionA functionB 速度 now const

在前端开发中,比较 JavaScript 函数的执行速度可以使用多种方法,各有优缺点:

1. console.time()console.timeEnd():

这是最简单直接的方法,适合快速粗略的比较。

  • 优点: 简单易用,内置于浏览器控制台。
  • 缺点: 精度不高,容易受到其他因素干扰,例如浏览器负载和垃圾回收。
console.time('functionA');
functionA(); // 执行函数A
console.timeEnd('functionA');

console.time('functionB');
functionB(); // 执行函数B
console.timeEnd('functionB');

2. performance.now():

提供更高精度的时间测量,可以更准确地比较函数执行时间。

  • 优点: 精度高,比 console.time() 更可靠。
  • 缺点: 需要手动计算时间差。
const startA = performance.now();
functionA();
const endA = performance.now();
console.log(`functionA took ${endA - startA} milliseconds`);

const startB = performance.now();
functionB();
const endB = performance.now();
console.log(`functionB took ${endB - startB} milliseconds`);

3. jsPerf (jsperf.com,但现在已关闭,可以考虑使用 benchmark.js):

这是一个专门用于 JavaScript 性能测试的在线平台(曾经)。 虽然 jsPerf 已关闭,但其理念在 benchmark.js 中得到传承。 benchmark.js 允许创建更严谨的测试用例,并进行统计分析,提供更可靠的结果。

  • 优点: 提供更科学的测试环境,可以进行多次测试并计算平均值、标准差等统计数据,减少误差。
  • 缺点: 需要搭建测试环境,编写测试用例。
// 使用 benchmark.js 的示例
const Benchmark = require('benchmark');
const suite = new Benchmark.Suite;

suite.add('functionA', function() {
  functionA();
})
.add('functionB', function() {
  functionB();
})
// add listeners
.on('cycle', function(event) {
  console.log(String(event.target));
})
.on('complete', function() {
  console.log('Fastest is ' + this.filter('fastest').map('name'));
})
// run async
.run({ 'async': true });

4. Profiler 工具 (例如 Chrome DevTools 中的 Performance 面板):

可以更深入地分析函数执行过程中的各个环节,例如函数调用次数、执行时间、内存占用等。

  • 优点: 提供更详细的性能分析数据,可以帮助定位性能瓶颈。
  • 缺点: 操作相对复杂,需要一定的经验才能有效地使用。

选择哪种方法取决于你的需求:

  • 对于简单的比较,console.time()console.timeEnd() 就足够了。
  • 对于需要更高精度的比较,应该使用 performance.now()
  • 对于需要进行更严谨的性能测试,应该使用 benchmark.js 或类似的库。
  • 对于需要深入分析函数执行过程,应该使用 Profiler 工具。

记住,任何性能测试都应该进行多次,并取平均值,以减少误差。 并且要注意测试环境的一致性,例如浏览器版本、硬件配置等。

标签:console,函数,js,functionA,functionB,速度,now,const
From: https://www.cnblogs.com/ai888/p/18589975

相关文章

  • 使用js实现一个循环队列
    classCircularQueue{constructor(capacity){this.capacity=capacity;this.queue=newArray(capacity);this.head=-1;this.tail=-1;this.size=0;}enqueue(item){if(this.isFull()){returnfalse;//Orthrow......
  • editplus json格式化脚本
    editplusjson格式化脚本JSON(JavaScriptObjectNotation)是一种轻量级的数据交换格式,它基于JavaScript的一个子集,易于人阅读和编写,同时也易于机器解析和生成。在处理JSON数据时,保持其整洁和格式化的状态对于代码的可读性和维护性至关重要。EditPlus是一款强大的文本编辑器,支......
  • js的循环结构有哪些?
    JavaScript提供了多种循环结构,用于重复执行代码块。以下是几种常见的循环类型:for循环:这是最常用的循环结构,它允许你根据计数器或条件重复执行代码块。for(leti=0;i<10;i++){console.log(i);//输出0到9}//for循环的三个部分://1.初始化:leti......
  • 举例说明js中什么是尾调用优化?
    在JavaScript中,尾调用优化(TailCallOptimization,TCO)是一种编译器优化技术,它可以防止在进行某些类型的递归调用时出现栈溢出错误。它通过在尾调用位置不创建新的栈帧,而是重用当前栈帧来实现。这意味着即使递归调用很深,也不会导致调用栈无限增长。什么叫尾调用?尾调用是......
  • 医院招聘考试管理系统|Java|SSM|JSP| 前后端分离
     【重要1⃣️】前后端源码+万字文档+部署文档            【包含内容】【一】项目提供非常完整的源码注释【二】相关技术栈文档【三】源码讲解视频                     【其它服务】【一】可以提供远......
  • 医院远程诊断管理系统|Java|SSM|JSP| 前后端分离
    【重要1⃣️】前后端源码+万字文档+部署文档            【包含内容】【一】项目提供非常完整的源码注释【二】相关技术栈文档【三】源码讲解视频                     【其它服务】【一】可以提供远程......
  • 帝国cms会员中心二开常用函数
    判断用户是否登录函数文件目录e\member\class\user.php函数functionislogin($uid=0,$uname='',$urnd=''){global$empire,$dbtbpre,$public_r,$ecmsreurl,$ecms_config;if($uid){$userid=(int)$uid;}else{$userid=(int)getcvar('......
  • js 如何操作IndexedDB 存储
    IndexedDB是一种在用户浏览器中存储大量结构化数据的方式。它是一个低级API,用于在客户端存储大量数据,并使用索引来进行高性能搜索。以下是如何在前端JavaScript中使用IndexedDB的基本步骤:1.打开数据库首先,你需要打开一个数据库。如果数据库不存在,它会自动创建。letdb;......
  • 一个js文件导出一个new class实例,其他多个地方import引用的是同一个实例对象吗
    在JavaScript中,当你从一个模块导出一个类的实例时,其他模块在导入这个实例时将获得该实例的一个引用。这意味着,如果你修改了这个实例的属性或调用它的方法,所有导入该实例的模块都会看到这些更改,因为它们引用的是同一个对象。以下是一个示例:moduleA.js:classMyClass{const......
  • 《C++神经网络编程:激活函数的策略性遴选》
    在当今数字化浪潮汹涌澎湃的时代,人工智能尤其是神经网络技术正以前所未有的速度革新着各个领域。而在C++神经网络算法的构建进程中,激活函数的选定无疑是一项极具策略性与技巧性的关键环节,它宛如神经网络的“智慧开关”,深刻左右着模型的学习效能、适应性以及整体的表现水准......