[JS] console.time() - 计时器构造函数及如何计时

概述

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

 

时间: 2024-08-02 13:11:59

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

浅谈JS继承_借用构造函数 & 组合式继承_javascript技巧

2.借用构造函数 为解决原型中包含引用类型值所带来的问题, 我们使用一种叫做 借用构造函数(constructor stealing)的技术(又叫伪造对象或经典继承). 这种技术的基本思想:在子类构造函数内部调用超类型构造函数. 通过使用apply()和call()方法可以在新创建的子类对象上执行构造函数. function SuperType(){ this.colors = ["red", "blue", "green"]; } functi

js console.log打印对像与数组用法详解_javascript技巧

本文实例讲述了js console.log打印对像与数组用法.分享给大家供大家参考,具体如下: console.log是什么东西,其实就是一个打印js数组和对像的函数而已,就像是php的print_r,var_dump.console.log这个函数本身没什么好说的,这篇博客告诉大家怎么去用这个函数.在说这个函数之前,我想大家用的最多查看js输出,是alert吧,但是alert,只能弹string或者是int的 一.测试文件test.html <html xmlns="http://www

JS继承之借用构造函数继承和组合继承_javascript技巧

借用构造函数继承  在解决原型中包含引用类型值所带来问题的过程中,开发人员开始使用一种叫做借用构造函数(constructor stealing)的技术(有时候也叫做伪造对象或经典继承).这种技术的基本思想相当简单,即在子类型构造函数的内部调用超类型构造函数.  基本模式 function SuperType(){ this.colors = ["red", "blue", "green"]; } function SubType(){ //继承

js中组合使用构造函数模式和原型模式创建对象

  js中组合构造函数模式和原型模式创建对象是最常见的方法. 构造函数模式用于定义实例属性,原型模式用于定义方法和共享属性.优点如下 ①每个实例都会有自己的一份实例属性的副本,又同时共享对方法的引用,最大限度地节省了内存. ②这种混合模式还支持向构造函数传递参数. function Student(name,age,class){  this.name = name;  this.age = age;  this.class = class;  this.friends = ["Tom"

Console命令详解,让调试js代码变得更简单

Console命令详解,让调试js代码变得更简单 Firebug是网页开发的利器,能够极大地提升工作效率. 但是,它不太容易上手.我曾经翻译过一篇<Firebug入门指南>,介绍了一些基本用法.今天,继续介绍它的高级用法. =================================== Firebug控制台详解 作者:阮一峰 出处:http://www.ruanyifeng.com/blog/2011/03/firebug_console_tutorial.html 控制台(Conso

js中console用法详解介绍(非常实用)

编辑注:console控制台的方法,你是不是只使用过常见的log.table.或者time,这篇文章介绍了更多console的实用方法,例如dir(显示对象内容).profile(性能分析器)等. 控制台(Console)是Firebug的第一个面板,也是最重要的面板,主要作用是显示网页加载过程中产生各类信息. 一.显示信息的命令 Firebug内置一个console对象,提供5种方法,用来显示信息. 最简单的方法是console.log(),可以用来取代alert()或document.wri

Javascript 中 console 的用法

console对象是JavaScript的原生对象,它有点像Unix系统的标准输出stdout和标准错误stderr,可以输出各种信息用来调试程序,而且还提供了很多额外的方法,供开发者调用.它的常见用途有两个. 显示网页代码运行时的错误信息. 提供了一个命令行接口,用来与网页代码互动. 浏览器实现 console对象的浏览器实现,包含在浏览器自带的开发工具之中.以Chrome浏览器的"开发者工具"(Developer Tools)为例,首先使用下面三种方法的一种打开它. 按F12或者C

使用console进行性能测试

  各大浏览器内置的开发工具,都提供了一个console对象.它主要有两个作用:显示网页代码运行时的错误信息.提供了一个命令行接口,用来与网页代码互动.下面我们就来详细研究下如何使用console进行性能测试. 对于前端开发人员,在开发过程中经常需要监控某些表达式或变量的值,如果使用用 debugger 会显得过于笨重,最常用的方法是会将值输出到控制台上方便调试. 最常用的语句就是console.log(expression)了. 从早前一道阿里实习生招聘笔试题目入手: ? 1 2 3 4 5

9个让JavaScript调试更简单的Console命令_javascript技巧

一.显示信息的命令 <!DOCTYPE html> <html> <head> <title>常用console命令</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <script type="text/javascri