性能优化指标

FCP:First Contentful Paint

首次内容渲染 (FCP) 是指用户首次导航到网页到网页任何一部分内容呈现在屏幕上的时间。
内容指的是文本、图片、svg元素或非白色的canvas元素。

在JS中衡量FCP

使用Paint Timing API创建一个 PerformanceObserver，用于监听名称为 first-contentful-paint 的 paint 条目并将其记录到控制台。

操作执行优化，通过防抖、节流来减少操作的重复执行，来提高性能。

资源加载优化，通过按需加载、延迟加载资源、缓存资源来减少阻塞和服务器请求。

资源体积优化，通过压缩，优化图片等手段，提高资源的加载速度。

SSG静态站点生成

用户体验优化，通过预加载关键资源、骨架屏、预渲染来优化用户体验。

针对大量数据的渲染优化，通过分页、虚拟列表、虚拟表格，canvas优化性能。