概述

  使用计时器可以对代码运行过程进行测速。你可以给每个计时器取一个名字,每个页面上最多可以运行一万个计时器。当你使用计时器名字调用 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. [spark] spark安装和基础使用

    [下载] 注意选择spark版本时,与hadoop的版本要搭配 http://spark.apache.org/downloads.html [安装]

  2. ESD保护芯片BAT54S/BAV99和电平转换芯片SN74AVC1T45

    如下两图是terasic公司DE2-115部分原理图截图,其中有两个芯片引起了笔者的注意,一个是SN74AVC1T45和BAT54S,下面说说这两个芯片利用的好处和借鉴之处. 先讲一下BAV99.手册 ...

  3. Axiom3D写游戏:第一个窗口

    Axiom主要的代码大致翻看了下,就想到了自己来模拟一下游戏开发. 这章主要包括创建窗口及3D渲染的一些基本元素,并添加一个第三人称的骨骼动画作主角,加上前文中修改过后的地形组件,能用鼠标和键盘进行漫 ...

  4. Numpy 的数组转置和轴对换

    数组转置 转置(transpose)是重塑的一种特殊形式, 它返回的是源数据的视图(不会进行任何操作.)数组不仅有transpose,还要特殊的T属性 计算矩阵内积 高维数组transpose 详细讲 ...

  5. SpringMVC系列(十六)Spring MVC与Struts2的对比

    • Spring MVC 的入口是 Servlet, 而 Struts2 是 Filter• Spring MVC 会稍微比 Struts2 快些. Spring MVC 是基于方法设计, 而 Stu ...

  6. 使用Camera功能 AREA的理解

    转至 http://blog.csdn.net/think_soft/article/details/7998478 使用Camera功能 大多数的Camera功能都是使用Camera.Paramet ...

  7. Github 提交本地代 到远程 菜鸟 简明教程

    方法1: 1. 右击项目文件夹  Git Bash Here 或   Git clone  Url  远程仓库地址  Directory  本地文件夹 2. 拷贝(新建)项目文件 3. 添加项目文件 ...

  8. UITableView 顶部能够放大的图片

    UITableView 顶部能够放大的图片 现在有挺多的应用在 UITableView 顶部加入图片,通过拖拽 UITableView 来实现图片的放大. 对比一下腾讯出品的两款App QQ:可展示更 ...

  9. Business vs Technology

    Business 只是 Technology的子集. Business只是体现在Code中. 比如说是HTML页面中内容的一部分. 或者说业务是对HTML组成的内容的分类. 比如说Smallbusin ...

  10. js requestAnimationFrame

    requestAnimationFrame,Web中写动画的另一种选择  原文:https://www.cnblogs.com/Wayou/p/requestAnimationFrame.html H ...