关于JavaScript性能的一些总结_js 循环append 怎么提升性能-优快云博客

本文链接：https://blog.youkuaiyun.com/qianqianyixiao1/article/details/53884499

本文通过两个示例对比了使用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>