专栏首页农历七月廿一多方位测试一下for循环不同写法的性能差别

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

写在前面

我一直关注头条上面的关于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还是很快的。希望这个验证的结果是相对可靠一点的。

结论

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

  • 废话几句,就是网上教学的很多,但是不是每一个都是对的,我们学习的时候如果发现了和自己平常遇到的不一样的,自己验证一下是最好的。谢谢阅读!
  • 中国加油 武汉加油 ??

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JavaScript中遍历数组的一些方法总结

    Js里面数组是很重要的一块内容,其实就是我们做项目的时候也是很重要的一种数据格式,大部分的数据都不会是一个个或者两个,那么数据多的时候一般是以数组的形式的存放的...

    何处锦绣不灰堆
  • 说一下Java中抽象类和接口存在的意义与价值

    定义是很简单的,我们这里不写官方的语言,我自己看着都烦,我们就用白话介绍,抽象类本质是一个类,没问题,那么类里面一般都是有方法的,方法包括方法名和方法体,这是常...

    何处锦绣不灰堆
  • 教你怎么用ajax传数组(也可以是转为json)

    我之前写过一个关于ajax的详解,那个是标准的ajax,今天介绍的是怎么用ajax传递数组这样的数据类型呢?很多的时候我们需要给后端的数据不是几个单独的数据,一...

    何处锦绣不灰堆
  • 0-1背包问题

  • 7个提升Python程序性能的好习惯

    使用局部变量替换模块名字空间中的变量,例如 ls = os.linesep。一方面可以提高程序性能,局部变量查找速度更快;另一方面可用简短标识符替代冗长的模块变...

    Python中文社区
  • 7 个习惯帮你提升Python运行性能

    使用局部变量替换模块名字空间中的变量,例如 ls = os.linesep。一方面可以提高程序性能,局部变量查找速度更快;另一方面可用简短标识符替代冗长的模块变...

    刀刀老高
  • 提升Python程序性能的7个习惯

    使用局部变量替换模块名字空间中的变量,例如 ls = os.linesep。一方面可以提高程序性能,局部变量查找速度更快;另一方面可用简短标识符替代冗长的模块变...

    小小科
  • 动态规划算法练习 (3)

    一个有名的按摩师会收到源源不断的预约请求,每个预约都可以选择接或不接。在每次预约服务之间要有休息时间,因此她不能接受相邻的预约。给定一个预约请求序列,替按摩师找...

    生信编程日常
  • 应用:深度学习下的电商商品推荐1.常见算法套路2.item2vec的工程引入3.python代码实现

    电商行业中,对于用户的商品推荐一直是一个非常热门而且重要的话题,有很多比较成熟的方法,但是也各有利弊,大致如下:

    sladesal
  • HLS Lesson15-for循环优化:其他方法

    例1: void for_merge(data_t a[N],data_t b[N],data_t c[N],data_t d[N]) { data_t x_a...

    瓜大三哥

扫码关注云+社区

领取腾讯云代金券