打开设置页面卡顿[Bug]

BruceLee569 commented 3 months ago

💻 系统环境

Windows

📦 部署环境

Official Preview

🌐 浏览器

Chrome

🐛 问题描述

每次打开设置都会向服务器发送请求，导致设置页面显示卡顿，没请求必要时能否先显示？

🚦 期望结果

No response

📷 复现步骤

No response

📝 补充信息

No response

Cp0204 commented 3 months ago

不只是设置页，整个lobe都卡卡的，切换对话，卡片的时候，经常要刷新页面。

lobehubbot commented 3 months ago

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿

Not only the settings page, but also the entire Lebo is stuck. When switching conversations or cards, I often have to refresh the page.

arvinxx commented 3 months ago

@Cp0204 你确定最新版本还有这个问题吗

lobehubbot commented 3 months ago

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿

@Cp0204 Are you sure the latest version still has this problem?

BruceLee569 commented 3 months ago

@Cp0204 你确定最新版本还有这个问题吗

用的是最新版本，每次打开设置页和子设置项时，都会往 api/market 发送GET请求，导致进入页面卡顿。

Cp0204 commented 3 months ago

@Cp0204 你确定最新版本还有这个问题吗

是的，最新版。lobe请求资源太频繁，首次打开，就有200+个请求，切换对话，也会请求，部署在远程的体验很不好。

Cp0204 commented 3 months ago

每切换对话都会请求这些资源，其实不必要的。

不知道作者是不是部署在本地，并且用的配置非常高的电脑（或者mac和windows之间的差异？），因为我在issue下尝试搜解决方法，发现其实很多人反映过卡顿的问题，作者似乎感受不强。其实卡顿感很明显的。

我也怀疑过网络的问题，试过部署在国内的服务器，有一点改善，但也没有质的区别。

lobehubbot commented 3 months ago

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿

These resources will be requested every time you switch conversations, which is actually unnecessary.

I don’t know if the author deployed it locally and used a very high-configuration computer (or is it the difference between mac and windows?), because I tried to search for solutions under the issue and found that many people have reported the lag problem. The author doesn't seem to feel strongly about it. In fact, the lag is very obvious.

I also suspected a network problem and tried deploying a domestic server. There was a slight improvement, but there was no qualitative difference.

ShinChven commented 3 months ago

确实很卡

lobehubbot commented 3 months ago

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿

Really stuck

devyujie commented 3 months ago

+1

eightHundreds commented 3 months ago

求求你把ssr，server component去掉💔

lobehubbot commented 3 months ago

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿

Please remove ssr, server component💔

arvinxx commented 3 months ago

都会往 api/market 发送GET请求，导致进入页面卡顿。

是因为这个请求卡顿吗？

lobehubbot commented 3 months ago

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿

Will send a GET request to api/market, causing the page to freeze.

Is it because of this request?

arvinxx commented 3 months ago

每切换对话都会请求这些资源，其实不必要的。

这些资源应该都在 service worker 缓存了的。你说的卡应该和这个没关系

我日常用的是MBP 20年 M1 的 13寸，并没有很卡。另外之前已经做了非常多轮的性能优化，应该比以前好很多了。目前剩余已知的是会话页面的切换和助手的切换是还存在一定延迟的问题，下个月应该能根治掉了。

lobehubbot commented 3 months ago

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿

These resources will be requested every time you switch conversations, which is actually unnecessary.

These resources should be cached in the service worker. The card you mentioned should have nothing to do with this.

I use the 13-inch MBP 20-year-old M1 on a daily basis, and it’s not very stuck. In addition, many rounds of performance optimization have been done before, and it should be much better than before. What is currently known is that there is still a certain delay in switching session pages and assistants, which should be resolved next month.

ShinChven commented 3 months ago

反正没有NextChat丝滑

lobehubbot commented 3 months ago

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿

Not as smooth as NextChat anyway

BruceLee569 commented 3 months ago

有缓存的情况下体验还过得去，首次访问的加载速度是真的慢，PC端要1分多钟才渲染完毕。我对比过ChatGPT-Next-Web和chatgpt-web-midjourney-proxy，PC端浏览器他们只需要三四秒，移动端lobe也至少比他们慢一倍，包括PWA应用。推荐给朋友都不好意思，用户体验堪忧呀，希望能多多测试优化一下。

测试用户端：Windows11 Chrome浏览器测试链接：https://ai.jdz-ceramic.com/chat https://ai1.jdz-ceramic.com/ https://ai2.jdz-ceramic.com/ 测试服务器：搬瓦工2H2G 服务器部署方式：docker镜像

https://github.com/lobehub/lobe-chat/assets/49506152/e6e9018a-4807-4ff1-9f41-60b1288d27b9

Cp0204 commented 3 months ago

service worker

service worker 也撐不住資源多啊，一個幾十毫秒，時間都量變引起質變了。再加上服務器的請求…… 😂

lobehubbot commented 3 months ago

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿

service worker

The service worker cannot support the large number of resources. Every tens of milliseconds, the time changes quantitatively and qualitatively. Plus server requests... 😂

arvinxx commented 3 months ago

首次访问的加载速度是真的慢，PC端要1分多钟才渲染完毕。

@BruceLee569 preview 站点的访问也有这么慢么？另外我拿我的电脑打开你的站点很快啊，没缓存的情况也基本上秒开。你确定不是你的网络问题么？

https://github.com/lobehub/lobe-chat/assets/28616219/863eb9ea-a1d6-4fec-a679-f933446b1976

lobehubbot commented 3 months ago

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿

The loading speed on the first visit is really slow, and it takes more than 1 minute to complete rendering on the PC side.

@BruceLee569 Is access to the preview site also so slow? In addition, when I open your site on my computer, it is very fast. Even if there is no cache, it can be opened in almost a second. Are you sure it's not a problem with your network?

https://github.com/lobehub/lobe-chat/assets/28616219/863eb9ea-a1d6-4fec-a679-f933446b1976

BruceLee569 commented 3 months ago

@arvinxx 网络没问题的，直接进这个聊天页面会很卡：https://ai.jdz-ceramic.com/chat 为什么要发送两百多个JS请求 chat UI 才渲染出来 😂

像你这样先进主页，再点立即开始速度就还好。

另外提个建议：感觉主页没必要单独显示一个欢迎界面，没啥作用，直接显示对话框用户体验会更好吧，主流的工具默认都是一个对话框，功能够用能用就好，拖慢性能的实现可以考虑放一放。

Cp0204 commented 3 months ago

有缓存的情况下体验还过得去，首次访问的加载速度是真的慢，PC端要1分多钟才渲染完毕。我对比过ChatGPT-Next-Web和chatgpt-web-midjourney-proxy，PC端浏览器他们只需要三四秒，移动端lobe也至少比他们慢一倍，包括PWA应用。推荐给朋友都不好意思，用户体验堪忧呀，希望能多多测试优化一下。

测试用户端：Windows11 Chrome浏览器测试链接：https://ai.jdz-ceramic.com/chat https://ai1.jdz-ceramic.com/ https://ai2.jdz-ceramic.com/ 测试服务器：搬瓦工2H2G 服务器部署方式：docker镜像

1716173717854-1716173266494-20240520_104413.mp4

首次访问的请求数😂，虽然有绝大一部分是UI出来，可以边用变加载的。但是1000+个请求，也真是不太优雅。

lobehubbot commented 3 months ago

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿

With cache, the experience is passable. The loading speed for the first visit is really slow. It takes more than a minute to render on the PC side. I have compared ChatGPT-Next-Web and chatgpt-web-midjourney-proxy. They only take three or four seconds for PC browsers, and mobile lobe is at least twice as slow as them, including PWA applications. I'm embarrassed to recommend it to my friends. The user experience is worrisome. I hope I can test and optimize it more.

Test client: Windows11 Chrome browser test link: https://ai.jdz-ceramic.com/chat https://ai1.jdz-ceramic.com/ https://ai2.jdz-ceramic.com/ test Server: 2H2G Server deployment method: docker image

1716173717854-1716173266494-20240520_104413.mp4

Number of requests for first visit😂

ShinChven commented 3 months ago

https://github.com/lobehub/lobe-chat/assets/3351486/fdc14906-577b-429e-81e9-63134ea3e4f9

MacBook Pro 15 mid 2014 16GB

BruceLee569 commented 3 months ago

2024-05-20.2.35.28.mov MacBook Pro 15 mid 2014 16GB

😂 跟我一样，没有对比就没有伤害。。

arvinxx commented 3 months ago

https://github.com/lobehub/lobe-chat/assets/28616219/4cbccbb3-9905-4482-a9c0-58f0c4463b10

我试了访客模式，直接访问，SSR 首屏 2s 左右，10s 后渲染完成 list 。总体大概 20s 左右全部渲染完成。这个速度在我看来也还行啊？毕竟你这个又没 CDN 加速，下载速度完全取决于你的服务端出口带宽…

如果是在 Vercel 部署的 preview，静态资源走的 CDN ，全部渲染出来只要 5s：

https://github.com/lobehub/lobe-chat/assets/28616219/ae0294a8-ab26-4a1f-b176-23d0c99eedf5

arvinxx commented 3 months ago

另外提个建议：感觉主页没必要单独显示一个欢迎界面，没啥作用，直接显示对话框用户体验会更好吧，主流的工具默认都是一个对话框，功能够用能用就好，拖慢性能的实现可以考虑放一放。

你的这个建议让我有点怀疑你是不是真的在用了… 这个 welcome 只有新用户进来才会显示，如果你的本地会话记录超过 4 条，默认就会跳转到 /chat 路由的。

lobehubbot commented 3 months ago

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿

Another suggestion: I feel that there is no need to display a separate welcome interface on the homepage. It has no effect. The user experience would be better if the dialog box is directly displayed. The mainstream tools have a dialog box by default. As long as the functions can be used, drag and drop The realization of chronic energy can be considered to be put aside.

Your suggestion makes me wonder if you are really using it... This welcome will only be displayed when new users come in. If you have more than 4 local session records, it will jump to the /chat route by default.

ShinChven commented 3 months ago

Area.mp4 我试了访客模式，直接访问，SSR 首屏 2s 左右，10s 后渲染完成 list 。总体大概 20s 左右全部渲染完成。这个速度在我看来也还行啊？毕竟你这个又没 CDN 加速，下载速度完全取决于你的服务端出口带宽…

如果是在 Vercel 部署的 preview，静态资源走的 CDN ，全部渲染出来只要 5s：

Preview.mp4

我不管，我就是喜欢秒开。

lobehubbot commented 3 months ago

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿

Area.mp4 I tried the guest mode and accessed it directly. The SSR first screen took about 2s and the list was completed after 10s. Overall, it takes about 20 seconds for all rendering to be completed. This speed seems okay to me, right? After all, you don’t have CDN acceleration, and the download speed depends entirely on your server’s export bandwidth...

If the preview is deployed in Vercel and the static resources are delivered through CDN, it only takes 5 seconds to render them all:

Preview.mp4

I don't care, I just like to open in seconds.

arvinxx commented 3 months ago

MacBook Pro 15 mid 2014 16GB

@ShinChven 如果是这个配置，使用 LobeChat 会卡的话，我个人还是建议你使用 NextChat 吧。我并不打算为这么老的设备做什么优化，抱歉 🤷‍♂️

lobehubbot commented 3 months ago

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿

MacBook Pro 15 mid 2014 16GB

@ShinChven If LobeChat is stuck in this configuration, I personally recommend you to use NextChat. I don’t intend to do any optimization for such an old device, sorry 🤷‍♂️

ShinChven commented 3 months ago

MacBook Pro 15 mid 2014 16GB

@ShinChven 如果是这个配置，使用 LobeChat 会卡的话，我个人还是建议你使用 NextChat 吧。我并不打算为这么老的设备做什么优化，抱歉 🤷‍♂️

我主力机 M1 Max 64GB 进 Settings 也卡……

lobehubbot commented 3 months ago

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿

MacBook Pro 15 mid 2014 16GB

@ShinChven If LobeChat is stuck in this configuration, I personally recommend you to use NextChat. I don’t intend to do any optimization for such an old device, sorry 🤷‍♂️

My main machine, M1 Max 64GB, is stuck in Settings...

arvinxx commented 3 months ago

@ShinChven 那能否录个屏看下具体怎么卡呢？

lobehubbot commented 3 months ago

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿

@ShinChven Can you record the screen and see how it gets stuck?

BruceLee569 commented 3 months ago

另外提个建议：感觉主页没必要单独显示一个欢迎界面，没啥作用，直接显示对话框用户体验会更好吧，主流的工具默认都是一个对话框，功能够用能用就好，拖慢性能的实现可以考虑放一放。

你的这个建议让我有点怀疑你是不是真的在用了… 这个 welcome 只有新用户进来才会显示，如果你的本地会话记录超过 4 条，默认就会跳转到 /chat 路由的。

我用了这么久，都安利给几个朋友了。谁也不会去留意首页的跳转路由啊，所以我说缓存之后再用速度还可以，但进设置页还是会卡，我对前端不太熟悉，但我觉得点击后路由跳转到 settings/modal 应该就是卡顿的原因，其他框架进入设置并不会有路由跳转的动作。包括进入每一个子设置项，都会单独发送请求，等个一两秒，请问这设计是否合理呢？

即使将它优化到秒进，让请求在后台成功后再更新数据，但我只是进一个首页，后台在那里默默发送超过1000个请求（绝大部分都是不知道有什么用处的 js 文件），然后点一下设置，又在那里发送超过500个请求，说实话用这耗电量都大好多。

大部分用户都是普通人，第一次打开的时候也确实很卡（人们分享的时候也不会留意链接是首页还是聊天页），我试了你的 vercel 链接也是一样卡，跟 cdn 没关系，请在Windows端测试一下。

https://github.com/lobehub/lobe-chat/assets/49506152/b03ee873-65e6-4009-8c76-364cbbcf2aa6

找到bug点了，3秒请求之后，在页面处随便点击一下，UI就渲染出来了。（虽然后台还是会默默依次发送近1000个js请求。。）

https://github.com/lobehub/lobe-chat/assets/49506152/320911c9-b651-4a5f-a2b3-5fed7d0bda34

arvinxx commented 3 months ago

找到bug点了，3秒请求之后，在页面处随便点击一下，UI就渲染出来了

这个似乎是 SSR 水合问题… 就是客户端和服务端的语种没有匹配上，导致首次水合失败，然后会一直 fallback 到静态 html 的样子。只有用户做了点击操作后，才会重新在 client 端进行渲染。但第二次及以后，客户端的主题/语种都会在 cookie 中记录下来，这样水合就能顺利完成。

我理解这个应该也就是第一次会出现，而且用户不做任何操作的概率也比较低，所以一直没当回事 😅 我看看后续怎么修复下吧。

即使将它优化到秒进，让请求在后台成功后再更新数据，但我只是进一个首页，后台在那里默默发送超过1000个请求（绝大部分都是不知道有什么用处的 js 文件），然后点一下设置，又在那里发送超过500个请求，说实话用这耗电量都大好多。

这个我理解应该是 pwa 的特性吧？浏览器会在空闲的时候预先将整个网站都缓存下来，这样在未来打开网站的速度会加快。这不算一个 feature 么…

lobehubbot commented 3 months ago

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿

Found the bug. After 3 seconds of request, just click on the page and the UI will be rendered.

This seems to be an SSR hydration problem... that is, the language of the client and server do not match, causing the first hydration to fail, and then it will fall back to static html. Only after the user clicks, it will be rendered again on the client side. But the second time and later, the client's theme/language will be recorded in the cookie, so that the hydration can be completed smoothly.

I understand that this should only appear for the first time, and the probability of users not doing anything is relatively low, so I haven’t taken it seriously 😅

I'll see how to fix it later.

Even if it is optimized to be processed in seconds and the data is updated after the request succeeds in the background, I just enter a homepage, and the background silently sends more than 1,000 requests there (most of them are js files with no idea of their use) , then click Settings, and send more than 500 requests there. To be honest, this consumes a lot more power.

I understand this should be a feature of pwa, right? The browser will cache the entire website in advance when it is idle, so that the speed of opening the website in the future will be faster. Isn’t this a feature?…

arvinxx commented 3 months ago

其他框架进入设置并不会有路由跳转的动作。包括进入每一个子设置项，都会单独发送请求，等个一两秒，请问这设计是否合理呢

你说的发给 /api/market 这个我已经修了，你再试试看？另外我好像没看到你录制关于进入设置页卡的视频？

lobehubbot commented 3 months ago

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿

When other frameworks enter the settings, there will be no routing jump action. Including entering each sub-setting item, a request will be sent separately and wait for a second or two. Is this design reasonable?

You said to send it to /api/market. I have already fixed this. Can you try it again? Also, I don’t think I saw the video you recorded about entering the settings page?

BruceLee569 commented 3 months ago

嗯嗯感谢回复现在好很多了

设置项每次点完还是需要等待渲染，不能秒开，操作速度一快UI也容易反应不过来，给人感觉卡卡的。首次缓存后再次点击，大部分UI都不用等待渲染了。但是关闭窗口之后再进入又会慢一点，PWA应用杀后台再进又会更慢一点。

后续能够注意优化就更好啦 👏

kele527 commented 3 months ago

问题是本质不是加载慢，而是操作的时候UI卡顿，比如点任意一个按钮，都要等2秒才响应，正常的网页应该是点击后在0.1秒内响应，超过0.3秒就会明显感受到卡顿

lobehubbot commented 3 months ago

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿

The problem is not that loading is slow, but that the UI freezes during operation. For example, when you click on any button, you have to wait for 2 seconds to respond. A normal web page should respond within 0.1 seconds after clicking it. If it exceeds 0.3 seconds, you will notice it. to katon

arvinxx commented 3 months ago

@kele527 你说的没错，操作延迟的问题是存在的，还需要做更多的优化

lobehubbot commented 3 months ago

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿

@kele527 You are right, the problem of operation delay exists, and more optimization needs to be done

lobehub / lobe-chat