概述

  使用计时器可以对代码运行过程进行测速。你可以给每个计时器取一个名字,每个页面上最多可以运行一万个计时器。当你使用计时器名字调用 console.timeEnd() 函数时,浏览器会返回一个毫秒值,该值表示该计时器启动到你调用 console.timeEnd() 时的时间。

语法

console.time(timerName);

timerName

  计时器名称,该名称用于标识一个计时器,当使用该名称调用 console.timeEnd() 时会停止相应的计时器,并在控制台输出计时时间。

如何捕获计时器返回值

  很可惜,console.time() 和 console.timeEnd() 只能在控制台输出计时时间,但不能返回输出内容,也就不能赋给变量保存。

  如果需要计时作为变量使用,可以使用 window.performance.now() 函数计时:

var start = window.performance.now();
var end = window.performance.now();
var duration = end - start;

  

  window.performance.now() 返回一个浮点值表示当前距离页面被加载时的毫秒时间,如果想知道页面是何时被加载的,可以获取 window.performance.timing.navigationStart 值,该表示页面加载时的 Unix 时间戳。

  你也可以使用 Date.now() 函数来计时,该函数返回一个整数毫秒值。

var start = Date.now();
var duration = Date.now() - start;

  又或者 Date().getTime() 对象计时,该对象返回的是 Unix 时间戳:

var start = new Date().getTime();
var end = new Date().getTime();
var duration = end - start

  PS:window.performance.now() 会比 Date.now() 慢很多。

[JS] console.time() - 计时器构造函数及如何计时的更多相关文章

  1. js中的计时器事件`setTimeout()` 和 `setInterval()`

    js中的计时器事件 在js中,通常会有一些事件,我们需要让它 间隔一段时间之后再发生,或者 每隔一段时间 发生一次,那就需要用到我们js中的计时事件 计时事件主要有两种: setTimeout() - ...

  2. JS中的计时器事件

    JS可以实现很多java代码不易完成的功能.这里学习一些js中的计时器事件. JavaScript 一个设定的时间间隔之后来执行代码,称之为计时事件. 主要通过两个方法来实现: 1.setInterv ...

  3. 一篇文章理解JS继承——原型链/构造函数/组合/原型式/寄生式/寄生组合/Class extends

    说实在话,以前我只需要知道"寄生组合继承"是最好的,有个祖传代码模版用就行.最近因为一些事情,几个星期以来一直心心念念想整理出来.本文以<JavaScript高级程序设计&g ...

  4. js console 性能测试 & don't-use-array-foreach-use-for-instead

    don't-use-array-foreach-use-for-instead slower https://coderwall.com/p/kvzbpa/don-t-use-array-foreac ...

  5. js精要之构造函数

    // 枚举对象 var obj = {} obj.name = "bob"; obj.age = "; obj.sex = "boy"; consol ...

  6. js 原型链、构造函数、原型与实例之间的关系

    面向对象编程都会涉及到继承这个概念,JS中实现继承的方式主要是通过原型链的方法. 一.构造函数.原型与实例之间的关系 每创建一个函数,该函数就会自动带有一个 prototype 属性.该属性是个指针, ...

  7. js面向对象程序设计之构造函数

    再上一篇的开头说了创建对象的两种方式,一种是Object构造函数的方式,一种是对象字面量的方法.但这些方式创建多个对象的时候都会产生大量的重复代码.经过技术的进步也演化出来许多的创建对象的模式.本章会 ...

  8. js console API All In One

    js console API All In One const log = console.log; for(const key in console) { log(`navigator.${key} ...

  9. js console.log all in one

    js console.log all in one this & arguments "use strict"; /** * * @author xgqfrms * @li ...

随机推荐

  1. 关于Unity中Cg的基本语法和使用

    Cg是类似于C语言的发展起来的图形编程语言,Cgraphics,它的很多表达式if...else...和C语言非常相像,也和C#非常相像. 由于Shader是写给显卡执行的,所以没有输出语句来调试,很 ...

  2. 关于Unity中的刚体和碰撞器的相关用法(一)

    1.创建一个3D工程 2.构造项目文件目录 3.保存场景为game_scene到文件夹scenes中 4.创建一个Plane平面类型的GameObject节点和一个Sphere球体类型的GameObj ...

  3. 第三百五十二节,Python分布式爬虫打造搜索引擎Scrapy精讲—chrome谷歌浏览器无界面运行、scrapy-splash、splinter

    第三百五十二节,Python分布式爬虫打造搜索引擎Scrapy精讲—chrome谷歌浏览器无界面运行.scrapy-splash. splinter 1.chrome谷歌浏览器无界面运行 chrome ...

  4. JAR 归档文件是与平台无关的文件格式

    JAR(Java Archive,Java 归档文件)是与平台无关的文件格式,它允许将许多文件组合成一个压缩文件,可以使用Java软件打开. 为 J2EE 应用程序创建的 JAR 文件是 EAR 文件 ...

  5. keystone源码分析(一)——Paste Deploy的应用

    本keystone源码分析系列基于Juno版Keystone,于2014年10月16日随Juno版OpenStack发布. Keystone作为OpenStack中的身份管理与授权模块,主要实现系统用 ...

  6. 使用DUPLICATE 方式创建ORACLE 11G DG备库环境

    我的最佳实践 ① 手动创建好初始化参数文件: *.audit_file_dest='E:\APP\XJXU\ADMIN\ORASTAND\ADUMP'*.control_files='E:\APP\X ...

  7. Sublime text 3 中Package Control 的安装与使用方法

    Package Control插件本身是一个为了方便管理插件的插件,在Sublime text 3中,Package Control 的安装方法一开始出来的方法是要先安装Git, 再输入代码来安装,原 ...

  8. 内存管理 初始化(四)mem_init bootmem 迁移至伙伴系统

    mm_init中执行mem_init,将原通过bootmem分配器管理的低端内存 及  通过meminfo得知的高端内存释放到伙伴系统中,最后bootmem位图本身占用的低端内存物理页也被释放进伙伴系 ...

  9. Http Cookie Manager、session

     1. JMeter Http Cookie Manager的作用: (1)自动管理 (2)象浏览器一样的存储和发送Cookie.如果你请求一个站点,然后他的Response中包含Cookie,Coo ...

  10. sql产生随机数

    使用RAND(),结果是类似于这样的随机小数:0.615942003695649 SELECT FLOOR(RAND()*N) ---生成的数是这样的:12.0  SELECT CAST(FLOOR( ...