时间戳

首页 > 解决方案 > 浏览器在角度 4 中因数组推送而卡住/冻结。如何解决这个问题？

node.js - 浏览器在角度 4 中因数组推送而卡住/冻结。如何解决这个问题？

问题描述

我在 logsCompoment.ts 中有一个名为的数组logs，我将新日志推送到该数组并使用 ngFor 在 html 页面中写入日志。我按照以下方式执行此操作。

this.socket.on('newline', (data) => {
                this.logs.push(data);
                }
            });

在 logsCompoment.html 中，我执行以下操作以显示日志。

<li *ngFor="let log of logs" [innerHTML]="log"></li>

如果日志不经常出现，一切正常。但是，如果日志非常频繁地出现，例如每秒大约 1000 行，它会冻结浏览器。我的问题是，如何处理这种情况。如果我没有遵循正确的实现方式，请用正确的实现方式回答我，这样浏览器就不会卡住。

标签： node.jsangularbrowser

解决方案

我建议两种方法来处理这个问题。

一种是将项目批量推送到数组，但这最终会冻结浏览器，因为 DOM 树会快速增长。

第二种选择 - 更好的是实现名为virtual scroll. 这将允许您浏览所有日志，但在 DOM 中将只有少数元素（您当前看到的元素）。

有关更多信息，请参阅此链接：https ://netbasal.com/a-taste-of-angular-material-virtual-scroll-f173c5c70a1

推荐阅读