关于JavaScript性能的一些总结

本文通过两个示例对比了使用for循环与定时器向DOM追加内容的效果及性能表现。前者会在循环结束后一次性更新DOM,而后者逐条更新,对于大量数据处理更流畅。

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

一:用定时器代替for循环


for循环append()内容到dom中,是要等循环结束后才会在dom 中显示出来,如果改用定时器,就会一条一条的显示在页面中。
而且循环次数多的时候,for循环相对于定时器的做法卡。

for
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<script src="https://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
for(var index= 0 ; index <100 ; index++ ){
	$("body").append(index)
}
});
</script>
</head>
<body>
<p>如果你点我,我就会消失。</p>
<p>继续点我!</p>
<p>接着点我!</p>
</body>
</html>





定时器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title> 
<script src="https://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
				var index = 0;
				var times = window.setInterval(function(){
				$("body").append(index);
					index++;
					if(index==1000){
						clearInterval(times);
					}
				}, 0);
});
</script>
</head>
<body>
</body>
</html>







评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值