首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >多方位测试一下for循环不同写法的性能差别

多方位测试一下for循环不同写法的性能差别

作者头像
何处锦绣不灰堆
发布2020-05-29 10:59:30
5270
发布2020-05-29 10:59:30
举报
文章被收录于专栏:农历七月廿一农历七月廿一
写在前面

我一直关注头条上面的关于js的一些文章,昨天晚上睡觉之前呢,看到一个视频,里面内容是这样的,for循环怎么写可以将性能提升一半以上,我很好奇,因为我们都知道,js作为一种动态语言,他是非常强大的,但是在我们使用的过程中呢很多的操作其实是非常影响页面性能的,其中比较明显的就是for循环的操作,他的视频大概是这样说的,首先他将三种for循环写了出来,同时进行渲染页面上面的元素,将60个span全部改为别的颜色,看用时分别是多久,结果是他写的第三种也就是他所谓的那种性能比较好的写法时间很短,我当时有点激动说实话,不是说这个技术有多牛,只是我一直觉得其实区别是不大的,奈何当时已经凌晨一点了,我也不想爬起来写代码验证了,有用白天我要写公司的代码,所以只能这个时候给大家看了,首先还原一下他的写法,他是改变span的样式,我们这里直接将数组里面的数据写到页面上,本质上是一样的。

看代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/test_for.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
	</body>
	<script>
		window.onload = function() {
			console.time('first');
			for (let i = 0; i < for_source_data.length; i++) {
				document.write(for_source_data[i].nummber + 1)
				if (i % 100 === 0) {
					document.write("<br/>")
				}
			};
			console.timeEnd('first');
			document.write("<br/>")

			console.time('second');
			for (let i = 0, len = for_source_data.length; i < len; i++) {
				document.write(for_source_data[i].nummber +1)
				if (i % 100 === 0) {
					document.write("<br/>")
				}
			};
			console.timeEnd('second');
			document.write("<br/>")
			document.write("<br/>")
			console.time('three');
			for (let i = 0, len; len = for_source_data[i++];) {
				document.write(len.nummber + 1)
				if (i % 100 === 0) {
					document.write("<br/>")
				}
			};
			console.timeEnd('three');
			document.write("<br/>")
			
			console.time('fore');
			for_source_data.map((resp, index) => {
				document.write(resp.nummber + 1)
				if (index % 100 === 0) {
					document.write("<br/>")
				}
			})
			console.timeEnd('fore');
		}
	</script>
</html>
  • 这里我引入来一个外部js,里面没有别的内容,只有一段json数据,但是数据量和他的一样,我们做600个元素在里面,看一下效果:
在这里插入图片描述
在这里插入图片描述

从我们验证的结果来看,三种写法是没有很明显的区别的,有人说,是不是数据量太小了,看不出来,我也是这么想的,所以我决定用一个数据量大一点的,刚好看一下我的笔记本的计算性能怎么样,所以我复制了一个三十万行数据的数组,这次我们不尽兴页面的渲染了,因为三十万页面渲染的话估计要十几秒了,我们直接将数组里面的元素进行一个简单的运算,然后减肥果每一次计算的开始时间和结束时间都打印出来,然后我们计算十次求他的平均值,看看用时基本是多少,有没有说很明显的区别。

  • 前方高能!!!
在这里插入图片描述
在这里插入图片描述
  • 这里可以看到我无聊的复制出来了三十万行的数据,这里看一下测试代码及结果:
<!DOCTYPE html>
<!-- author : clearlove -->
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/json_for.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
	</body>
	<script>
		/**
		 * @func : first 测试常规写法for循环
		 */
		function first() {
			console.time('first');
			let count_first = 0;
			for (var i = 0; i < for_source_data.length; i++) {
				count_first = count_first + for_source_data[i].nummber
			};
			document.write("first计算结束:" + count_first)
			document.write("<br/>")
			console.timeEnd('first');
		}

		function second() {
			console.time('second');
			let count_second = 0;
			for (var i = 0, len = for_source_data.length; i < len; i++) {
				count_second = count_second + for_source_data[i].nummber
			};
			document.write("second计算结束:" + count_second)
			document.write("<br/>")
			console.timeEnd('second');
		}

		function three() {
			console.time('three');
			let count_three = 0;
			for (var i = 0, len; len = for_source_data[i++];) {
				count_three = count_three + len.nummber
			};
			document.write("three计算结束:" + count_three)
			document.write("<br/>")
			console.timeEnd('three');
		}

		function fore() {
			console.time('fore');
			let count_fore = 0;
			for_source_data.map((resp, index) => {
				count_fore = count_fore + resp.nummber
			})
			document.write("fore计算结束:" + count_fore)
			document.write("<br/>")
			console.timeEnd('fore');
		}
		var analysis_data = [];
		/**
		 * @param {Object} func computed_time 计算两次的间隔时间
		 */
		function computed_time(func) {
			var start = new Date().getTime();
			document.write("开始时间:"+start)
			document.write("<br/>")
			func();
			var end = new Date().getTime();
			document.write("结束时间:"+end)
			document.write("<br/>")
			analysis_data.push(end - start)
			document.write("用时:" + (end - start))
			document.write("<br/><br/>")
			return (end - start) + "ms";
		}
		let stop = 0;
		let analysis_data_count = 0;
		/**
		 * 一秒进行处理一次该函数,最终求平均值得出相对可靠的结论
		 */
		let interval = setInterval(function() {
			stop += 1;
			computed_time(fore)
			if(stop === 10){
				clearInterval(interval)
				for(let item of analysis_data){
					analysis_data_count = analysis_data_count + item;
				}
				document.write("平均计算时间:" + analysis_data_count/(analysis_data.length)  + "ms")
			}
		}, 1000)
	</script>
</html>

测试结果:

  • 第一种写法:
在这里插入图片描述
在这里插入图片描述
  • 第二种写法:
在这里插入图片描述
在这里插入图片描述
  • 第三种写法:
在这里插入图片描述
在这里插入图片描述
  • 第四种写法:
在这里插入图片描述
在这里插入图片描述

不知道你们看到测试结果是什么心情,反正我是很平静,和我想的是一样的,不同的写法可能会产生不同的性能问题,但是没有那么大的差别,只不过map的方式是最慢的,这个是很明显的。但是不是说map不好用,在处理键值对数据的时候,map还是很快的。希望这个验证的结果是相对可靠一点的。

结论

通过上面的测试我们基本上可以知道了,其实不管什么写法对性能的影响其实不是很大的,具体的测试过程,我录制了一个视频,感兴趣的可以去看看。测试视频

  • 废话几句,就是网上教学的很多,但是不是每一个都是对的,我们学习的时候如果发现了和自己平常遇到的不一样的,自己验证一下是最好的。谢谢阅读!
  • 中国加油 武汉加油 ??
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2020-02-12 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 写在前面
  • 看代码
  • 结论
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档