前端性能优化相关面试题及答案
什么是前端性能优化？为什么性能优化很重要？
前端性能优化指通过技术手段减少页面加载时间、提升交互响应速度，优化用户体验的过程。
重要性：
① 提升用户体验（减少等待时间，降低跳出率）；
② 提高转化率（性能好的网站用户留存率更高）；
③ 改善 SEO 排名（Google 等搜索引擎将性能作为排名因素）；
④ 减少服务器压力（降低资源请求量）。衡量前端性能的核心指标有哪些？分别代表什么含义？
核心 Web 指标（Core Web Vitals）：
LCP（最大内容绘制）：页面加载过程中，最大内容元素（如图片、文本块）完成渲染的时间，反映加载性能（目标 < 2.5 秒）。
FID（首次输入延迟）：用户首次与页面交互（如点击按钮）到浏览器响应的时间，反映交互性能（目标 < 100 毫秒）。
CLS（累积布局偏移）：页面生命周期中所有意外布局偏移的总和，反映视觉稳定性（目标 < 0.1）。
其他指标：TTFB（首字节时间，服务器响应速度）、DOMContentLoaded（DOM 加载完成时间）、Load（页面完全加载时间）。
- 如何优化页面的加载速度？
减少资源体积：
- ① 压缩 JS/CSS（使用 Terser、CSSNano）；
- ② 图片优化（压缩图片、使用 WebP/AVIF 格式、响应式图片）；
- ③ 移除未使用代码（Tree-Shaking）。
减少请求数量：
- ① 合并资源（JS/CSS 合并）；
- ② 使用 CSS Sprite（合并小图标）；
- ③ 字体图标替代图片图标。
优化资源加载：
- ① 懒加载（图片、视频、路由组件）；
- ② 预加载（关键资源用
<link rel="preload">）； - ③ 预连接（第三方域名用
<link rel="preconnect">）。
利用缓存：
① 强缓存（Cache-Control: max-age=31536000）；
② 协商缓存（ETag/Last-Modified）；
③ Service Worker 缓存。
- 图片优化有哪些具体方法？
格式选择：
① 照片用 WebP/AVIF（比 JPEG 小 30%+）；
② 透明图用 WebP/PNG-8；
③ 简单图形用 SVG（矢量图，无损缩放）。压缩处理：
① 工具压缩（TinyPNG、Squoosh）；
② 服务端动态压缩（根据设备返回合适尺寸）。加载策略：
① 懒加载（loading="lazy"属性或 JS 实现，滚动到可视区再加载）；
② 响应式图片（srcset+sizes，根据屏幕宽度加载不同尺寸）；
③ 低质量占位符（LQIP，先加载模糊缩略图）。避免不必要图片：用 CSS 绘制简单图形（如渐变、阴影），字体图标替代小图标。
- 如何优化 CSS 性能？
选择器优化：
① 避免复杂选择器（如嵌套过深、通配符*）；
② 优先使用 ID / 类选择器，减少标签选择器。样式表加载：
① 内联关键 CSS（Critical CSS，首屏必需样式）；
② 非关键 CSS 异步加载（media="print"+JS 切换）；
③ 避免@import（阻塞并行下载）。渲染优化：
① 避免使用box-shadow、filter等昂贵属性（触发频繁重绘）；
② 动画用transform/opacity（仅触发合成层，不回流）；
③ 减少float和position: absolute的滥用（影响布局效率）。
- JavaScript 性能优化有哪些方法？
执行效率：
① 减少不必要的计算（缓存计算结果）；
② 避免同步阻塞（用 Web Worker 处理耗时任务）；
③ 优化循环（减少循环次数、避免循环内操作 DOM）。加载优化：
① 异步加载（async/defer）；
② 代码分割（路由懒加载，import()动态导入）；
③ 避免大型库全量引入（按需导入，如 Lodash 的lodash-es）。内存管理：
① 避免内存泄漏（及时清除定时器、事件监听）；
② 减少全局变量（用局部变量替代）；
③ 合理使用闭包（避免长期持有大对象）。
- 什么是懒加载和预加载？它们的使用场景有什么区别？
懒加载：延迟加载非首屏资源，只有当资源进入可视区时才加载（如长列表图片、滚动加载的内容）。
场景：节省带宽，提升首屏加载速度，适用于图片多、内容长的页面（如电商列表、新闻资讯）。
预加载：提前加载未来可能用到的资源（如当前页面即将跳转的下一页资源）。
场景：提升后续操作的响应速度，适用于已知用户行为的场景（如首页预加载登录页资源、视频缓冲）。
实现：懒加载用
IntersectionObserver或滚动事件；预加载用<link rel="preload">（关键资源）或<link rel="prefetch">（低优先级资源）。
- 如何减少 DOM 操作的性能消耗？
批量操作 DOM：
① 用documentFragment临时存储节点，再一次性插入 DOM；
② 先将元素设为display: none，修改后再显示（减少回流）。避免频繁查询 DOM：
① 缓存 DOM 查询结果（const el = document.querySelector('#id')）；
② 减少offsetWidth等布局属性的读取（每次读取可能触发回流）。优化 DOM 结构：
① 减少 DOM 嵌套深度（扁平化结构）；
② 移除无用节点（如隐藏的display: none元素）；
③ 使用虚拟列表（如vue-virtual-scroller，只渲染可视区节点）。使用 DocumentFragment 或克隆节点：修改前克隆节点，修改后替换原节点，减少现场操作。
- 如何优化动画性能？
选择高效动画属性：用
transform（translate/scale/rotate）和opacity实现动画，这两个属性仅触发合成层，不触发回流或重绘。避免过度动画：
① 减少同时运行的动画数量；
② 限制动画帧率（如 30fps 足够，60fps 可能浪费性能）。使用 CSS 动画替代 JS 动画：CSS 动画由浏览器主线程外的合成线程处理，性能更优；JS 动画需频繁操作 DOM，易阻塞主线程。
提升动画元素层级：用
will-change: transform或transform: translateZ(0)触发 GPU 加速（创建独立合成层），但避免滥用（增加内存消耗）。
什么是代码分割（Code Splitting）？如何实现？
代码分割指将代码拆分为多个小块（chunk），按需加载，减少初始加载体积。
实现方式：
路由级分割：用
React.lazy+Suspense（React）或import()（Vue Router），路由切换时加载对应模块。示例（Vue）：
const Home = () => import('./Home.vue')。组件级分割：对大型组件（如弹窗、图表）单独分割，使用时动态导入。
库分割：Webpack 通过
splitChunks配置，将node_modules中的库拆分为独立 chunk（如vendors.js），利用缓存。优势：减少首屏 JS 体积，提升加载速度；缓存复用（库代码不常变动，可长期缓存）。
- 如何优化首屏加载体验？
减少首屏资源：
① 内联关键 CSS（避免外部 CSS 阻塞渲染）；
② 延迟加载非首屏 JS（如广告、统计脚本）。提升服务器响应速度：
① 使用 CDN（就近节点分发资源）；
② 服务器端渲染（SSR）或静态站点生成（SSG，如 Next.js、Nuxt.js），直接返回 HTML。优化加载状态：
① 显示骨架屏（Skeleton Screen）替代白屏；
② 加载指示器（进度条、 spinner）告知用户状态；
③ 预渲染首屏内容（静态生成首屏 HTML）。优先加载核心功能：首屏只加载必要内容，其他功能异步加载（如 “渐进式加载”）。
- 什么是服务器端渲染（SSR）和客户端渲染（CSR）？它们的性能差异是什么？
客户端渲染（CSR）：浏览器下载 HTML、JS 后，由 JS 动态生成 DOM 并渲染（如 React/Vue 单页应用）。
缺点：首屏加载慢（需等待 JS 下载并执行）；SEO 不友好（搜索引擎难爬取动态内容）。
服务器端渲染（SSR）：服务器将组件渲染为 HTML 字符串，直接返回给浏览器，浏览器只需展示（如 Next.js、Nuxt.js）。
优点：首屏加载快（HTML 直接渲染）；SEO 友好；缺点：服务器压力大，开发复杂。
性能差异：SSR 首屏 LCP 更小（加载更快），CSR 适合交互复杂的应用（后续操作响应快）。
- 如何优化移动端性能？
适配优化：
① 合理设置视口（meta viewport）；
② 用rem/vw实现响应式布局，避免固定像素。资源适配：
① 提供小尺寸图片（移动端屏幕小）；
② 简化 DOM 结构（减少节点数量）。触摸优化：
① 减少touch事件监听（用click替代，或添加 300ms 延迟兼容）；
② 避免触摸反馈延迟（如用touch-action控制）。电量优化：
① 减少 JS 执行时间（避免频繁定时器）；
② 降低动画复杂度（减少 GPU 消耗）；
③ 关闭非必要的地理位置、陀螺仪等 API。
- 如何检测和定位前端性能问题？
浏览器工具：
① Chrome DevTools（Performance 面板录制性能数据，分析长任务、回流等；Network 面板查看资源加载时间）；
② Lighthouse（生成性能报告，包含指标得分和优化建议）。监控工具：
① 真实用户监控（RUM，如 Fundebug、阿里云 ARMS，收集用户实际性能数据）；
② 合成监控（如 WebPageTest，在不同地点 / 设备模拟测试）。代码层面：
① 用performanceAPI 获取指标（performance.getEntriesByType('navigation')）；
② 标记关键操作（performance.mark()+performance.measure()）。
什么是长任务（Long Task）？如何避免？
长任务指主线程中执行时间超过 50ms 的任务，会阻塞 UI 渲染和用户交互，导致 FID 增大。
避免方法：
① 拆分长任务（将复杂计算拆分为小任务，用setTimeout或requestIdleCallback调度）；
② 用 Web Worker 处理耗时操作（如数据解析、复杂计算）；
③ 减少同步 JS 执行时间（移除冗余代码、优化循环）。检测：Chrome DevTools 的 Performance 面板中，超过 50ms 的任务会标为红色。
如何优化第三方脚本（如广告、统计、SDK）的性能影响？
异步加载：用
async/defer加载，避免阻塞 HTML 解析（如<script async src="ad.js"></script>）。延迟加载：非关键第三方脚本（如聊天插件）在页面加载完成后再加载（
window.onload后动态创建script标签）。隔离执行：用
iframe加载第三方脚本（限制对主页面的影响，避免样式 / JS 冲突）。资源限制：限制第三方脚本的 CPU / 网络使用（如 Service Worker 拦截请求，设置优先级）。
移除冗余：定期审查第三方脚本，删除未使用的 SDK 或插件。
什么是缓存策略？如何设计合理的缓存方案？
缓存策略指结合强缓存和协商缓存，平衡缓存效率和数据新鲜度。
设计方案：
静态资源（JS/CSS/ 图片）：① 文件名加哈希（如
app.8f3d.js）；② 强缓存max-age=31536000（1 年）；③ 内容更新时哈希变化，自动失效。API 接口数据：
① 协商缓存（ETag）；
② 服务端设置Cache-Control: no-cache（强制验证）；
③ 非实时数据可加max-age（如 5 分钟）。HTML 文件：
① 协商缓存（避免强缓存，确保内容最新）；
② 或设置短时间强缓存（如max-age=60）+ 协商缓存。目标：高频访问、不常变化的资源用长缓存；低频访问或常变化的资源用协商缓存。
- 如何优化大型列表的性能？
虚拟列表：只渲染可视区的列表项，滚动时动态替换内容（如
react-window、vue-virtual-scroller），DOM 节点数量固定（如 50 个），解决 “千万级数据卡顿” 问题。分页加载：每次只加载部分数据（如 20 条），用户翻页时再请求下一页，减少一次性渲染压力。
数据懒加载：滚动到列表底部时，自动加载更多数据（结合防抖，避免频繁请求）。
减少节点复杂度：
① 列表项 DOM 结构扁平化；
② 避免复杂样式和事件监听；
③ 用 CSS 动画替代 JS 动画。
Service Worker 在性能优化中的作用是什么？
Service Worker 是运行在浏览器后台的脚本，可拦截网络请求、管理缓存，实现离线访问和性能优化。
作用：
① 缓存静态资源（预缓存首屏资源，离线时从缓存读取）；
② 请求拦截与转发（优先从缓存获取资源，缓存未命中再请求网络）；
③ 后台同步（离线时的请求暂存，联网后自动发送）；
④ 推送通知（提升用户召回率）。应用场景：PWA（渐进式 Web 应用），实现 “类原生” 的离线体验，减少重复网络请求。
前端性能优化的常见误区有哪些？
过度优化：为微小性能提升投入大量精力（如优化 0.1 秒的加载时间），忽略用户体验。
忽视真实环境：仅在开发环境测试，未考虑弱网、低端设备等真实场景。
盲目使用新技术：为用而用（如 SSR 适合首屏优化，但小应用可能得不偿失）。
忽略代码质量：只关注加载性能，忽视运行时性能（如频繁 DOM 操作、内存泄漏）。
不监控长期性能：优化后未持续监控，后续迭代可能引入新的性能问题。
正确思路：以用户体验为核心，优先优化核心指标（LCP、FID、CLS），结合数据驱动优化。