标签题目
前端性能相关面试题
列表的优化
这题考察前端性能定位和大列表治理。回答要先判断瓶颈来源，再按数据、渲染、更新、资源和交互体验分层优化。
CSS 动画，JS 动画和 Three.js 动画有什么区别？
这题考察动画方案选型。回答要比较 CSS、JS 和 Three.js 的表达能力、渲染路径、控制能力、性能成本和适用场景。
了解重排和重绘吗？
这题考察浏览器渲染链路和性能优化。回答要区分重排、重绘、合成，并说明常见触发条件、强制同步布局和优化手段。
INP 和 TTFB 是什么？
这题考察性能指标理解。INP 衡量交互响应延迟，TTFB 衡量首字节到达时间，回答要说明定义、影响因素、定位方法和优化方向。
如何收集性能数据？
这题考察前端性能监控体系。回答要区分实验室数据和真实用户数据，说明 Performance API、PerformanceObserver、业务上下文和可靠上报策略。
memo, useMemo, useCallback 分别是干什么的？
这题考察 React 记忆化优化边界。回答要区分组件跳过渲染、值缓存和函数引用稳定，并说明命中条件和成本。
什么场景下需要缓存？
这题考察缓存取舍。回答要说明什么值得缓存、缓存放在哪一层、key 和失效策略怎么设计，以及脏数据风险。
我把所有的组件都用 memo 包起来有什么问题？
这题考察 React 过度优化判断。回答要说明 memo 的比较成本、命中条件、引用稳定性、依赖复杂度和 Profiler 驱动优化。
浏览器强缓存和协商缓存分别依赖哪些 HTTP 头？
浏览器强缓存主要依赖响应头 Cache-Control 和 Expires，协商缓存主要依赖 ETag/If-None-Match 与 Last-Modified/If-Modified-Since。Cache-Control 的优先级通常高于 Expires，ETag 的优先级通常高于 Last-Modified。
强缓存和协商缓存有什么区别？
强缓存和协商缓存的根本区别在于是否向服务器发请求。强缓存有效时浏览器直接使用本地副本；协商缓存需要发条件请求，由服务器判断资源是否变化，未变化返回 304。
影响前端首屏性能的关键因素有哪些？
前端首屏性能受网络链路、服务端响应、资源体积、渲染阻塞 CSS、JavaScript 下载和执行、图像与字体、接口数据依赖、缓存策略、第三方脚本、设备算力和框架水合成本共同影响。优化首屏要围绕关键渲染路径，优先让首屏所需 HTML、关键 CSS、必要 JS、核心数据和 LCP 资源尽快可用。
懒加载和虚拟列表如何优化首屏性能？
懒加载通过延后非首屏图像、组件、路由和数据请求，减少首屏需要下载和执行的资源；虚拟列表通过只渲染视口附近的列表项，减少 DOM 数量、布局计算和绘制成本。两者都能优化首屏，但前提是不要延后首屏核心内容，并要处理占位尺寸、预加载、滚动体验和可访问性。
前端监控系统应该如何实现？
前端监控的核心不是简单收集日志，而是建设一套从 SDK 采集、数据清洗、可靠上报、服务端聚合、指标分析、告警响应到问题复盘的闭环体系。它通常覆盖错误监控、性能监控、用户行为埋点、接口质量、业务转化、环境信息和隐私合规。面试回答时要强调：监控目标先于技术实现，数据质量先于数据规模，告警闭环先于报表展示。
有考虑过什么情况下服务器压力会过大？
服务器压力过大本质上不是“访问量大”这一件事，而是系统在当前容量下无法稳定满足目标延迟、吞吐和错误率要求。常见原因包括流量突增、请求复杂度升高、CPU 或内存耗尽、磁盘和网络 IO 瓶颈、数据库慢查询与锁等待、缓存失效、线程池或连接池耗尽、下游依赖变慢、重试放大以及缺少限流降级和弹性扩容能力。面试回答时应从“压力来源、瓶颈位置、观测指标、保护手段、扩容治理”几个层次展开。