javascript - 在客户端处理大数据集

Question

我正在尝试构建一个使用 Server Sent Events 的应用程序为了在 UI 上获取并显示一些推文(最新 50-100 条推文)。

SSE 网址:

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

问题:

• My UI is becoming unresponsive because there is a huge data that's coming in!
• How do I make sure My UI is responsive? What strategies should I usually adopt in making sure I'm handling the data?

当前设置: (为了更好地了解我想要实现的目标)

• 目前我有一个 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 定期调用此函数来获取最新的推文。