面试题：Vue项目结合服务端渲染（SSR）的网络请求优化

性能瓶颈
- 高并发请求压力：大量客户端同时发起请求，服务端处理能力有限，可能导致响应延迟甚至崩溃。
- 请求重复：不同组件或同一组件不同生命周期阶段发起相同请求，浪费资源。
- 数据库负载：频繁的数据库查询，可能导致数据库性能下降。
优化方案
- 请求合并：
  - 手动合并：在服务端代码中，对于一些逻辑相关的请求，可以手动将其合并为一个请求。例如，同时需要获取用户基本信息和用户权限信息，可以合并为一个SQL查询。
  - 中间件合并：使用中间件来检测相同类型的请求，将多个请求合并为一个。例如，使用axios - interceptors在请求发送前对请求进行合并处理。
- 缓存机制：
  - 内存缓存：在服务端使用内存缓存（如node - cache），将频繁请求且不经常变化的数据缓存起来。例如，一些配置信息、静态数据等。
  - 分布式缓存：对于大型应用，可以使用分布式缓存（如Redis），提高缓存的可用性和扩展性。
- 优化数据库查询：
  - 索引优化：对经常查询的字段添加合适的索引，提高查询效率。
  - 批量操作：对于需要多次对数据库进行相同类型操作的情况，使用批量操作代替多次单条操作。例如，使用INSERT INTO... VALUES (...),(...),(...)代替多次单条INSERT。

性能瓶颈
- 客户端激活时的重复请求：在客户端激活阶段，可能会重新发起在服务端已经获取过的数据请求。
- 资源加载顺序问题：关键资源（如脚本、样式）加载顺序不当，导致页面渲染延迟。
- 网络不稳定：客户端网络波动，导致请求失败或延迟。
优化方案
- 客户端激活时的请求优化：
  - 数据传递：在服务端渲染时，将已获取的数据通过window.__INITIAL_STATE__等方式传递给客户端。客户端激活时，优先从这个对象中获取数据，避免重复请求。
  - 状态管理：结合Vuex等状态管理工具，在客户端激活时检查状态是否已经存在数据，如果存在则不再发起请求。
- 资源加载优化：
  - 异步加载：对于非关键脚本，使用async或defer属性进行异步加载，避免阻塞页面渲染。例如<script async src="script.js"></script>。
  - 预加载：使用<link rel="preload">对关键资源进行预加载，如字体文件、图片等，提高资源加载速度。
- 处理网络不稳定：
  - 重试机制：在请求失败时，使用axios - interceptors等机制实现自动重试。例如，设置最大重试次数和重试间隔时间。
  - 缓存策略：在客户端使用浏览器缓存（如localStorage、sessionStorage），对于一些不经常变化的数据，优先从缓存中读取。

性能瓶颈
- 数据更新不及时：预渲染的数据在页面加载后可能已经过时，导致用户看到的数据不准确。
- 预渲染时间过长：如果预渲染的数据量过大或者获取数据的逻辑复杂，可能导致预渲染时间过长，影响页面生成速度。
优化方案
- 增量更新：在客户端激活后，通过对比预渲染的数据和最新数据，只更新发生变化的部分。例如，使用Diff算法对比前后数据。
- 优化预渲染逻辑：对预渲染的数据进行筛选，只获取当前页面首屏展示所必需的数据，减少预渲染的数据量。同时，优化获取数据的逻辑，提高数据获取速度。

星途面试题库