[RFC] 076 - 操作卡顿性能优化 #5105
Replies: 1 comment 2 replies
-
加载缓慢指标定义首先要定义加载缓慢的指标，参考 Lighthouse ，针对加载缓慢有三个关键指标： FCP、TTFB 以及 LCP。对于我们来说可以分成两方面来评估。
案例分析明确分析方式之后，找了一个用户看了下他遇到的加载缓慢的情况，根据他发我的视频来看，存在的问题如下： 1、 从输入URL 到显示内容（即返回 html 内容）要等待 10+s，白屏带来的体感很慢； 从上述的情况来看，其实核心问题是 TTFB 过大。但正常来说，一个页面如果有了静态 html ，应该是直出的，TTFB 应该很小。但为什么我们现在的 TTFB 会这么大呢？深入挖了一下，核心是跟我们现在的 RSC/SSR 实现逻辑有关。 在之前的 RFC （#252 、#253）和 PR （ #220 ）中，我们为了避免各种首屏 FOUC ，基于 RSC 实现了动态 html 下发。 const GlobalLayout = async ({ children }: PropsWithChildren) => {
const cookieStore = await cookies();
// 从 cookie 动态获取主题
const appearance = cookieStore.get(LOBE_THEME_APPEARANCE);
const neutralColor = cookieStore.get(LOBE_THEME_NEUTRAL_COLOR);
const primaryColor = cookieStore.get(LOBE_THEME_PRIMARY_COLOR);
// 从 cookie 动态获取语种
const defaultLang = cookieStore.get(LOBE_LOCALE_COOKIE);
const userLocale = defaultLang?.value
// 从 header 动态获取用户设备
const isMobile = await isMobileDevice();
return (
<StyleRegistry>
<Locale defaultLang={userLocale}>
<AppTheme
customFontFamily={appEnv.CUSTOM_FONT_FAMILY}
customFontURL={appEnv.CUSTOM_FONT_URL}
defaultAppearance={appearance?.value}
defaultNeutralColor={neutralColor?.value as any}
defaultPrimaryColor={primaryColor?.value as any}
globalCDN={appEnv.CDN_USE_GLOBAL}
>
{children}
</AppTheme>
</Locale>
</StyleRegistry>
);
};这些动态实现虽然可以保证直出的页面不会有任何 FOUC 的问题，但是对应就没法被 CDN 缓存，会回源到服务器算出 html 后再返回。 因此每个用户请求打过来的时候都会重新走一遍 Vercel Function 做一次 SSR 生成，然后网页内容再从 Serverless Funciton 发给到 Vercel CDN，CDN 再返回给用户。很显然，如果每个页面的内容都走一遍 SSR 会很慢。而且也容易出现超时的问题： PS：由于我们目前使用了动态方法，所以 page 默认的 cache-control 都会设置为 解决思路那要如何解决？ 一种做法是按需加上一层 CDN 缓存。之前在官网试过，加上缓存层之后，某个页面就能从 9s+ 的 FCP 下降到 280ms，提速显著。
但由于我们目前的内容大部分都是动态生成的，因此要测试下如何添加这种缓存。 而另一种做法就是尽可能将内容变成静态。 |
Beta Was this translation helpful? Give feedback.
-
|
目前发现可以使用 Vary 的 headers 字段来做缓存，测试 PR： #5239 但是目前 nextjs 有个问题，会占用 vary 字段 |
Beta Was this translation helpful? Give feedback.
-
|
和 Vercel 的 Lee Robinson 沟通了我们的场景， Lee 说 Vary 字段并不是行业标准解，目前有很多 CDN 供应商并不遵守 vary 的规范。因此 vary 的探索暂时放弃。 接下来会做把内容静态化的探索： #5461 |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
背景
虽然我们做了非常多的性能优化，但是目前还是有很多人说 LobeChat 非常卡。这个 RFC 来尝试分析和梳理卡顿原因，并作为明年一个长线目标，期望根本解决。
通过 https://github.com/lobehub/lobe-chat/issues?q=is%3Aissue+%E5%BE%88%E5%8D%A1+is%3Aclosed+ 可以看到大家对于 LobeChat 的卡顿的吐槽。
现状分析
当我们说一个应用卡顿，倒是指代的是哪些方面？先可以通过 issue 中的反馈来整体感受下：
总的来说，反馈卡顿的点包含以下几个方面：
一个一个方面具体来分析。
Beta Was this translation helpful? Give feedback.
All reactions