js大量数据计算性能优化

最新推荐文章于 2024-06-17 09:33:48 发布
最新推荐文章于 2024-06-17 09:33:48 发布
阅读量5.2k 收藏 26
点赞数 15
分类专栏： js语法
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36990322/article/details/118219813
版权

js大量数据计算性能优化

测试相关内容

  • 浏览器版本：Chrome 89.0+
  • ECMAScript： ES5+
  • 测试结果：多次测试随机取值
  • 数据量：100万或1000万

–备注–
由于是做大量数据计算的性能优化，基本不考虑百万级数据以下的计算。
本次测试是为了检验项目运行性能而做，并不具备严谨的实验分析性质，测试结果只能大致作为编码参考。

1. forEach和for循环

在100万条数据遍历的情况下，forEach和for的纯遍历效率大概相差810倍;如果数据量再翻十倍，他们的效率差距可以拉开到1620倍

测试代码

/**
 * forEach和for循环的效率
 */
const random = (min, max) => Math.floor(Math.random() * (max - min)) + min;   
		 
const list = Array.from(Array(1000000), (v,k) => ({num:random(0, 100)}));

console.time("forEach");
list.forEach(el=>{}) 
console.timeEnd("forEach");

console.time("for");
for(let i = 0, len = list.length; i < len; i++){}
console.timeEnd("for");

测试结果

100万条数据

forEach: 8.929931640625 ms
for: 1.205810546875 ms

1000万条数据

forEach: 73.71484375 ms
for: 4.824951171875 ms

测试结论

在大量数据遍历的情况下，请选择for循环

2. indexOf的效率问题

indexOf很常用，特别是在数据位置判断时，但是它也特别耗性能，我们该如何权衡使用它呢？

测试代码

/**
 * 统计100万个0~100的随机值各出现了多少次
 */
const random = (min, max) => Math.floor(Math.random() * (max - min)) + min;

const list = Array.from(Array(10000000), (v, k) => ({ num: random(0, 100) }));

console.time('indexOf');
let arr1 = [];
let count1 = [];
for (let i = 0, len = list.length; i < len; i++) {
  const el = list[i];
  let index = arr1.indexOf(el.num);
  if (index === -1) {
    arr1.push(el.num);
    count1.push(1);
    index = arr1.indexOf(el.num);
  }
  count1[index] = count1[index] + 1;
}
console.timeEnd('indexOf');

console.time('Map');
let arr2 = new Map();
for (let i = 0, len = list.length; i < len; i++) {
  const el = list[i];
  const num = arr2.get(el.num) ? arr2.get(el.num) : 0;
  arr2.set(el.num, num + 1);
}
console.timeEnd('Map');

console.time('object');
let arr3 = {};
for (let i = 0, len = list.length; i < len; i++) {
  const el = list[i];
  const num = arr3[el.num] ? arr3[el.num] : 0;
  arr3[el.num] = num + 1;
}
console.timeEnd('object');

测试结果

100万条数据

indexOf: 67.65283203125 ms
Map: 32.763916015625 ms
object: 6.612060546875 ms

1000万条数据

indexOf: 652.962890625 ms
Map: 291.893798828125 ms
object: 107.72802734375 ms

测试结论

indexOf 的效率是真的不太行，在大量数据计算中，我们应该减少对它的使用。Map的效率比indexOf高出不少，网上也有使用 Map 重写 Array.phototype.indexOf 的方案，感兴趣的可以自己试试。

3. 遍历时的浅拷贝

遍历时怎么进行浅拷贝？

测试代码

/**
 * 遍历时浅拷贝以及属性修改
 */
  const list = Array.from(Array(10000000), (v, k) => ({ a: 1, b: 1, c: 1 }));

  console.time('Spread');
  let arr1 = [];
  for (let i = 0, len = list.length; i < len; i++) {
    let obj = { ...list[i] };
    obj.a = 2;
    arr1.push(obj);
  }
  console.timeEnd('Spread');
    
  console.time('assign');;
  let arr2 = [];
  for (let i = 0, len = list.length; i < len; i++) {
    let obj = Object.assign({a:2}, list[i]);
    arr2.push(obj);
  }
  console.timeEnd('assign');
  
  console.time('obj');;
  let arr3 = [];
  for (let i = 0, len = list.length; i < len; i++) {
    let obj = {a: 2, b: list[i].b, c: list[i].c };
    arr3.push(obj);
  }
  console.timeEnd('obj');

测试结果

100万条数据

Spread: 98.81201171875 ms
assign: 177.4150390625 ms
obj: 54.517822265625 ms

1000万条数据

Spread: 1115.959716796875 ms
assign: 1040.654052734375 ms
obj: 546.125244140625 ms

测试结论

需要进行浅拷贝修改属性时，如果代码量不大，请选择另外创建一个新对象进行属性赋值。

4. filter和for的性能比较1

filter 非常好用，一行代码就解决了过滤。但是在大量数据需要过滤的情况下，它的效率又如何呢？

测试代码


/**
 * 研究filter和for的效率问题
 * 统计 a，b，c三个值大于50出现的次数
 */
const random = (min, max) => Math.floor(Math.random() * (max - min)) + min;   

const list = Array.from(Array(1000000), (v,k) => ({a: random(0, 1000), b: random(0, 1000), c: random(0, 1000), d: random(0, 1000), e: random(0, 1000)}));

console.time("filter");
let a = 0;
a = list.filter(el=> el.a > 50).length;
console.timeEnd("filter");
  
console.time("for");
let a1 = 0;
for(let i = 0, len = list.length; i < len; i++){
  list[i].a > 50 && (a1 = a1 + 1 );
}
console.timeEnd("for");

测试结果

100万条数据

filter: 24.39306640625 ms
for: 4.648193359375 ms

1000万条数据

filter: 215.532958984375 ms
for: 33.93994140625 ms

测试结论
for 循环虽然老旧，但正因为其老旧，所以它终究是大爷。在数据量小的情况下，建议还是使用 filter，毕竟代码简洁可维护性更佳。在大量数据的情况下，还是使用 for 吧。

5. filter和for的性能比较2

多条属性过滤时，哪种写法效率更高？

测试代码

  /**
   * 研究filter和for的效率问题
   * 统计 a，b，c三个值大于50出现的次数
   */
  const random = (min, max) => Math.floor(Math.random() * (max - min)) + min;   

  const list = Array.from(Array(1000000), (v,k) => ({a: random(0, 1000), b: random(0, 1000), c: random(0, 1000), d: random(0, 1000), e: random(0, 1000)}));

  let obj = {a: 0, b: 0, c: 0}
  
  console.time("filter");
  for(let key in obj){
    obj[key] = list.filter(el=> el[key] > 50).length;
  }
  console.timeEnd("filter");
  
  
  console.time("for in");
  for(let key in obj){
    for(let i = 0, len = list.length; i < len; i++){
      list[i][key] > 50 && (obj[key] = obj[key] + 1 )  ;
    }
  }
  console.timeEnd("for in");
  
  console.time("for");
  let a = 0;
  let b = 0;
  let c = 0;
  for(let i = 0, len = list.length; i < len; i++){
    list[i]['a'] > 50 && (a = a + 1 );
    list[i]['b'] > 50 && (b = b + 1 );
    list[i]['c'] > 50 && (c = c + 1 );
  }
  console.timeEnd("for");

测试结果

100万条数据

filter: 111.63623046875 ms
for in: 65.217041015625 ms
for: 8.674072265625 ms

1000万条数据

filter: 812.73486328125 ms
for in: 668.552978515625 ms
for: 62.194091796875 ms

测试结论
for 循环虽然老旧，但正因为其老旧，所以它终究是大爷。越是朴实无华的写法，越能节省更多的性能。

6. 数据去重问题1 (数组去重)

使用 new Set 以及 for循环去重时，相同代码，1万数据和一百万数据去重的效率一致吗？

测试代码

  /**
   * 研究数组去重的效率问题
   */
  const random = (min, max) => Math.floor(Math.random() * (max - min)) + min;   
  
  const list = Array.from(Array(1000000), (v,k) => random(0, 100000 ));
  
  console.time("Set");
  let arr = Array.from(new Set(list));
  console.timeEnd("Set");

  
  console.time("for");
  let obj = {};
  let data = [];
  for(let i = 0, len = list.length; i < len; i++){
    const item = list[i];
    if( obj[item] === undefined ){ 
        obj[item] = item;
        data.push(item);
    }
  }
  console.timeEnd("for");

测试结果

1万条数据

Set: 0.490234375 ms
for: 4.195068359375 ms

100万条数据

Set: 31.82421875 ms
for: 15.007080078125 ms

1000万条数据

Set: 283.175048828125 ms
for: 76.7900390625 ms

测试结论
在数据量较小时，new Set的效率占据绝对优势，然鹅随着数据量的增大，for 循环利用对象属性的唯一性去重方案貌似效率更稳定。其实不止是 new Set 存在这个问题，其他的 ES6+ 语法例如 Map、filter 等都存在这个问题。这不是说我们应该少用 ES6 语法，而是说我们在使用js进行大量数据计算操作时，应该考虑到它们的性能边界问题。在我们的常规项目中，其实很少会出现需要使用js进行大量的计算这种场景。

7. 数据去重问题2 (数组对象去重)

使用 reduce 以及 for循环去重时，相同代码，1万数据和一百万数据去重的效率一致吗？

测试代码

 
/**
 * 研究数组对象去重的效率问题
 * 对 数组对象属性a进行去重
 */
const random = (min, max) => Math.floor(Math.random() * (max - min)) + min;   

const list = Array.from(Array(10000), (v,k) => ({a: random(0, 10000)}));

console.time("reduce");
let obj = {};
const data = list.reduce((accumulator, current) => {
  if( obj[current.a] === undefined ){ 
      obj[current.a] = current.a;
      accumulator.push(current);
  }
  return accumulator;
}, []);
console.timeEnd("reduce");


console.time("for");
let obj1 = {};
let data1 = [];
for(let i = 0, len = list.length; i < len; i++){
  const item = list[i];
  if( obj1[item.a] === undefined ){ 
      obj1[item.a] = item.a;
      data1.push(item);
  }
}
console.timeEnd("for");

测试结果

1万条数据

reduce: 1.341064453125 ms
for: 2.615234375 ms

100万条数据

reduce: 16.10498046875 ms
for: 9.541015625 ms

1000万条数据

reduce: 132.93310546875 ms
for: 72.7529296875 ms

测试结论
结论大致和上面那一个相同，reduce 的效率也会随着数据量的增大与 for 循环的效率差距拉大。

未完待续。。。

checkMa
关注
  • 15
    点赞
  • 踩
  • 26
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
10000000条数据循环怎么优化？
发果叁
05-18 1560
最近做了直播相关的业务，然后对于大数据相关的优化做了一下复盘。 为了了解我是怎么做这个优化的，我们先从如何按照特定的条件删除一个数组说起。 1、如何删除数组中的元素 场景：有一个数组，需要删除满足条件的数组。 示例： const arr = [1,2,3,4,5,6,7,8] 删除小于5的元素,删除后的元素为 const arr2 = [5, 6, 7, 8] 代码实现： const arr = [1,2,3,4,5,6,7,8] for(let i = 0, len = arr.length;
JS 网站性能优化笔记
12-18
以下是一些针对JS网站性能优化的关键知识点： 1. **去除注释和空白区域**：为了减小文件大小，可以删除代码中的注释和不必要的空白字符。这对于压缩代码非常有用，因为这些内容对最终用户来说并不重要。例如，`x = ...
用前端JS怎么优化10000000条数据循环
we
05-19 3833
最近做了直播相关的业务，然后对于大数据相关的优化做了一下复盘。 为了了解我是怎么做这个优化的，我们先从如何按照特定的条件删除一个数组说起。 1、如何删除数组中的元素 场景：有一个数组，需要删除满足条件的数组。 示例： const arr = [1,2,3,4,5,6,7,8] 删除小于5的元素,删除后的元素为 const arr2 = [5, 6, 7, 8] 代码实现： const arr = [1,2,3,4,5,6,7,8] for(let i = 0, len = a..
JavaScript 大数运算库：JS Big Decimal
最新发布
gitblog_00027的博客
06-17 392
JavaScript 大数运算库：JS Big Decimal 项目地址:https://gitcode.com/royNiladri/js-big-decimal 在前端开发中处理大数和高精度计算时，JavaScript 的浮点数误差问题常常让我们头疼不已。JS Big Decimal 库正是为了解决这一难题而生，它引入了一个更为理智的世界，其中 0.1 + 0.2 === 0.3 而非 0.3...
js遍历技巧和方法优化
叫我官人
02-20 865
使用 Array.includes 来处理多重条件 // 条件语句 function test(fruit) {   if (fruit == 'apple' || fruit == 'strawberry') {     console.log('red');   } } 如果我们想要匹配更多的红色水果呢，比方说还有很多红色水果？我们是不是得用更多的 || 来扩展这条语句？ function ...
js大数组中求任意数组Range求和方法性能探讨
张正泉(嵌入式)
02-17 2576
探讨大数组求和方法的性能比较
【Java】二维数组
Milk~每天分享一点点，技术进步一点点
10-12 451
二维数组 1.首先我们定义一个二维数组 int arr[3] [4];//这表示定义了一个3行4列的二维数组,并且行优先 有以下几种表示二维数组元素的方法： int brr [3] [4] ={{1,2,3,4},{5,6,7,8},{9,10,11,12}}; int crr [3] [4] = {1,2,3,4,5,6,7,8,9,10,11,12}; Int err [3] [4] = {1,2,3,4,5}; 当表示某一特定元素时，例如2行1列的元素1时，可用以下两种方式来表示 frr [2] [
javascript中计算超大数据的方法
小菜希的Blog
11-29 3568
在js中，数字超过number表示范围后，会以科学计数法显示，不能完全显示，才要Number进行计算，并去掉逗号 var num1 = new Number('2222222222222222222222222222222222222222222222222222222222222222222222') var num2 = new Number('111111111111111111111111...
Vue.js 无限滚动列表性能优化方案
12-13
Vue.js 无限滚动列表性能优化方案是针对大数据量列表渲染时可能出现的滚动卡顿问题而提出的一种策略。在Web开发中，DOM操作是性能瓶颈的关键因素，因为每次DOM的修改都会触发浏览器的重排（reflow）和重绘（repaint...
js性能优化技巧
11-24
JavaScript性能优化是提升Web应用效率的关键，尤其是在处理大量数据或者用户交互时。以下是一些针对JavaScript性能优化的实用技巧： 1. **理解HTTP协议**：HTTP协议是Web应用的基础，了解其工作原理可以帮助我们更...
js 性能优化之快速响应的用户界面
12-10
1. **使定时器让出时间片段**：当处理大量数据或执行复杂计算时，可以使用定时器分片处理任务。例如，通过`setTimeout`分批处理数组，每次处理一部分数据，然后在下一次事件循环中继续，这样就不会阻塞UI。 2. **...
常用大数据量，海量数据处理方法，算法总结
06-26
常用大数据量，海量数据处理方法，算法总结，非常好的书。
JS对大量数据进行多重过滤的方法
10-21
在JavaScript中，处理大量数据并进行多重过滤是一个常见的挑战，特别是在前端应用中，当通过Ajax从后端获取数据后，需要根据用户设定的条件进行筛选。本文将介绍一种解决此类问题的方法，涉及到的关键知识点包括数据...
JavaScript 数组高性能去重 千万级数据去重效率测试 高效去重详解
rudy_zhou的博客
01-14 2943
JavaScript 数组高性能去重 千万级数据去重效率测试 高效去重详解引言测试前提测试准备测试效率1.双重for循环 + splice2.for 循环加 indexOf / includes3.filter 加 indexOf4.使用sort排序后去重5.sort 加 reduce6.利用对象key唯一(hasOwnProperty)7.使用Map数据结构8.使用Set总结推荐循环效率排行结语...
JS如何优雅的处理大批量数据？
ChaITSimpleLove的博客
11-02 5677
本文主要是针对JavaScript（以下简称JS）处理大批量数据时，产生性能问题的简要分析，以及如何优雅的演化提升性能的解决方案； 场景：假设有10W条数据量，需要相应业务处理并绑定渲染在html页面，如何一步一步的分析并优化 JS 的性能，提升数据处理速度； 假设我们需要处理的需求如下，从0到10W条数据通过ul>li的方式显示在html页面上： <!DOCTYPE html...
JS性能的一些优化的小技巧
xiaoweids的博客
06-10 235
下面是一些关于客户端JS性能的一些优化的小技巧：1.关于JS的循环，循环是一种常用的流程控制。JS提供了三种循环：for(;;)、while()、for(in)。在这三种循环中for(in)的效率最差，因为它需要查询Hash键，因此应尽量少用for(in)循环，for(;;)、while()循环的性能基本持平。当然，推荐使用for循环，如果循环变量递增或递减，不要单独对循环变量赋值，而应该使用嵌套的++或－－运算符。2.如果需要遍历数组，应该先缓存数组长度，将数组长度放入局部变量中，避免多次查询数组长度。3
javascript大量推送数据如何快速处理？
u011277123的博客
09-25 3353
后端实现了websocket主动推送，现在想在网页上显示推送的数据，但是由于推送的数据量特别庞大，自己的处理比较缓慢，不但造成了数据推送的延迟，页面也特别卡顿，进行点击button等组件的操作也特别卡顿。我在websocket的on_message下是这样处理的： js是单线程执行的，虽然数据传输是单独的线程，但传输后的数据要占用js执行线程去解析，如果解析过
性能优化：foreach循环
成长ing中的w的专栏
12-09 1166
由于使用foreach循环最终会在调用期间产生不必要的堆内存分配。可以使用但不推荐使用 using System.Collections; using System.Collections.Generic; using UnityEngine; /* * Author:W * 循环遍历 */ public class ForeachTest : MonoBehaviour { // Use this for initialization void Start () { //会在堆上分配一个
关于大量数据计算的性能优化
瑾年博客
08-02 2053
大量数据的解析
提升 JavaScript 性能：浏览器执行与优化策略
书中提到，JavaScript 的执行速度直接影响到用户体验，尤其是在处理大量数据或复杂逻辑时。为此，开发者需要了解如何编写高效的代码，避免阻塞浏览器。例如，可以通过异步处理、事件循环和回调函数来减少主线程的...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值