前端面试题：性能优化与工程实践

1. 前端性能常见指标有哪些？

• FCP（First Contentful Paint）：首屏内容渲染时间。
• LCP（Largest Contentful Paint）：最大内容渲染时间。
• CLS（Cumulative Layout Shift）：累计布局偏移。
• TBT（Total Blocking Time）：总阻塞时间。
• FID（First Input Delay）：首次输入延迟。

2. 如何优化首屏加载？

• 减少关键资源大小。
• 使用 preload 预加载关键 CSS/JS。
• 延迟加载非关键脚本和图片（懒加载）。
• 简化首屏渲染路径。

3. 什么是代码分割？

• 把大型应用拆分成多个按需加载的 chunk。
• 常用工具：Webpack 动态 import()、Vite、Rollup。
• 可以减少首屏 JS 体积。

4. 资源缓存策略怎么设计？

• 静态资源使用强缓存：Cache-Control: max-age。
• 版本化资源避免缓存问题：app.abc123.js。
• HTML 资源可以设置短缓存或不缓存。

5. HTTP/2 和 HTTP/3 对前端优化有什么帮助？

• HTTP/2 支持多路复用，减少连接数。
• HTTP/3 基于 QUIC，降低握手延迟。
• 适合大量小资源的传输场景。

6. 如何优化图片加载？

• 使用适当格式：WebP/AVIF 替代 PNG/JPG。
• 使用 srcset 和 sizes 提供响应式图片。
• 启用懒加载：loading="lazy"。
• 使用图片占位符和渐进加载。

7. 如何避免长时间主线程阻塞？

• 拆分大任务、减少复杂计算。
• 使用 requestIdleCallback 或 Web Worker。
• 避免过多同步 JavaScript 执行。

8. 前端工程化中常见的问题是什么？

• 构建时间过长。
• 依赖版本冲突。
• 资源定位与 CDN 发布策略。
• 开发环境与生产环境差异。

9. 如何提高应用可观测性？

• 采集前端性能指标并上报。
• 使用日志、埋点与错误监控。
• 配置打点埋点、异常统计和用户行为分析。