工程化、测试与性能

复习方式：先遮住答案口述 30～90 秒，再核对关键点；“追问与易错点”用于进一步练习。

1. 构建工具主要解决什么问题？

展开答案与追问

参考答案： 处理模块依赖、语法与类型转换、样式和资源、代码拆分、压缩及开发服务。开发环境与生产构建的执行路径可能不同。工具选型围绕项目兼容性、生态、速度和维护成本，而非只比较启动时间。

追问与易错点： TypeScript 转译不一定执行类型检查，需要单独保证类型检查进入 CI。

2. Tree shaking 与代码拆分有何区别？

展开答案与追问

参考答案： Tree shaking 根据静态模块结构及副作用信息删除未使用代码；代码拆分把代码分成可按需加载的块。动态 import 常用于路由或低频功能懒加载。错误声明 sideEffects 可能使必要 CSS 或初始化代码被删除。

追问与易错点： 拆包过碎也可能增加请求和执行调度开销，应根据分析报告调整。

3. 如何优化首屏？

展开答案与追问

参考答案： 先测量瓶颈：网络、资源体积、主线程、服务端响应或渲染链。再采取压缩与缓存、关键资源优先、路由拆包、图片尺寸与格式优化、减少阻塞脚本，必要时评估 SSR/预渲染。用同等设备和网络条件对比优化前后。

追问与易错点： 首屏关键图片不应机械使用懒加载；预加载也要避免争抢带宽。

4. 性能指标与诊断指标如何区分？

展开答案与追问

参考答案： LCP 关注主要内容显示，INP 关注交互响应，CLS 关注布局稳定；实验室里还可用 TBT 等辅助诊断。真实用户分布与实验室一次跑分不同，要按页面、设备和网络分组分析。

追问与易错点： 给图片预留空间减少 CLS；拆分长任务和减少渲染工作改善交互体验。

5. 长列表如何优化？

展开答案与追问

参考答案： 先使用分页或分段加载；大量可见 DOM 才考虑虚拟列表，仅渲染视口及缓冲区域。动态高度、滚动位置恢复、键盘访问、搜索和打印都需要额外处理。

追问与易错点： 无限滚动只限制请求方式，不会自动限制 DOM 数量。

6. 单元、集成与端到端测试如何分工？

展开答案与追问

参考答案： 单元测试验证独立逻辑，集成测试验证模块协作，端到端测试验证真实用户关键路径。优先覆盖金额、权限、状态转换和错误恢复等风险；不要把内部实现细节锁死。

追问与易错点： 异步测试应等待可观察结果，避免用任意固定 sleep；Mock 不能替代全部真实集成。

7. CI/CD 与发布质量如何保证？

展开答案与追问

参考答案： 流水线执行依赖安装、静态检查、类型检查、必要测试和构建，保存可追溯产物。发布配合灰度、监控和回滚，前后端接口保持合理兼容。静态资源先上传，再切换入口，避免引用尚不存在的文件。

追问与易错点： 内容哈希资源保留一定时间，减少旧页面加载新版本时的资源丢失。

8. SSR、CSR 与 hydration 有什么区别？

展开答案与追问

参考答案： CSR 主要由客户端生成页面；SSR 在服务端生成 HTML，再由客户端 hydration 接管交互。SSR 可改善内容可见性，但增加服务端成本、缓存和一致性复杂度。服务端与客户端初次输出不一致会导致 hydration 问题。

追问与易错点： 时间、随机值、浏览器专属 API 和个性化缓存都容易造成问题。