JavaScript 中处理 100 万数据时确保性能和流畅度的几种方法

合集 - 前端小知识点(35)
1.使用同一个链接，如何实现PC打开是web 应用、手机打开是一个H5应用2.如何保证用户的使用体验3.如何解决页面请求接口大规模并发问题4.设计一套全站请求耗时统计工具5.大文件上传6.h5如何解决移动端适配问题7.实现站点一键换肤功能实现方式有哪些8.如何实现网页加载进度条9.常见图片懒加载方式有哪些10.cookie构成部分有哪些11.DNS协议了解多少12.函数式编程了解多少13.一直在window上面挂东西是否有什么风险14.小程序为什么会有两个线程15.如何通过设置失效时间清除本地存储的数据?16.如果不使用脚手架，如果用webpack构建一个自己的react应用17.用 nodejs 实现一个命令行工具，统计输入目录下面指定代码的行数18.package.json 里面 sideEffects 属性的作用19.script 标签上有那些属性20.SPA 中使用 hash 路由时作用和意义21.用户访问页面白屏了，原因是啥如何排查?22.[代码实现]S 中如何实现大对象深度对比
23.JavaScript 中处理 100 万数据时确保性能和流畅度的几种方法
24.<script> 标签放在 HTML 文档的 <body> 内底部25.虚拟滚动加加载的原理和实现思路26.ts二刷27.promise面试题28.命令行创建 uni-app 项目29.uniapp+v3的小知识点30.ts文件忽略校验31.['',''].join(" ").trim()32.自定义导航栏交互(导航栏左上角按钮+滚动动画效果)33.可视化点击x轴标签实现标签文字切换34.运行vue -V的时候vue : 无法加载文件 C:\Users\jiaho\AppData\Roaming\npm\vue.ps1，因为在此系统上禁止运行脚本35.uniapp+vue2实现下载相关
收起

以下是在 JavaScript 中处理 100 万数据时确保性能和流畅度的几种方法：

1. 使用 Web Workers

  • 思路：
    • 将数据处理任务转移到 Web Workers，它可以在后台线程中执行代码，避免阻塞主线程，从而保证页面的流畅性。
  • 代码示例：
    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Web Workers Example</title>
</head>
<body>
  <script>
    const worker = new Worker('worker.js');
    const data = Array.from({ length: 1000000 }, (_, i) => i);
    worker.postMessage(data);
    worker.onmessage = function(event) {
      console.log(event.data);
    };
  </script>
</body>
</html>
    在 worker.js 文件中：
    onmessage = function(event) {
  const data = event.data;
  // 处理数据，例如计算每个元素的平方
  const result = data.map(item => item * item);
  postMessage(result);
};
  • 解释：
    • 在主线程中创建 Web Workers，将数据发送给它。
    • worker.js 文件会在后台线程中接收数据并进行处理，处理完成后将结果发送回主线程。
    • 这种方式可以避免长时间的计算阻塞主线程，保证页面交互的流畅性。

2. 分块处理

  • 思路：
    • 将大数据集分成多个较小的块，然后分批处理，使用 setTimeout 或 setInterval 来调度处理过程，避免长时间阻塞主线程。
  • 代码示例：
    function processDataInChunks(data, chunkSize, processFn, callback) {
  let index = 0;
  function processChunk() {
    const endIndex = Math.min(index + chunkSize, data.length);
    const chunk = data.slice(index, endIndex);
    processFn(chunk);
    index = endIndex;
    if (index < data.length) {
      setTimeout(processChunk, 0);
    } else {
      callback();
    }
  }
  processChunk();
}

const data = Array.from({ length: 1000000 }, (_, i) => i);
processDataInChunks(data, 1000, (chunk) => {
  // 处理数据，例如计算每个元素的平方
  const result = chunk.map(item => item * item);
  console.log(result);
}, () => {
  console.log('数据处理完成');
});
  • 解释：
    • processDataInChunks 函数将数据分成大小为 chunkSize 的块。
    • 每次处理完一个块后，使用 setTimeout 调度下一个块的处理，将控制权交还给主线程，避免长时间阻塞。

3. 使用异步函数和 Promise

  • 思路：
    • 结合异步函数和 Promise，将数据处理任务分解为多个异步操作，利用事件循环的特性，避免阻塞主线程。
  • 代码示例：
    async function processDataAsync(data) {
  const chunkSize = 1000;
  const promises = [];
  for (let i = 0; i < data.length; i += chunkSize) {
    const chunk = data.slice(i, i + chunkSize);
    promises.push(processChunk(chunk));
  }
  await Promise.all(promises);
  console.log('数据处理完成');
}

async function processChunk(chunk) {
  return new Promise((resolve) => {
    // 处理数据，例如计算每个元素的平方
    const result = chunk.map(item => item * item);
    console.log(result);
    resolve();
  });
}

const data = Array.from({ length: 1000000 }, (_, i) => i);
processDataAsync(data);
  • 解释：
    • processDataAsync 函数将数据分成多个块，并为每个块创建一个 Promise。
    • 使用 Promise.all 等待所有块的处理完成，在处理每个块时使用异步函数，避免阻塞主线程。

4. 使用性能优化的库

  • 思路：
    • 利用一些专门为大数据处理优化的库，如 lodash 的 _.chunk 方法来分块处理，或 RxJS 进行数据流处理。
  • 代码示例（使用 Lodash）：
    const _ = require('lodash');
const data = Array.from({ length: 1000000 }, (_, i) => i);
const chunks = _.chunk(data, 1000);
chunks.forEach(chunk => {
  // 处理数据，例如计算每个元素的平方
  const result = chunk.map(item => item * item);
  console.log(result);
});
  • 解释：
    • 使用 lodash 的 _.chunk 方法将数据分成多个块。
    • 对每个块进行单独处理，避免一次处理大量数据导致的性能问题。

5. 优化算法和数据结构

  • 思路：
    • 对于数据处理的算法和使用的数据结构进行优化，减少不必要的计算和操作。
  • 示例：
    const data = Array.from({ length: 1000000 }, (_, i) => i);
const result = [];
for (let i = 0; i < data.length; i++) {
  // 更高效的计算，例如计算平方
  result.push((i * i));
}
console.log(result);
  • 解释：
    • 避免使用高复杂度的算法，如嵌套循环、递归等，尽量使用简单高效的算法。
    • 选择合适的数据结构，例如使用 Set 而不是 Array 来存储唯一值。

总结

  • 使用 Web Workers 可以将数据处理任务放到后台线程，不影响主线程的运行。
  • 分块处理和使用异步函数可以将长时间的处理任务分解，避免阻塞主线程。
  • 利用性能优化的库可以简化处理过程，提高性能。
  • 优化算法和数据结构可以从根本上提高数据处理的效率。

根据具体的需求和场景，可以选择一种或多种方法来确保在处理 100 万数据时不会阻塞页面，保证页面的流畅性和性能。同时，在实际应用中，需要根据数据处理的具体类型和计算复杂度进行适当的调整和优化。

posted @   jialiangzai  阅读(159)  评论(0)  编辑  收藏  举报
相关博文：
· 如何解决页面请求接口大规模并发问题
· 设计一套全站请求耗时统计工具
· js循环的数据量很大（例如100W+）时会出现什么情况？如何进行性能优化？
· 7.如何在保证页面运行流畅的情况下处理海量数据
· 前端快速处理几十万条数据的方式？
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 单线程的Redis速度为什么快？
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 展开说说关于C#中ORM框架的用法！

喜欢请打赏

扫描二维码打赏

微信打赏

了解更多

点击右上角即可分享
微信分享提示