Js利用console计算代码运行时间的方法示例
前言
本文主要给大家介绍了关于Js用console计算代码运行时间的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧。
需求
如果学习前端一定时间以后,就会考虑性能方面的问题。那么问题来了,我们怎么计算出一段代码的运行时间呢?
使用console.log配合Date对象计算
比如,我们计算sort方法排序十万个随机数组成的数组需要用多长时间的话,可以这么写:
var arr = []; for(var i=0; i<100000; i++){ arr.push(Math.random()); } var beginTime = +new Date(); arr.sort(); var endTime = +new Date(); console.log("排序用时共计"+(endTime-beginTime)+"ms");
最后在控制台会显示:
排序用时共计552ms
下面,再介绍一种更灵活更准确的方法。
使用console.time进行时间计算
这种方法比上一种更准确,而且专门为性能产生的方法:
测试案例:
var arr = []; for(var i=0; i<100000; i++){ arr.push(Math.random()); } console.time("sort"); arr.sort(); console.timeEnd("sort");
控制台会打印出:
sort: 542.668701171875ms
这种方法在需要测试的开始位置写上console.time,并且括号内传一个字符串。在结束的位置使用console.timeEnd方法,并再次把字符串传入。
个人推荐第二种方式。
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对我们的支持。
相关推荐
-
9个让JavaScript调试更简单的Console命令
一.显示信息的命令 <!DOCTYPE html> <html> <head> <title>常用console命令</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <script type="text/javascri
-
Javascript调试之console对象——你不知道的一些小技巧
前言 写过前端Javascript代码的同学肯定不会对console对象感到陌生,在调试的过程中我们经常会用console对象在控制台输出一些常量或者变量. 但是相信很多人也就只用过console.log()这一个方法,今天我们就一起来看看console对象还有哪些比较有用的方法.由于本篇文章是跟控制台有关,代码就直接在控制台展现而没有另外用新文件展示. 不同级别日志 通过console对象的不同方法,可以在控制台上输出不同级别的日志信息,它们会采用不同的标志来展示,如下图所示. 不同级别的日志
-
深入分析javascript中console命令
一.显示信息的命令 代码如下: <!DOCTYPE html> <html> <head> <title>常用console命令</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <script type="text/ja
-
js调试工具Console命令详解
一.显示信息的命令 复制代码 代码如下: <!DOCTYPE html> <html> <head> <title>常用console命令</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <script type="te
-
Js利用console计算代码运行时间的方法示例
前言 本文主要给大家介绍了关于Js用console计算代码运行时间的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 需求 如果学习前端一定时间以后,就会考虑性能方面的问题.那么问题来了,我们怎么计算出一段代码的运行时间呢? 使用console.log配合Date对象计算 比如,我们计算sort方法排序十万个随机数组成的数组需要用多长时间的话,可以这么写: var arr = []; for(var i=0; i<100000; i++){ arr.push(Math.
-
Node.js利用console输出日志文件的方法示例
通常我们在写Node.js程序时,都习惯使用console.log打印日志信息,但这也仅限于控制台输出,有时候我们需要将信息输出到日志文件中,实际上利用console也可以达到这个目的的,今天就来简单介绍一下. 我们首先创建如下文件: // index.js let fs = require('fs'); let options = { flags: 'a', // append模式 encoding: 'utf8', // utf8编码 }; let stdout = fs.createWri
-
js利用prototype调用Array的slice方法示例
复制代码 代码如下: <script type="text/javascript"> function fn(name){ if(typeof name === "string"){ var args = Array.prototype.slice.call( arguments, 1 ); for(var i=0;i<args.length;i++){ alert(args[i]);//结果: 111 222 } } } function cal
-
原生JS利用transform实现banner的无限滚动示例代码
功能 默认情况无限循环向右移动 点击数字切换到对应图片 点击左右切换可切换图片 原理 首先说下原理. 在布局上所有的图片都是重叠的,即只要保证Y方向对齐即可,当前可见的图z-index层级最高. 每隔3s中更换一张图片,使用setTimeout定时. 使用gIndex记录当前可视区域的展示的是哪张图片下标,每次更换,计算下一张图片的下标. 通过requestAnimationFrame实现一次图片切换的动画. 这种方法也可以做到整个页面始终只有2个img标签,而不必把所有的img节点全部创建出来
-
Node.js 利用cheerio制作简单的网页爬虫示例
本文介绍了Node.js 利用cheerio制作简单的网页爬虫示例,分享给大家,具有如下: 1. 目标 完成对网站的标题信息获取 将获取到的信息输出在一个新文件 工具: cheerio,使用npm下载npm install cheerio cheerio的API使用方法和jQuery的使用方法基本一致 如果熟练使用jQuery,那么cheerio将会很快上手 2. 代码部分 介绍: 获取segment fault页面的列表标题,将获取到的标题列表编号,最终输出到pageTitle.txt文件里
-
idea快速生成代码配置的方法示例
前言 这里是用的goland idea,实际上这个idea和 intellij idea的配置是一样的,并没有太大区别, 开整 1.进入 File->settings->Editor->Live Templates 2.添加模板组 点击右上角的绿色+号,然后选择template group ,然后输入group的name,这个名字你随便起,我的是:my.然后点ok 属于你自己的组就创建好了 3. 添加模板 选中刚才创建的myGroup,然后再次点击右侧的绿色+,这次选择的是第一个1. L
-
three.js利用gpu选取物体并计算交点位置的方法示例
光线投射法 使用three.js自带的光线投射器(Raycaster)选取物体非常简单,代码如下所示: var raycaster = new THREE.Raycaster(); var mouse = new THREE.Vector2(); function onMouseMove(event) { // 计算鼠标所在位置的设备坐标 // 三个坐标分量都是-1到1 mouse.x = event.clientX / window.innerWidth * 2 - 1; mouse.y =
-
JS手机端touch事件计算滑动距离的方法示例
本文实例讲述了JS手机端touch事件计算滑动距离的方法.分享给大家供大家参考,具体如下: 计算手势在手机屏幕上滑动时,手势滑动的距离,代码如下: function wetherScroll(){ var startX = startY = endX =endY =0; var body=document.getElementsByTagName("body"); body.bind('touchstart',function(event){ var touch = event.tar
-
JS实现数组去重复值的方法示例
本文实例讲述了JS实现数组去重复值的方法.分享给大家供大家参考,具体如下: 运行效果图如下: 完整实例代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&
-
JS实现获取自定义属性data值的方法示例
本文实例讲述了JS实现获取自定义属性data值的方法.分享给大家供大家参考,具体如下: HTML部分: <div id="tree" data-leaves="47" data-plant-height="2.4m"></div> js部分: var tree = document.getElementById("tree"); //getAttribute()取值属性 console.log(tree
随机推荐
- 百度编辑器从Json对象中取值,完成初次渲染,在编辑器内画表格
- 在PB中如何让用户只能修改新增的数据
- 80后潮人们必须会说的60句话 比较经典
- 如何访问大型机、小型机上的DB2 9数据服务器
- Tomcat6.0与windows 2003 server 的IIS服务器集成
- Java实现AC自动机全文检索示例
- 自己模拟写C++中的String类型实例讲解
- Asp.Net数据控件引用AspNetPager.dll分页实现代码
- PHP输出九九乘法表代码实例
- php 修改zen-cart下单和付款流程以防止漏单
- php 中的closure用法详解
- Vue 进阶教程之v-model详解
- 文件上传之SWFUpload插件(代码)
- 判断数据库表是否存在以及修改表名的方法
- jQuery表单验证简单示例
- javascript优先加载笔记代码
- 按钮里的字可以换行吗
- php学习笔记 数组的常用函数
- Android ViewPager与radiogroup实现关联示例
- C#中while循环语句用法实例详解