[RFC] 076 - 操作卡顿性能优化 #5105
Replies: 1 comment
-
加载缓慢指标定义首先要定义加载缓慢的指标,参考 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.
-
背景
虽然我们做了非常多的性能优化,但是目前还是有很多人说 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