JavaScript笔记之 console计时器 time() timeLog() timeEnd()

最新推荐文章于 2025-01-01 17:48:02 发布

kfepiza

最新推荐文章于 2025-01-01 17:48:02 发布

阅读量2.3k

点赞数 1

本文链接：https://blog.csdn.net/kfepiza/article/details/117375527

版权

HTML CSS JS 同时被 2 个专栏收录

85 篇文章

订阅专栏

Js JavaScript ECMAScript

49 篇文章

订阅专栏

这篇博客探讨了JavaScript中使用`console.time`、`console.timeLog`和`console.timeEnd`进行性能测试的方法，并通过不同循环场景的代码示例展示了它们的用法。文章还比较了`let`和`var`声明变量的速度差异，揭示了在循环中的性能表现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

用法

先取个名字 : let name = “计时器1”; 然后

console.time(name); 计时器起点
可选 console.timeLog(name); 显示当前耗时
console.timeEnd(name); 显示当前耗时,并结束计时器

测试代码

<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"/><title>time timeLog timeEnd</title>
<style id="FirstStyleTag">

.CodeIB,.CodeB{padding:0px 10px; border-left:10px solid blue; background-color:black; color:gold; font-family:Consolas; white-space:pre;}
.CodeB{display:block} .CodeIB{display:inline-block;}

</style><script>function dgebi(x){if(x && x.constructor===String)x=document.getElementById(x); return x;} ; function dcept(p,tn){var e=document.createElement(tn); p=dgebi(p).appendChild(e); return e;} ; const FirstStyleTag=dgebi("FirstStyleTag");

const 一百万=1000000 , 一千万=一百万*10;

</script></head><body style="margin:0; font-size:16px; "><header id="BodyHeader"><h1>time timeLog timeEnd 的使用</h1></header><div id="BodyBody">
<h3>使用方法: 1.给计时器取个名字. 2.console.time(计时器名字). 3.可选console.timeLog(计时器名字). 4.console.timeEnd(计时器名字).</h3>
<h4>发现: 1.let比var的创建速度快 </h4>

<fieldset class="Example" ><legend></legend><h3>timeLog显示当前耗时,但不结束, timeEnd显示当前耗时,并结束</h3><script>
var name="计时器1";
console.time(name);
var str="";
for(let n=0;n<一百万;++n){
	str+="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa";
	str=str.substring(0,10);
}
console.timeLog(name);
console.timeEnd(name);
</script><code class="CodeIB"></code></fieldset>


<fieldset class="Example" ><legend></legend><h3>timeLog可以不用</h3><script>
var name="计时器2";
console.time(name);
var str="";
for(let n=0;n<一百万;++n){
	str+="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa";
	str=str.substring(0,10);
}
console.timeEnd(name);
</script><code class="CodeIB"></code></fieldset>

<fieldset class="Example" ><legend></legend><h3>timeLog可以不用</h3><script>
var name="计时器3";
console.time(name);
var str="";
for(let n=0;n<一百万;++n){
	var x=Math.random();
}
console.timeEnd(name);
</script><code class="CodeIB"></code></fieldset>

<fieldset class="Example" ><legend></legend><h3>什么也做,光循环</h3><script>
var name="什么也做,循环";
console.time(name);
var str="";
for(let n=0;n<一百万;++n){}
console.timeEnd(name);
</script><code class="CodeIB"></code></fieldset>

<fieldset class="Example" ><legend></legend><h3>var的速度</h3><script>
var name="var的速度";
console.time(name);
var str="";
for(let n=0;n<一百万;++n){var h=3 , i=new String() , j="j" , k=[] , l={} , m=/m/ , a=document.createElement("a");}
console.timeEnd(name);
</script><code class="CodeIB"></code></fieldset>

<fieldset class="Example" ><legend></legend><h3>let的速度</h3><script>
var name="let的速度";
console.time(name);
var str="";
for(let n=0;n<一百万;++n){let h=3 , i=new String() , j="j" , k=[] , l={} , m=/m/ , a=document.createElement("a");}
console.timeEnd(name);
</script><code class="CodeIB"></code></fieldset>


</div><footer id="BodyFooter"></footer><style id="LastStyleTag"></style><script>const BodyHeader=dgebi("BodyHeader") ,    BodyBody=dgebi("BodyBody") ,    BodyFooter=dgebi("BodyFooter") ,   LastStyleTag=dgebi("LastStyleTag") , LastStyleSheet=LastStyleTag.sheet;

var name="计时器1";
console.time(name);
var str="";
for(let n=0;n<10000000;++n){
	str+="a";
	//str=str.substring(0,10);
}
console.timeLog(name);
console.timeEnd(name);

	
function f010(){
	var testCount=0;
	for(let f of document.querySelectorAll(".Example")){
		f.children[0].innerHTML="Example "+(++testCount);
		let script=f.querySelector("script"); let exec=script.innerHTML; let code=f.querySelector("code");
		code.innerHTML=exec; eval(exec);
		setTimeout(()=>{eval(exec);},1);
	}
}
f010();
function f020(){
	console.time('eval在方法内');
	for(let n=0; n<100000;++n)eval("let s=''; s+='a'; let s1=s+'b'; let s2=s1+'c';");
	console.timeEnd('eval在方法内');
}
f020();
console.time('eval在方法外');
var exec020="let s=''; s+='a'; let s1=s+'b'; let s2=s1+'c';"
for(let n=0; n<100000;++n)eval(exec020);
console.timeEnd('eval在方法外');

</script></body></html>