优化首屏渲染

减小资源体积
- 代码压缩：压缩 JS/CSS（Webpack 的 TerserPlugin、CSSNano）。
- Tree Shaking：删除未使用代码（Vue/React 配合 ES Module）。
- 图片优化：使用 WebP、懒加载（<img loading="lazy" />）、CDN 压缩服务（如 ImageKit）。
- 字体精简：按需加载字体子集（工具：Font Squirrel）。
减少关键资源数量
- 内联关键 CSS：将首屏所需 CSS 内联到 HTML 中（避免 HTTP 请求）。
- 异步加载非关键 JS：使用 async 或 defer 属性延迟加载 JS。
- 按需加载第三方库：如通过 import() 动态加载 ECharts、Monaco Editor。
利用浏览器缓存
- 强缓存（Cache-Control）：对静态资源设置长缓存（如 max-age=31536000）。
- 内容哈希化：构建时文件名带哈希（如 app.abc123.js），确保内容更新后文件名变化。
预加载关键资源
- <link rel="preload"> 提前加载字体、CSS 或核心 JS：
```
<link rel="preload" href="critical.css" as="style" />
<link rel="preload" href="main.js" as="script" />
```
- HTTP/2 Server Push：服务端主动推送关键资源（需服务端支持）。

优化关键渲染路径（CRP）
- 缩减 DOM 深度：简化 HTML 结构，减少嵌套层级。
- 避免阻塞渲染的 CSS：
  - 内联关键 CSS 或拆分首屏样式（通过构建工具提取）。
  - 避免使用 @import 嵌套 CSS（增加请求链）。
延迟非必要内容
- 图片懒加载：首屏外图片延迟加载（原生支持 loading="lazy" 或 IntersectionObserver）。
- 组件懒加载：通过动态导入（() => import('Component')）按需加载路由或组件。
优化 JavaScript 执行
- 避免长任务：拆分代码逻辑，用 Web Worker 处理计算密集型任务。
- 时间切片（Time Slicing）：通过 requestIdleCallback 或 setTimeout 分片执行任务。
减少重排与重绘
- 使用 transform 和 opacity 做动效（避免触发重排）。
- 批量 DOM 操作：通过 DocumentFragment 或 Vue/React 的虚拟 DOM 合并更新。

服务端渲染（SSR）
- 框架方案：Vue 的 Nuxt.js、React 的 Next.js 首屏直出 HTML。
- 优点：缩短白屏时间，利于 SEO。
静态站点生成（SSG）
- 场景：内容为主的博客、文档站（如 VuePress、Gatsby）。
- 构建时生成 HTML，无需实时渲染。
边缘渲染（Edge SSR）
- 通过 CDN 边缘节点运行 SSR（如 Cloudflare Workers、Vercel Edge Functions），加速全球访问。
启用 HTTP/2 或 HTTP/3
- 多路复用：减少连接数，提升资源加载效率。

代码分割（Code Splitting）

路由懒加载：

// Vue Router
const Home = () => import('./Home.vue');

// React Router (React 18+)
const Home = React.lazy(() => import('./Home'));

静态资源优先加载
- 预取/预加载：使用 webpackPreload 或 webpackPrefetch 标记优先级：
```
import(/* webpackPreload: true */ './critical.js');
```
优化框架启动开销
- 缩小框架体积：Vue 3 的 @vue/runtime-core 按需编译。
- 状态管理按需加载：如仅首屏需要的 Pinia store 才初始化。

利用浏览器缓存策略
- Service Worker：PWA 应用通过 Workbox 缓存关键资源。
- LocalStorage 缓存 API 数据：对不常变的数据本地存储。
骨架屏（Skeleton Screen）
- 方案：在数据加载前展示页面结构占位（减少用户感知到的等待时间）。
- 实现：手动编写骨架屏组件，或使用 v-skeleton-loader（Vue）等库。
优化网络传输
- 启用 Brotli/Gzip 压缩：服务端配置静态资源压缩。
- 使用 CDN 加速：分发静态资源到全球节点。
性能监控与分析
- 工具：
  - Lighthouse 检测首屏性能
  - Web Vitals 监控 Core Web Vitals 指标
  - Sentry 跟踪运行时性能问题

FilesExpand file tree