⚡ 前端性能优化高频考题

共 28 道题目，涵盖性能指标、React/Vue 优化、监控体系、Web3 场景等

📊 性能指标

Core Web Vitals、LCP、FID、CLS 等

Q1.你所了解到的前端性能指标都有哪些？Q2.如何用代码获取 FCP？指标分数段？怎么提升？有 Demo Q3.如何用代码获取 LCP？指标分数段？怎么提升？Q4.如何用代码获取 CLS？指标分数段？怎么提升？Q5.如何用代码获取 TTI？指标分数段？怎么提升？Q6.如何用代码获取 FID？指标分数段？怎么提升？React 和 Vue 有什么差异？Q7.如何用代码获取 TTFB？指标分数段？怎么提升？Q8.如何用代码获取 TBT？指标分数段？怎么提升？Q16.performance.timing 能拿到哪些关键时间点？

🚀 通用优化策略

优化思路、工程实践、权衡取舍

Q9.性能优化有哪些思路？说说你了解的性能优化手段？Q25.在做性能优化时，你如何权衡"代码可读性/开发效率"和"极致性能"？Q26.如果要你主导一次"性能优化专项"，你会怎么定计划？Q28.图片优化有哪些常见手段？如何实现懒加载？

⚛️ React / Vue 优化

框架级优化、useTransition、虚拟列表等

Q10.React 在开发过程中的性能优化策略？Q11.Vue 在开发过程中的性能优化策略？Q13.React useTransition 在实际工程中的优化作用？如何落地？Q15.@welldone-software/why-did-you-render 的原理是什么？Q27.虚拟列表是如何实现的？什么场景下使用？有 Demo

🔍 监控与调试

性能监控平台、接口监控、数据采集

Q12.如何设计一个前端监控体系？数据采集和清洗怎么做？有 Demo Q14.如何监控一个接口的返回时间与是否出错？

🌐 Web3 场景优化

RPC 优化、实时数据、乐观更新等

Q17.Web3 dApp 相比普通 Web，在前端性能上多了哪些"特别慢"的地方？Q18.前端调用链上接口 / RPC 时，如何减少延迟和资源消耗？Q19.交易所前端需要频繁更新价格/盘口，你会如何设计推送/订阅机制以兼顾性能？Q20.你会如何处理"交易发起了，但链上还没确认"的前端体验和性能问题？Q21.在 Web3 项目中，你如何区分"链上状态"和"本地 UI 状态"，从而更好做性能优化？Q22.连接钱包（MetaMask 等）这一步，前端怎么做得既快又不影响整体性能？

🐛 问题排查

网络调试、内存泄漏、性能分析

Q23.首屏加载慢，你会从"网络层面"具体检查哪些点？Q24.页面运行久了越来越卡，甚至内存飙升，你怎么排查？