基于前端性能优化视角，AI 爆款文章创作器项目在哪些方面存在可改进的空间？
考察说明
考察候选人对前端性能优化体系的掌握，以及能否结合具体项目场景提出可落地的优化方案。
回答思路
- 【回答框架 1】性能优化可从加载性能、渲染性能、运行时性能三个维度展开。加载性能方面，优先关注首屏资源体积与请求数量，可对项目进行打包分析，拆分路由级代码块，利用动态 import 实现按需加载；对静态资源开启 gzip 或 brotli 压缩，并配置 HTTP 缓存策略。
- 【回答框架 2】渲染性能方面，针对 AI 文章创作这类可能包含长列表、富文本或流式输出的场景，需关注 DOM 节点数量与更新频率。可使用虚拟滚动渲染长列表，对频繁变化的组件（如实时预览区）进行防抖或节流，并借助 v-once、v-memo 等指令减少不必要的重渲染。
- 【回答框架 3】运行时性能方面，需检查是否存在内存泄漏或过度的计算任务。例如，复杂文本解析或关键词高亮可放到 Web Worker 中执行，避免阻塞主线程；同时避免在模板中编写复杂表达式，对计算属性进行合理的缓存。
- 【回答框架 4】还可结合性能监控工具，如 Lighthouse、Performance API，量化当前指标并设定优化目标。核心 Web 指标（LCP、INP、CLS）应作为优先改进的对象，例如优化图片加载方式（懒加载、响应式图片）、预加载关键资源、优化字体加载策略。
- 【关键点 1】加载性能：代码分割、懒加载、资源压缩与缓存。
- 【关键点 2】渲染性能：虚拟滚动、防抖节流、减少不必要的重渲染。
- 【关键点 3】运行时性能：Web Worker 处理复杂计算，避免主线程阻塞。
- 【关键点 4】使用性能监控工具量化指标，优先优化核心 Web 指标（LCP、INP、CLS）。
- 【关键点 5】根据项目实际数据（如页面体积、请求数）制定针对性优化措施。
- 【易错点 1】不要盲目使用微前端或过度优化，增加维护成本。
- 【易错点 2】避免在优化时忽略业务功能，性能优化需在可测试性和用户体验之间平衡。
- 【易错点 3】不能只依赖单一指标，需综合评估加载、渲染、运行时的整体表现。