前端数据指标

通常需要一些数据，来描述自己所做的收益，俗话讲就是需要会“吹”。所以，下面会列出一些前端需要关注的数据指标，来论证一些经历。

页面数据篇

代码压缩体积

这个就是指在构建后，代码的体积数据是怎样的，通常，这个可以作为一个优化点去优化，比如在减少重复依赖，去掉重复版本依赖后，代码体积减少 xx KB ，从而对于首屏加载上网络影响减少了多少啥的。

First Contentful Paint (FCP)

表示浏览器从用户输入 URL 到渲染页面首个内容的时间。在移动端上，可以理解为从 webview 容器创建到页面渲染这个阶段的耗时。

影响 FCP 的因素有很多，比如网络快慢、代码体积大小、是否有缓存、容器是否预加载等等。

优化手段有如下一些：

• 使用骨架屏：在没有服务端数据时，可以用骨架屏先渲染。
• 脚本代码并行下载，使用 script 标签的 defer、async 属性。
• 网络优化，资源使用 CDN、压缩图片体积、图片懒加载。

Largest Contentful Paint (LCP)

优化方向：

• 文档下载解析
• 样式资源加载解析
• 图片等静态资源下载：FCP 资源预加载、CDN、缓存
• 元素渲染：减少不必要元素渲染
• js 资源：tree shaking，压缩等方式、服务端渲染
• SSR