[RFC] 019 - Conversation 会话列表优化

[arvinxx]

背景

1. 会话列表现在存在非常多不必要的重复渲染，比较卡
2. 现在是列表全量渲染，消息一多就完全不可用了，需要换成虚拟列表
3. 不支持微信qq那种打开位于最底下，往上滚动加载历史消息的交互
4. 不支持消息的多选、批量删除、选择个别消息进行分享等会话工具中的常用操作
5. 消息自动滚动实现有些问题 [Bug] 生成内容过程中聊天框无法往上拉 #920

由于会话列表是chat应用的核心组件因此需要保证其交互体验达到最优一档，并为未来分支会话、话题模板 等场景打好基础。

解决思路

重复渲染

针对重复渲染问题，已通过 #934 优化很多。

Before	After
ChatList.Before.mp4	ChatList.After.mp4

虚拟滚动

ChatList 和 TopicList 需要替换为虚拟滚动方案，在下方第一条研究

[arvinxx]

虚拟滚动实现方案

• react-virtualized
• react-infinite-scroll-component
• react-virtuoso

[arvinxx]

经过实践之后，最佳方案是 react-virtuoso

[arvinxx]

参考：https://culture.kissflow.com/chat-virtualization-and-performance-optimization-enhancing-the-user-experience-80b35678a25

[arvinxx]

自动滚动到底部

对话参考

使用 react-virtuoso 实现 initialTopMostItemIndex 可以将默认消息滚动到底部，但如果是切换topicId时也需要滚动，应该如何实现？

为了在使用 react-virtuoso 时实现切换 topicId 后将消息滚动到底部，你可以利用 react-virtuoso 提供的 API 和 React 的生命周期方法来实现。以下是一种可能的实现方案：

1. 使用 useEffect 钩子来监听 topicId 的变化。
2. 当 topicId 发生变化时，使用 react-virtuoso 的 scrollToIndex 方法将滚动位置设置到列表的底部。

以下是一个简单的代码示例：

import React, { useEffect, useRef } from 'react';
import { Virtuoso } from 'react-virtuoso';

const MyChatComponent = ({ topicId, messages }) => {
  const virtuosoRef = useRef(null);

  // 当消息列表更新时（例如，topicId变更或新的消息添加到当前话题），滚动到底部
  useEffect(() => {
    if (virtuosoRef.current && messages.length > 0) {
      virtuosoRef.current.scrollToIndex({ index: messages.length - 1, align: 'end' });
    }
  }, [topicId, messages.length]);

  return (
    <Virtuoso
      ref={virtuosoRef}
      data={messages}
      itemContent={(index, message) => (
        <div>{message.content}</div>
      )}
      // 可以设置 initialTopMostItemIndex 以便初始渲染时滚动到底部
      initialTopMostItemIndex={messages.length - 1}
      // 其他 Virtuoso 属性和方法...
    />
  );
};

在这个组件中，我们使用了 useRef 钩子来创建对 Virtuoso 组件的引用。然后，我们使用 useEffect 钩子来监听 topicId 和 messages.length 的变化。当这些依赖项发生变化时，我们调用 scrollToIndex 方法将视图滚动到列表的最后一个元素。

请注意，initialTopMostItemIndex 属性只在组件的初始挂载时有效，因此，对于后续的 topicId 变化，我们需要使用 scrollToIndex 方法来实现滚动效果。此外，在实际的应用程序中，你可能需要根据消息加载状态或其他条件来处理滚动逻辑，以确保用户体验尽可能流畅。

最终实现

const VirtualizedList = memo(() => {
  const virtuosoRef = useRef<VirtuosoHandle>(null);

  const [id] = useChatStore(chatSelectors.currentChatKey);

  useEffect(() => {
    if (virtuosoRef.current) {
      virtuosoRef.current.scrollToIndex({ align: 'end', behavior: 'auto', index: 'LAST' });
    }
  }, [id]);

  return chatLoading && data.length === 2 ? null : (
    <Flexbox height={'100%'}>
      <Virtuoso
        atBottomStateChange={setAtBottom}
        atBottomThreshold={60 * (mobile ? 2 : 1)}
        computeItemKey={(_, item) => item}
        data={data}
        followOutput={'auto'}
        initialTopMostItemIndex={data?.length - 1}
        itemContent={itemContent}
        overscan={70 * 10}
        ref={virtuosoRef}
      />
    </Flexbox>
  );
});

export default VirtualizedList;

[arvinxx]

虚拟滚动时 overscan 和 scrollSeek 的配置关系

以 Topic List 为例：

---

我有一个组件如下：

<Virtuoso
components={{ ScrollSeekPlaceholder: Placeholder }}
data={topics}
itemContent={itemContent}
overscan={44 * 5}
scrollSeekConfiguration={{
enter: (velocity) => Math.abs(velocity) > 400,
exit: (velocity) => Math.abs(velocity) < 30,
}}
/>

虚拟滚动时，我可以通过 overscan 来控制额外渲染的高度。但如果用户滚动过快则会导致白屏，所以可以通过scrollSeek来配置一个滚动过快时候的骨架屏。我想知道 overscan 的高度和 scrollSeek 的速度之间应该是什么样的一个计算关系？假设每项高度都是确定是 44

在使用虚拟滚动组件如Virtuoso时，overscan和scrollSeek之间的计算关系取决于多个因素，包括用户的滚动速度、项目的高度、渲染性能和目标用户体验。以下是一些考虑因素和计算关系的一般指导原则：

1. 项目高度（Item Height） - 在您的情况中，每项高度为44像素。

2. Overscan（超扫描） - overscan参数决定了在当前视窗之外额外渲染的项目数。这个参数的目的是在用户缓慢滚动时预先渲染足够的项目，以避免出现空白区域。overscan的高度通常是项目高度的倍数，例如，您设置的overscan={44 * 5}意味着在视窗上下各多渲染5个项目的高度，这样可以提供一个缓冲区。

3. Scroll Seek（滚动寻找） - 当用户快速滚动时，scrollSeek配置可以显示一个占位符（Placeholder），这是一种性能优化，以避免在高速滚动时渲染大量项目。scrollSeek配置中的enter和exit函数定义了触发和停止显示占位符的滚动速度阈值。

4. 计算关系 - 理想情况下，您希望在用户滚动速度超过enter定义的速度时，已经渲染的overscan区域能够持续到显示骨架屏之前，以避免白屏。因此，您需要估计在给定速度下，用户可能在一定时间内滚动的距离，并确保这段距离内有足够的项目已经被渲染或者占位符已经显示。

一种简单的估算方法是使用下面的公式来确定一个合适的overscan值：

overscan_height = item_height * items_to_overscan
scroll_distance_per_frame = scroll_velocity * frame_time
frames_before_placeholder = overscan_height / scroll_distance_per_frame

• items_to_overscan是您希望在视窗之外渲染的项目数。
• scroll_velocity是enter函数中定义的速度阈值。
• frame_time是每帧的时间，通常为16.67ms（对应60fps）。

frames_before_placeholder表示在显示占位符之前可以滚动多少帧。如果这个值太小，用户可能会在占位符显示之前看到白屏。如果这个值太大，可能会造成不必要的渲染开销。

请注意，这只是一个基本的估算方法。实际情况可能更复杂，因为用户滚动速度可能会变化，而且在不同设备和浏览器上的渲染性能也不同。进行实际的性能测试和调整overscan和scrollSeek配置以达到最佳用户体验是非常重要的。

---

假设按照这个计算逻辑来，如果scrollBarSeek 的enter 速率是 400，overscan 的值应该是多少？

为了计算overscan的值，我们需要确定用户在滚动条进入骨架屏模式之前可能滚动的距离。这取决于滚动速度和渲染新项目之前的时间（在这个时间内，用户仍在看到已经渲染的内容或者占位符）。我们可以使用以下步骤来估算：

1. 确定每帧的滚动距离：给定的滚动速度是每秒像素数。我们知道一般显示器的刷新率是60帧/秒，所以每帧的时间大约是 1/60 秒（大约16.67毫秒）。

2. 计算每帧滚动的像素数：我们将滚动速度除以帧率来得出每帧滚动的像素数。

   scroll_distance_per_frame = scroll_velocity / frame_rate
   

   如果滚动速度是400像素/秒，那么：

   scroll_distance_per_frame = 400 pixels/sec / 60 frames/sec
   scroll_distance_per_frame ≈ 6.67 pixels/frame
   

3. 确定滚动到显示占位符之前的帧数：这取决于你的应用程序如何快速响应滚动事件，并且开始显示占位符。这个响应时间可能会受到多种因素的影响，包括浏览器性能和JavaScript事件循环的忙碌程度。我们可以假设在实际应用中，这个响应时间可能是几帧到几十帧。为了简化计算，我们可以先假设一个大致的帧数，比如10帧。

4. 计算overscan的高度：我们将每帧滚动的像素数乘以响应帧数，以得到在开始显示占位符之前用户可能滚动的总像素数。

   overscan_height = scroll_distance_per_frame * frames_before_placeholder
   

   假设我们需要在10帧内响应，那么：

   overscan_height = 6.67 pixels/frame * 10 frames
   overscan_height ≈ 66.7 pixels
   

5. 转换为项目数：最后，我们需要将总像素数转换为项目数。因为每个项目高度为44像素，我们可以将总像素数除以每个项目的高度。

   items_to_overscan = overscan_height / item_height
   

   items_to_overscan = 66.7 pixels / 44 pixels/item
   items_to_overscan ≈ 1.5 items
   

因此，为了保持连续性，我们至少需要在可视区域之外渲染大约1.5个项目的高度。由于我们不能渲染半个项目，我们需要向上取整到最接近的整数，这意味着我们至少需要2个项目的overscan。为了更好的用户体验，我们通常会提供一个更大的缓冲区，例如5个或10个项目的高度。

在这个例子中，overscan的值应该至少是44 * 2 = 88像素。然而，为了更好的用户体验，您可能想要设置一个更大的值，例如44 * 5 = 220像素或者更多。这将取决于您的应用程序的实际性能和用户体验的需求。