性能优化题
本文件按题型收录 性能优化题 相关前端面试题索引。 共收录 240 道题（基础 13 / 进阶 115 / 深入 89 / 架构 23）。 每道题都附带完整参考答案与评分维度，点击链接可查看原文。
基础题（13 道）
Browser（1 道）
构建工具（1 道）
Vue（1 道）
AI 工程化（1 道）
开发者体验与工程效能（1 道）
部署与 SRE（1 道）
包管理与供应链安全（1 道）
前端运维与监控（1 道）
可观测性（2 道）
可视化与图形（1 道）
WebAssembly（1 道）
多媒体（Multimedia）（1 道）
进阶题（115 道）
Browser（9 道）
- FB-03-PE-A-001 如何识别并避免布局抖动（Layout Thrashing）？
- FB-03-PE-A-002 什么是关键渲染路径（CRP）？如何优化首屏加载？
- FB-03-PE-A-003 Performance API 中 LCP、FID、CLS 分别衡量什么？如何优化？
- FB-03-PE-A-004 如何通过 PerformanceObserver 采集性能指标？
- FB-03-PE-A-005 浏览器渲染主流程是什么？DOM、CSSOM、Render Tree 的关系？
- FB-03-PE-A-006 什么是 CRP（Critical Rendering Path）？如何优化？
- FB-03-PE-A-007 什么是渲染阻塞资源？如何减少阻塞？
- FB-03-PE-A-008 DNS 预解析和预连接对首屏有什么帮助？
- FB-03-PE-A-009 如何用 PerformanceObserver 采集性能指标？
计算机网络（1 道）
HTML/CSS（2 道）
构建工具（6 道）
- FB-10-PE-A-001 如何优化 Webpack 构建速度？请列举至少 5 种方法。
- FB-10-PE-A-002 如何分析并优化前端打包体积？
- FB-10-PE-A-003 如何针对大型依赖做按需加载和构建优化？
- FB-10-PE-A-004 如何分析 Webpack 构建耗时分布并定位瓶颈？
- FB-10-PE-A-015 如何分析并可视化前端打包体积？
- FB-10-PE-A-016 如何分析和优化 Webpack 构建性能？
CI/CD（1 道）
Vue（1 道）
跨端技术（3 道）
- FB-17-PE-A-009 小程序有哪些常见的性能优化手段？
- FB-17-PE-A-039 跨端应用的首屏加载可以从哪些方面优化？
- FB-17-PE-A-047 React Native 长列表如何优化性能？
AI 工程化（3 道）
- FB-18-PE-A-013 LLM 应用的成本与延迟如何优化？
- FB-18-PE-A-014 如何优化 AI 聊天应用的首屏体验和交互流畅度？
- FB-18-PE-A-047 如何优化前端 RAG 应用的检索延迟？
Node.js / BFF（2 道）
Git 工作流与变更管理（1 道）
开发者体验与工程效能（4 道）
- FB-21-PE-A-011 大型前端项目冷启动慢，如何系统性地分析和优化构建性能？
- FB-21-PE-A-041 如何优化前端项目的依赖安装速度？
- FB-21-PE-A-074 前端项目的 HMR 失效或变慢，如何排查和优化？
- FB-21-PE-A-075 组件库 Monorepo 中 Jest 测试越跑越慢，如何排查与优化
部署与 SRE（2 道）
包管理与供应链安全（2 道）
前端运维与监控（2 道）
系统架构设计（2 道）
微前端（3 道）
性能工程（13 道）
- FB-27-PE-A-001 如何优化 LCP（Largest Contentful Paint）？
- FB-27-PE-A-002 如何优化 CLS（Cumulative Layout Shift）？
- FB-27-PE-A-003 如何优化 INP（Interaction to Next Paint）？
- FB-27-PE-A-004 HTTP 缓存中的强缓存和协商缓存有什么区别？
- FB-27-PE-A-005 首屏加载性能优化清单
- FB-27-PE-A-006 图片性能优化手段
- FB-27-PE-A-007 字体加载优化策略
- FB-27-PE-A-008 如何优化第三方脚本性能
- FB-27-PE-A-009 SPA 路由切换性能优化
- FB-27-PE-A-010 如何减少首屏 JavaScript 体积
- FB-27-PE-A-011 如何优化 Webpack/Vite 构建速度
- FB-27-PE-A-012 关键 CSS 提取与内联策略
- FB-27-PE-A-013 如何优化前端资源加载优先级
质量保障（1 道）
数据与状态管理（3 道）
可观测性（5 道）
- FB-30-PE-A-011 Synthetic 监控与 RUM 有什么区别？
- FB-30-PE-A-012 前端 RUM 指标体系设计
- FB-30-PE-A-013 前端性能监控如何影响性能
- FB-30-PE-A-014 如何监控和优化 LCP
- FB-30-PE-A-015 如何监控前端资源加载
实时与协同（2 道）
国际化（4 道）
- FB-33-PE-A-001 国际化对前端性能的影响及优化
- FB-33-PE-A-002 多语言包的体积优化
- FB-33-PE-A-003 国际化对首屏性能的影响
- FB-33-PE-A-004 多语言资源分包策略
可视化与图形（6 道）
- FB-34-PE-A-012 Canvas 大数据量渲染性能调优：离屏渲染、分层、脏矩形、requestAnimationFrame
- FB-34-PE-A-013 大数据量图表如何优化
- FB-34-PE-A-014 动画性能优化在可视化中的实践
- FB-34-PE-A-015 WebGL 在可视化中的使用时机
- FB-34-PE-A-016 3D 可视化性能优化
- FB-34-PE-A-017 Canvas 离屏渲染优化
Serverless/Edge（3 道）
前端数据工程（2 道）
小程序（7 道）
- FB-45-PE-A-004 小程序分包加载的原理是什么？如何配置？
- FB-45-PE-A-005 小程序性能优化有哪些常用手段？
- FB-45-PE-A-006 微信小程序首屏加载慢，如何系统排查？
- FB-45-PE-A-007 微信小程序如何避免 setData 性能问题？
- FB-45-PE-A-008 微信小程序的渲染层和逻辑层通信优化有哪些？
- FB-45-PE-A-009 微信小程序如何做图片资源优化？
- FB-45-PE-A-010 微信小程序如何做网络请求优化？
鸿蒙 ArkTS / HarmonyOS（4 道）
- FB-46-PE-A-015 鸿蒙中如何进行列表渲染？有哪些性能优化手段？
- FB-46-PE-A-016 鸿蒙应用启动慢如何排查？
- FB-46-PE-A-017 鸿蒙 ArkUI 中如何实现列表性能优化？
- FB-46-PE-A-018 鸿蒙应用如何做内存优化？
Flutter（6 道）
- FB-47-PE-A-007 Flutter 性能优化有哪些常用手段？
- FB-47-PE-A-008 Flutter 应用启动慢如何优化？
- FB-47-PE-A-009 Flutter 列表性能优化有哪些手段？
- FB-47-PE-A-010 Flutter 如何减少 Widget 重建？
- FB-47-PE-A-011 Flutter 包体积如何优化？
- FB-47-PE-A-012 Flutter 中如何优化图片加载和内存？
Electron（1 道）
WebAssembly（4 道）
- FB-49-PE-A-005 如何优化 WebAssembly 的启动时间和运行时性能？
- FB-49-PE-A-006 WebAssembly 模块体积如何优化？
- FB-49-PE-A-007 WebAssembly 与 JavaScript 互操作的性能瓶颈是什么？
- FB-49-PE-A-008 WebAssembly 启动性能如何优化？
WebGPU / 图形学（4 道）
- FB-50-PE-A-015 WebGPU 应用有哪些常见性能优化手段？
- FB-50-PE-A-016 WebGPU 中如何减少 Draw Call 数量？
- FB-50-PE-A-017 WebGPU 应用如何调试性能问题？
- FB-50-PE-A-018 WebGPU 中如何高效管理 Uniform Buffer？
多媒体（Multimedia）（3 道）
低代码（2 道）
行业特化（1 道）
深入题（89 道）
JavaScript（1 道）
TypeScript（1 道）
Browser（4 道）
- FB-03-PE-P-001 为什么 transform 和 opacity 动画通常比 top/left 动画性能更好？
- FB-03-PE-P-002 长任务（Long Tasks）如何影响性能？如何检测和拆分？
- FB-03-PE-P-003 浏览器是如何保证渲染进程安全的？什么是站点隔离（Site Isolation）？
- FB-03-PE-P-004 如何分析并优化首屏加载时间（FCP/LCP）？
计算机网络（3 道）
- FB-04-PE-P-001 将前端项目从 HTTP/2 迁移到 HTTP/3 需要考虑哪些性能与安全因素？
- FB-04-PE-P-002 前端网络性能优化可以从哪些层面入手？
- FB-04-PE-P-003 前端如何测量和优化 TTFB？
HTML/CSS（1 道）
可访问性（a11y）（1 道）
构建工具（4 道）
- FB-10-PE-P-001 大型前端项目构建性能优化实战方案。
- FB-10-PE-P-002 如何设计一个大型前端项目的增量构建方案？
- FB-10-PE-P-017 大型 Monorepo 的构建性能优化有哪些关键手段？
- FB-10-PE-P-018 如何优化 Vite 生产构建速度？
代码质量与测试（2 道）
React（5 道）
- FB-15-PE-P-052 React 中如何实现虚拟列表优化长列表？
- FB-15-PE-P-055 如何优化 React 应用的首屏加载性能？
- FB-15-PE-P-056 React 中如何实现虚拟列表优化长列表？
- FB-15-PE-P-057 React 中如何避免 context 导致的性能问题？
- FB-15-PE-P-058 React 中的代码分割策略有哪些？
Vue（4 道）
- FB-16-PE-P-023 Vue 应用有哪些性能优化手段？
- FB-16-PE-P-024 Vue 应用首屏加载性能如何系统优化？
- FB-16-PE-P-025 Vue 长列表虚拟滚动实现
- FB-16-PE-P-026 Vue 应用构建产物优化
跨端技术（4 道）
- FB-17-PE-P-020 跨端动画性能如何保证一致性？
- FB-17-PE-P-051 跨端应用的内存优化和泄漏治理怎么做？
- FB-17-PE-P-056 跨端应用的包体积优化有哪些深入手段？
- FB-17-PE-P-057 跨端应用包体积优化有哪些深入手段？
AI 工程化（5 道）
- FB-18-PE-P-020 多模态 AI 和 Edge AI 如何在前端落地？
- FB-18-PE-P-021 如何对 LLM 应用做全链路性能剖析？
- FB-18-PE-P-057 如何对 LLM 推理链路进行性能剖析与优化？
- FB-18-PE-P-058 大模型应用的性能优化有哪些手段？
- FB-18-PE-P-059 如何保证 LLM 返回的结果可以被前端稳定渲染？
Node.js / BFF（4 道）
- FB-19-PE-P-050 如何定位并优化 Node.js 服务的 CPU 高占用问题？
- FB-19-PE-P-055 Node.js 中如何对大文件进行流式上传、下载与断点续传？
- FB-19-PE-P-056 Node.js 服务如何做性能调优？
- FB-19-PE-P-057 Node.js 高并发优化
Git 工作流与变更管理（4 道）
- FB-20-PE-P-018 面对超大型仓库，Git 有哪些优化手段？
- FB-20-PE-P-050 面对超大型仓库，有哪些 Git clone 加速策略？
- FB-20-PE-P-055 shallow clone 和 git filter-repo 各适用于什么场景？
- FB-20-PE-P-056 超大型仓库 clone 加速策略
开发者体验与工程效能（2 道）
部署与 SRE（2 道）
前端运维与监控（1 道）
微前端（2 道）
性能工程（18 道）
- FB-27-PE-P-001 浏览器渲染管线是怎样的？如何利用合成层（Compositor Layer）优化渲染性能？
- FB-27-PE-P-002 如何优化 JavaScript 执行性能？请从任务调度、长任务拆分、主线程释放等角度说明。
- FB-27-PE-P-003 如何排查和优化前端内存泄漏？
- FB-27-PE-P-007 字体加载优化有哪些策略？FOUT、FOIT、FOF 分别是什么？
- FB-27-PE-P-008 你如何分析一个页面的性能瓶颈？
- FB-27-PE-P-009 Service Worker 如何提升性能？有哪些注意事项？
- FB-27-PE-P-010 什么是关键渲染路径？如何优化？
- FB-27-PE-P-011 图片优化有哪些常用手段？
- FB-27-PE-P-012 如何优化首屏加载时间？
- FB-27-PE-P-013 什么是长任务（Long Task）？如何优化？
- FB-27-PE-P-014 你如何制定性能预算（Performance Budget）？
- FB-27-PE-P-015 如何优化大型列表渲染性能
- FB-27-PE-P-016 如何减少 JavaScript 执行时间
- FB-27-PE-P-017 CSS 性能优化与渲染层管理
- FB-27-PE-P-018 内存泄漏的常见原因与排查
- FB-27-PE-P-019 前端性能监控指标体系设计
- FB-27-PE-P-020 如何优化大量 marker 的地图性能
- FB-27-PE-P-021 Web Worker 在性能优化中的应用
质量保障（1 道）
可观测性（2 道）
实时与协同（3 道）
国际化（1 道）
可视化与图形（4 道）
- FB-34-PE-P-019 地理/地图可视化中，如何处理大规模 GeoJSON、投影变换与瓦片化？
- FB-34-PE-P-022 可视化动画与性能：requestAnimationFrame、补间、时间轴与 Web Animations API 如何选型？
- FB-34-PE-P-023 可视化大屏的渲染性能优化
- FB-34-PE-P-024 Canvas 高清屏渲染优化
小程序（3 道）
- FB-45-PE-P-002 小程序启动性能优化和白屏优化有哪些方案？
- FB-45-PE-P-003 小程序包体积优化有哪些手段？如何分析体积？
- FB-45-PE-P-006 小程序 SSR、预渲染和骨架屏的实践方案是什么？
鸿蒙 ArkTS / HarmonyOS（1 道）
Flutter（1 道）
Electron（1 道）
WebGPU / 图形学（1 道）
多媒体（Multimedia）（2 道）
低代码（1 道）
架构题（23 道）
TypeScript（1 道）
HTML/CSS（1 道）
构建工具（1 道）
AI 工程化（1 道）
开发者体验与工程效能（1 道）
部署与 SRE（2 道）
包管理与供应链安全（1 道）
微前端（3 道）
性能工程（8 道）
- FB-27-PE-R-001 性能优化中，Lab 数据和 RUM 数据有什么区别？应该如何结合使用？
- FB-27-PE-R-002 你如何处理第三方脚本对性能的影响？
- FB-27-PE-R-003 在团队中如何推动性能优化落地？
- FB-27-PE-R-005 现代前端框架（如 React 18）提供了哪些性能优化特性？
- FB-27-PE-R-006 如何平衡性能优化和开发效率？
- FB-27-PE-R-007 设计一个前端性能治理体系
- FB-27-PE-R-008 如何优化前端包体积
- FB-27-PE-R-009 前端性能优化的顶层方法论