前端快速处理几十万条数据的方式？

发表于

在前端处理大量数据时，可以采用以下几种方式来提高处理速度和性能：

  • 数据分页：将数据分成多个页面，并按需加载。只加载当前页面的数据，而不是一次性加载全部数据。这可以减少初始加载时间和内存占用，并提高用户体验。
  • 虚拟滚动：对于需要展示大量列表或表格数据的情况，可以使用虚拟滚动技术。虚拟滚动只渲染可见区域的数据，而不是全部数据，从而减少渲染时间和内存占用。
  • 数据分片：将大数据集分成多个小块来处理，可以使用分片算法将数据分成多个批次处理。这样可以避免一次性处理大量数据导致页面卡顿或崩溃。
  • 懒加载：对于需要加载大量图片或其他资源的情况，可以采用懒加载技术。只有当用户滚动到可见范围时，再加载相应的资源，而不是一次性加载全部资源。
  • 数据筛选和缓存：在前端对大量数据进行筛选和排序时，可以考虑在后端进行数据处理，并将结果缓存到前端，减少前端每次操作的数据量。
  • Web Workers：使用Web Workers可以将耗时的数据处理任务放到后台线程中进行，以避免阻塞主线程，提高页面的响应性能。
  • 使用索引和缓存：对于需要频繁搜索、过滤或排序的数据，可以使用索引和缓存来优化查询性能。通过构建合适的索引和使用内存缓存，可以加快数据的查找和访问速度。
  • 使用优化的算法和数据结构：选择合适的算法和数据结构来处理数据，可以提高处理效率。例如，使用哈希表、二叉搜索树等数据结构来加快数据的查找和操作速度。
  • 压缩和合并数据：在网络传输中，可以使用压缩和合并数据的方式来减少数据的大小和网络请求的次数，从而提高数据的传输速度和性能。
  • 前端性能优化：除了以上几种方式，还可以结合其他前端性能优化技术，如减少DOM操作、使用缓存和CDN、优化网络请求等，来提高整体的应用性能和用户体验。

如果想进一步优化，还可以考虑以下几种方式来提高前端的处理性能：

  1. 使用 WebAssembly：WebAssembly（简称Wasm）是一种可在浏览器中运行高性能的低级字节码的技术。通过使用WebAssembly，可以将复杂的数据处理逻辑移至前端，以提高数据处理的速度和效率。
  2. 使用索引数据库：对于需要频繁查询、过滤和排序的大量数据，可以使用索引数据库来加速数据处理。索引数据库可以在前端创建索引并进行高效的查询操作，从而提高数据处理的速度。
  3. 使用 Web Workers 池：Web Workers 允许在后台线程中进行并行计算，以避免阻塞主线程。使用 Web Workers 池可以同时处理多个任务，从而提高数据处理的并发性和效率。
  4. 数据预处理：如果数据的处理逻辑比较复杂，可以在数据传输到前端之前进行预处理。例如，可以在后端进行数据聚合、过滤、排序等操作，然后将处理后的数据传输到前端，减少前端的计算量。
  5. 使用数据可视化库：对于需要将大量数据可视化展示的情况，可以使用专门的数据可视化库，如D3.js、ECharts等。这些库提供了高度优化的数据渲染和交互方式，可以快速处理和展示大量数据。
  6. 数据压缩和缓存：对于需要频繁传输的大量数据，可以使用数据压缩和缓存技术来减少数据传输的大小和次数。可以使用压缩算法（如gzip）对数据进行压缩，同时使用浏览器缓存和服务器缓存来缓存已获取的数据。
  7. 使用流式处理：当需要连续处理大量数据时，可以采用流式处理的方式，逐个处理数据，而不是一次性加载全部数据。这样可以减少内存占用，并提高处理速度。
  8. 数据分析和优化：通过对数据处理过程进行分析，可以找到瓶颈和性能瓶颈，并进行优化。可以使用性能分析工具来检测和识别慢速代码和内存泄漏等问题，并进行相应的优化。

实践举例

处理大量数据的前端方案通常包括分页、虚拟滚动和数据分片等技术。下面是一个简单的示例，使用Vue.js框架和虚拟滚动技术（利用组件库中的vue-virtual-scroller）来处理大量数据的情况。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
html复制代码<template>
  <div>
    <vue-virtual-scroller class="data-container" :items="visibleData" :item-height="50">
      <div slot="item" slot-scope="{ item }" class="data-item">
        {{ item }}
      </div>
    </vue-virtual-scroller>
  </div>
</template>

<script>
import VueVirtualScroller from 'vue-virtual-scroller';
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css';

export default {
  components: {
    VueVirtualScroller
  },
  data() {
    return {
      allData: [], // 所有数据
      visibleData: [] // 可见数据
    };
  },
  mounted() {
    // 模拟加载大量数据
    this.loadLargeData();
  },
  methods: {
    loadLargeData() {
      // 模拟异步请求数据
      setTimeout(() => {
        // 假设从后端获取了大量数据
        const data = []; // 从后端获取的数据

        // 将数据存储到allData中
        this.allData = data;

        // 初始化可见数据
        this.updateVisibleData();
      }, 1000);
    },
    updateVisibleData() {
      // 根据滚动位置更新可见数据
      const startIndex = this.$refs.scroller.firstVisibleIndex;
      const endIndex = this.$refs.scroller.lastVisibleIndex;
      this.visibleData = this.allData.slice(startIndex, endIndex + 1);
    }
  }
};
</script>

<style scoped>
.data-container {
  height: 400px; /* 容器高度 */
  overflow-y: auto; /* 垂直滚动条 */
}

.data-item {
  height: 50px; /* 单个数据项高度 */
  line-height: 50px; /* 垂直居中文本 */
  border-bottom: 1px solid #ccc; /* 分割线 */
}
</style>

在这个示例中，我们使用了vue-virtual-scroller组件来实现虚拟滚动，它会根据滚动位置动态渲染可见的数据项，而不是一次性渲染所有数据。这样可以大大减少渲染开销，提高页面性能。同时，通过异步加载数据，可以在后台加载大量数据，而不会阻塞页面渲染。

Web Workers 是在浏览器中运行在后台的 JavaScript 程序，可以在不影响主线程的情况下执行计算密集型任务或长时间运行的任务。下面是一个简单的示例，演示如何使用 Web Workers 在后台进行计算，并在主线程中处理结果。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
html复制代码<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Web Worker Example</title>
</head>
<body>
  <h1>Web Worker Example</h1>
  <p>计算结果: <span id="result"></span></p>
  <button onclick="startWorker()">开始计算</button>

  <script>
    let worker;

    function startWorker() {
      if (typeof(Worker) !== "undefined") {
        if (typeof(worker) == "undefined") {
          worker = new Worker("worker.js");
        }
        worker.onmessage = function(event) {
          document.getElementById("result").innerHTML = event.data;
        };
      } else {
        document.getElementById("result").innerHTML = "抱歉，您的浏览器不支持 Web Workers。";
      }
    }

    function stopWorker() {
      worker.terminate();
      worker = undefined;
    }
  </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
javascript复制代码// worker.js
self.onmessage = function(event) {
  // 接收主线程传递的数据
  const num = event.data;

  // 执行计算任务
  const result = calculateFibonacci(num);

  // 将结果发送回主线程
  self.postMessage(result);
};

function calculateFibonacci(num) {
  if (num <= 1) return num;
  return calculateFibonacci(num - 1) + calculateFibonacci(num - 2);
}

在这个示例中，index.html 是主页面，包含一个按钮用于开始计算，当点击按钮时，会调用 startWorker() 函数。如果浏览器支持 Web Workers，则创建一个新的 Worker，并指定要运行的 JavaScript 文件为 worker.js。在 worker.js 中，我们定义了一个函数来执行计算任务（这里使用了斐波那契数列作为示例），并将结果发送回主线程。主线程在接收到结果后更新页面上的元素显示计算结果。

这样做的好处是，计算任务在后台线程中执行，不会阻塞页面渲染或用户交互，提高了页面的响应性。

除了使用虚拟滚动和 Web Workers 外，前端还有其他一些处理海量数据的性能优化方式。其中之一是数据分片，即将数据分成多个小块进行处理，以减少一次性处理大量数据所带来的性能压力。下面是一个示例，演示如何使用数据分片来处理大量数据：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
html复制代码<template>
  <div>
    <button @click="processData">处理数据</button>
    <ul>
      <li v-for="item in processedData" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rawData: [], // 原始数据
      processedData: [] // 处理后的数据
    };
  },
  methods: {
    async processData() {
      // 假设这里是从后端获取大量数据的代码，这里用 setTimeout 模拟异步请求
      await new Promise(resolve => setTimeout(resolve, 1000));
      
      // 模拟从后端获取的大量数据
      const data = generateLargeData(); // 生成大量数据的函数

      // 将数据分成多个分片进行处理
      const chunkSize = 10000; // 每个分片的大小
      for (let i = 0; i < data.length; i += chunkSize) {
        const chunk = data.slice(i, i + chunkSize);
        const processedChunk = this.processChunk(chunk); // 处理分片数据的函数
        this.processedData = this.processedData.concat(processedChunk);
      }
    },
    processChunk(chunk) {
      // 对数据分片进行处理的逻辑，这里简单地将每个对象的 name 属性转换为大写
      return chunk.map(item => {
        return { id: item.id, name: item.name.toUpperCase() };
      });
    }
  }
};

// 模拟从后端获取的大量数据的函数
function generateLargeData() {
  const data = [];
  for (let i = 0; i < 100000; i++) {
    data.push({ id: i, name: `Item ${i}` });
  }
  return data;
}
</script>

在这个示例中，我们假设从后端获取了大量数据，然后将数据分成多个分片，每个分片包含一定数量的数据。然后，我们使用一个循环逐个处理每个分片，并将处理后的结果添加到 processedData 数组中。这样做可以避免一次性处理大量数据所带来的性能问题，提高页面的响应速度。

下面是一个简单的示例，演示了如何利用索引和键值对数据结构来优化数据检索：

1
2
3
4
5
6
7
8
9
10
javascript复制代码// 将原始数据转换为以id为键的对象
const indexedData = {};
rawData.forEach(item => {
  indexedData[item.id] = item;
});

// 根据id检索数据
const itemId = 123;
const item = indexedData[itemId];
console.log(item); // 输出具有id为123的数据项

在这个示例中，我们将原始数据转换为一个以id为键的对象，这样可以通过id快速检索数据，而不必每次都遍历整个数据集。这样做可以显著提高数据检索的性能。

需要根据具体的业务需求和场景选择合适的方式来处理大量数据。同时，前端处理大量数据也需要考虑浏览器的性能限制和用户设备的性能，合理设计和优化数据处理流程，以提供良好的用户体验。

那么，为什么定时器会卡，而requestAnimationFrame不会卡

一言以蔽之：requestAnimationFrame和js中的setTimeout定时器函数基本一致，不过setTimeout可以自由设置间隔时间，而requestAnimationFrame的间隔时间是由浏览器自身决定的，大约是17毫秒左右，但是定时器的回调函数，会受到js的事件队列宏任务、微任务影响，可能设定的是17毫秒执行一次，但是实际上这次是17毫秒、下次21毫秒、再下次13毫秒执行，所以并不是严格的卡住了这个60HZ的时间。

最后也是全文最重要的，码字不易，你的鼓励是我持之以恒写作的动力，感谢感谢感谢。

本文转载自: 掘金

开发者博客 – 和开发相关的 这里全都有

0%