ChatGPTNextWeb / ChatGPT-Next-Web

A cross-platform ChatGPT/Gemini UI (Web / PWA / Linux / Win / MacOS). 一键拥有你自己的跨平台 ChatGPT/Gemini 应用。
https://app.nextchat.dev/
MIT License
76.72k stars 59.21k forks source link

关于messages重复渲染的问题 #5837

Open liukkm opened 3 hours ago

liukkm commented 3 hours ago

🥰 需求描述

I have verified this project, and when there are many conversations and chats, the browser will get stuck and the memory will skyrocket. After checking the general reasons, I found that it is because all Message-items on the page will be rendered repeatedly when returning from each Q&A. I added console.log() to message.map, and found that message-item would be repeatedly rendered about 10 times when entering the page for the first time. When text stream was output, message-item would be repeatedly rendered and the number of rendering times was the length of text stream. image image

When there are 20-40 chats in a session or when the length of each text stream is much longer, the whole system freezes.

🧐 解决方案

Do not over-render, update only the corresponding message-item each time the text stream returns, and do not render the other message-items repeatedly

📝 补充信息

No response

Issues-translate-bot commented 3 hours ago

Bot detected the issue body's language is not English, translate it automatically.


Title: About the problem of repeated rendering of messages

lloydzhou commented 3 hours ago

这里是一个列表渲染的逻辑,前端框架针对列表渲染的时候,确实不好做diff

可以的优化方向是将最新的一条消息作为currentMessage提出来单独渲染,剩下的messages整体渲染。 另外,这里可以将单独一条message抽象出一个组件进行渲染。

Issues-translate-bot commented 3 hours ago

Bot detected the issue body's language is not English, translate it automatically.


Here is a list rendering logic. When the front-end framework renders the list, it is really difficult to do diff.

The possible optimization direction is to present the latest message as currentMessage and render it separately, and render the remaining messages as a whole. In addition, a single message can be abstracted into a component for rendering.

liukkm commented 3 hours ago

目前我已经抽离出一个message-item的组件 至于您说的currentMessage似乎没那么好处理,因为这个涉及到多会话问题 以及 上一个问答未结束下一个问答已发起的问题,对此你有什么想法吗?

Issues-translate-bot commented 3 hours ago

Bot detected the issue body's language is not English, translate it automatically.


At present, I have extracted a message-item component As for your currentMessage, it seems that it is not easy to handle, because it involves multi-session issues and the issue of the previous Q&A not being completed and the next Q&A having been initiated. Do you have any thoughts on this?