Angular 调试 —— 一个真实的多重循环导致的Bug-编程知识

Angular 调试 —— 一个真实的多重循环导致的Bug

导致性能问题的原因可能很复杂，也可能很简单，今天让我们来看一个现实的例子。一个多重循环导致列表卡死。

startDemo() {this.processing = true// 创建复杂数据结构const data = [];for (let i = 0; i < 5000; i++) {const innerArray = [];for (let j = 0; j < 5000; j++) {const innerObject:any = {};innerObject.value = Math.random();innerArray.push(innerObject);}data.push(innerArray);}// 循环嵌套循环处理数据_.forEach(data, (innerArray) => {_.forEach(innerArray, (innerObject) => {innerObject.value = Math.pow(innerObject.value, 2);});innerArray = _.sortBy(innerArray, 'value');});// 模拟延迟以增加计算量setTimeout(() => {this.processing = false}, 2000);}

演示结果：

导致浏览器崩溃的问题在于：

首先，创建了一个非常大的数据结构，包含5000个内部数组，每个内部数组有5000个对象。这将占用大量的内存。

然后，在两个嵌套的 forEach 循环中，对数据进行处理。对于如此大规模的数据结构，这将导致非常高的计算负载，消耗大量的 CPU 资源和时间。

接下来，在延迟操作中使用了 setTimeout，将操作延迟了2秒。尽管这是为了模拟一个长时间运行的处理过程，但在这段时间内，浏览器将受到很大的压力，并且可能变得无响应或崩溃

如何优化呢：

1.减少数据规模：由于数据规模非常大，可以考虑减少内部数组的数量或对象的数量，以降低内存占用和计算负载。

2.分批处理：将数据分批处理，而不是一次性处理整个数据结构。可以使用分页或分块的方式，每次处理一部分数据，然后等待一段时间，再处理下一部分数据。这样可以避免长时间的单一计算任务对浏览器的影响。

3.使用 Web Workers：将数据处理和排序操作放在 Web Worker 中进行。Web Worker 可以在后台线程中执行代码，避免阻塞主线程，从而提高浏览器的响应性能。

4.优化算法和数据结构：如果可能的话，可以考虑使用更高效的算法和数据结构来进行数据处理和排序，以减少计算复杂度和提高性能。

优化后demo：(处理方式用的是分批处理)

startProcessing() {this.processing = true;this.currentPage = 0;this.data = [];for (let i = 0; i < 5000; i++) {const innerArray = [];for (let j = 0; j < 5000; j++) {const innerObject:any = {};innerObject.value = Math.random();innerArray.push(innerObject);}this.data.push(innerArray);}const pageSize = 100;this.numPages = Math.ceil(this.data.length / pageSize);const processPage = () => {const start = this.currentPage * pageSize;const end = Math.min((this.currentPage + 1) * pageSize, this.data.length);const pageData = this.data.slice(start, end);_.forEach(pageData, (innerArray) => {_.forEach(innerArray, (innerObject) => {innerObject.value = Math.pow(innerObject.value, 2);});innerArray = _.sortBy(innerArray, 'value');});this.currentPage++;if (this.currentPage < this.numPages) {setTimeout(processPage, 0);} else {this.processing = false;}};setTimeout(processPage, 0);}