我一直关注头条上面的关于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>
从我们验证的结果来看,三种写法是没有很明显的区别的,有人说,是不是数据量太小了,看不出来,我也是这么想的,所以我决定用一个数据量大一点的,刚好看一下我的笔记本的计算性能怎么样,所以我复制了一个三十万行数据的数组,这次我们不尽兴页面的渲染了,因为三十万页面渲染的话估计要十几秒了,我们直接将数组里面的元素进行一个简单的运算,然后减肥果每一次计算的开始时间和结束时间都打印出来,然后我们计算十次求他的平均值,看看用时基本是多少,有没有说很明显的区别。
<!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还是很快的。希望这个验证的结果是相对可靠一点的。
通过上面的测试我们基本上可以知道了,其实不管什么写法对性能的影响其实不是很大的,具体的测试过程,我录制了一个视频,感兴趣的可以去看看。测试视频