在客户端处理大型数据集

Question

我正在尝试构建一个使用服务器发送事件的应用程序，以便在UI上获取和显示一些推文(最新的50-100条推文(。

上交所网址：

https://tweet-service.herokuapp.com/stream

问题：

• 我的 UI 变得无响应，因为有大量数据传入！
• 如何确保我的 UI 具有响应性？我通常应该采取什么策略来确保我正在处理数据？

当前设置： (为了更清楚地了解我想要实现的目标(

• 目前，我有一个Max-Heap，它有一个自定义比较器来显示最新的50条推文。
• 每次有更改时，我都会使用新的最大堆数据重新呈现页面。

Answer 1

我们不应该保持 EventSource 打开状态，因为如果在短时间内发送了太多消息，这将阻塞主线程。相反，我们只应该保持事件源打开，只要获得 50-100 条推文。例如：

function getLatestTweets(limit) {
return new Promise((resolve, reject) => {
let items = [];
let source = new EventSource('https://tweet-service.herokuapp.com/stream');
source.onmessage = ({data}) => {
if (limit-- > 0) {
items.push(JSON.parse(data));
} else {
// resolve this promise once we have reached the specified limit
resolve(items);
source.close();
}
}
});
}
getLatestTweets(100).then(e => console.log(e))

然后，可以将这些推文与以前获取的推文进行比较，以确定哪些推文是新的推文，然后相应地更新 UI。您可以使用 setInterval 定期调用此函数来获取最新的推文。