[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.
-
背景
虽然我们做了非常多的性能优化，但是目前还是有很多人说 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