前端性能优化面试题

一、打包优化相关

（一）webpack 优化

1. loader 相关

   • 如何根据不同文件类型配置合适的 loader？loader 的执行顺序（pre、normal、inline、post）对打包结果有什么影响？
   • 举例说明如何通过优化 loader 配置提升打包速度，比如 exclude/include 的合理运用。

2. dll 技术

   • 请解释 dll 插件的作用和原理，在项目中怎么配置使用 dll 来优化打包性能？
   • 使用 dll 后，项目更新第三方库时需要注意哪些问题？

3. happypack 相关

   • happypack 是如何实现多进程打包加速的？它适用的场景和存在的局限性分别是什么？
   • 对比 webpack 5 之后的 thread-loader，happypack 有哪些差异和优劣势？

4. 压缩代码

   • webpack 中常用的代码压缩插件有哪些（如 terser-webpack-plugin ）？它们是如何配置的，压缩原理有何不同（比如是否支持多进程、对 ES6+ 语法的处理 ）？
   • 压缩代码时，如何平衡压缩效果和打包时间？

5. tree shaking

   • 解释 tree shaking 的实现原理，它依赖于什么环境（比如 ES6 模块语法 ）才能生效？
   • 在项目中，为什么有时候 tree shaking 没有达到预期效果，如何排查和解决？

6. scope hoisting

   • scope hoisting 的作用是什么，它是怎样优化代码体积和执行效率的？
   • 什么样的代码结构有利于 scope hoisting 发挥作用，实际项目里怎么配合使用？

7. code splitting

   • code splitting 有哪几种常见实现方式（入口分割、动态 import、splitChunks ）？分别适用什么场景？
   • 配置 splitChunks 时，chunks、minSize、maxSize 等参数如何设置更合理，怎么避免代码过度分割或分割不足？

（二）图片优化（base64、cdn ）

1. 图片 base64 转换

   • 什么情况下适合将图片转成 base64？使用 base64 存在哪些优缺点？
   • 在 webpack 中，如何配置 url-loader 实现图片自动 base64 转换，转换的阈值怎么确定？

2. 图片 cdn 运用

   • 为什么要给图片使用 cdn？怎么在项目中配置图片的 cdn 加载（结合 webpack 或 html 中引入 ）？
   • 使用图片 cdn 时，如何处理缓存更新、跨域、图片防盗链等问题？

二、网络优化相关

（一）dns 优化

• 解释 DNS 预解析（dns-prefetch ）的作用和原理，在 HTML 中怎么设置来优化网页加载时的 DNS 解析时间？
• 实际项目里，哪些资源适合做 DNS 预解析，使用过程中要注意什么问题（比如域名数量限制 ）？

（二）cdn 优化

• 除了图片，cdn 还能用于加速哪些前端资源（如 js、css、字体文件 ）？选择 cdn 服务商时要考虑哪些因素（节点覆盖、稳定性、安全性等 ）？
• 如何解决 cdn 资源的缓存失效问题，比如版本号控制、文件哈希命名结合 cdn 部署？

（三）缓存优化

1. 强缓存和协商缓存

   • 详细说明强缓存（Expires、Cache-Control ）和协商缓存（Last-Modified/If-Modified-Since、ETag/If-None-Match ）的工作流程和区别，如何在服务端和前端配合设置？
   • 前端项目中，静态资源（js、css ）怎么利用缓存策略优化重复加载问题，同时又能及时更新资源？

2. 不同类型资源缓存策略

   • 对于 html 文件、接口数据，分别适合什么样的缓存策略，为什么？
   • 单页应用（SPA ）中，如何处理路由切换时的缓存问题，避免页面展示异常？

（四）preload/prefetch/ 懒加载

1. preload 和 prefetch

   • 说明 preload 和 prefetch 的区别（加载时机、优先级、资源使用意图 ），分别适合用于加载哪些资源？
   • 在 HTML 或通过 webpack 配置使用 preload/prefetch 时，怎么避免过度加载导致资源浪费？

2. 懒加载

   • 前端实现图片懒加载、组件懒加载的常用方式有哪些（Intersection Observer API、手动监听滚动事件等 ）？
   • 路由懒加载在 Vue、React 项目中是如何配置的，懒加载对首屏加载性能提升的原理是什么？

（五）ssr（服务端渲染 ）

• 解释 ssr 的工作原理，它对比客户端渲染（CSR ）在性能和用户体验上有哪些优势（首屏渲染速度、SEO 等 ）？
• Vue 或 React 项目中，搭建 ssr 环境的大致流程是怎样的，开发过程中需要注意哪些问题（比如生命周期钩子的使用、全局状态管理 ）？

三、代码优化相关

（一）loading / 骨架屏

• 前端项目中，有哪些场景需要使用 loading 或骨架屏？分别怎么实现（比如 CSS 动画做 loading，利用组件库或手动写骨架屏结构 ）？
• 骨架屏的设计要注意哪些方面（与实际页面布局匹配、加载完成切换的时机 ），如何结合接口数据动态生成骨架屏？

（二）web worker

• web worker 的作用是什么，它能解决前端开发中的什么性能问题（比如耗时任务阻塞主线程 ）？
• 举例说明在项目中使用 web worker 的流程（创建 worker、通信、销毁 ），使用时需要注意哪些限制（如不能操作 DOM、跨域等 ）？

（三）虚拟列表

• 解释虚拟列表的实现原理，为什么它能优化长列表渲染的性能问题（减少 DOM 节点数量 ）？
• 在 Vue、React 中，如何基于第三方库（如 vue-virtual-scroller、react-window ）或手动实现一个简单的虚拟列表，需要处理哪些关键逻辑（滚动计算、可见区域渲染 ）？

（四）懒加载（代码层面补充 ）

• 除了路由、组件、图片懒加载，还有哪些代码逻辑可以做懒加载优化（比如某些大型工具函数、第三方库按需引入 ）？
• 结合 ES6 的动态 import 语法，怎么在项目中更灵活地实现各种懒加载场景，如何处理加载过程中的异常和加载状态提示？

（五）dom/style 批量更新

• 为什么直接频繁操作 DOM 和修改样式会导致性能问题，浏览器的渲染流程（重排、重绘 ）是怎样受影响的？
• 前端开发中，有哪些批量更新 DOM 和样式的技巧（比如文档碎片 DocumentFragment、class 统一替换、requestAnimationFrame 配合 ），分别举例说明其使用方式和优势 。

四、资源加载优化

（一）减少 HTTP 请求

• 文件合并：合并 CSS、JS 文件，降低请求频次；利用 CSS Sprites（雪碧图）技术，将多个小图标整合为一张图，通过 background-position 精准显示所需图标。
• 图标替代：以字体图标（如 Font Awesome ）取代简单图片，减少图片请求，且支持矢量缩放 。

（二）浏览器缓存

• 缓存策略配置：服务端设置 Cache-Control（控制缓存有效期、是否可缓存等 ）、ETag（资源唯一标识，用于协商缓存 ）等响应头，让浏览器缓存静态资源（如 JS、CSS、图片 ），重复访问时直接读取缓存。
• 离线缓存：借助 Service Worker 实现离线缓存，拦截网络请求，匹配缓存资源直接返回，支持离线访问，提升重复访问体验 。

（三）压缩资源

• 文件压缩：采用 Gzip 或 Brotli 算法，对 HTML、CSS、JS、图片等资源进行压缩，减小文件体积，加速传输；JS 可通过 Terser 工具压缩，剔除冗余空格、注释，缩短变量名 。

（四）CDN 加速

将静态资源（图片、JS 库、CSS 框架等 ）部署到 CDN（内容分发网络 ），利用其分布式节点，让用户从距离更近的服务器获取资源，降低网络延迟，加快加载速度 。

（五）预加载与延迟加载

• 预加载关键资源：针对首屏必需的 CSS、JS 等关键资源，使用 <link rel="preload"> 标签预加载，提前抢占带宽，确保优先加载 。
• 延迟加载非关键资源：非关键资源（如非首屏图片、组件 ）实施延迟加载。图片可设置 loading="lazy" 属性，滚动到可视区域再加载；JS 组件结合动态 import() 语法懒加载，减小首屏加载体积 。

（六）图片优化

• 格式选型：优先选用 WebP、AVIF 格式图片，压缩率高、质量好，适配现代浏览器；简单图标用 SVG，支持矢量缩放且体积小 。
• 响应式适配：依据设备屏幕尺寸，通过 srcset 提供不同分辨率图片，如 <img srcset="small.jpg 480w, medium.jpg 800w" > ，让设备按需加载 。
• 压缩工具：利用 TinyPNG、ImageOptim 等工具压缩图片，在保证视觉质量前提下，显著减小文件大小 。

（七）协议升级

采用 HTTP/2 或 HTTP/3 协议，借助多路复用（同一连接并发传输多个资源 ）、头部压缩（减少请求头体积 ）等特性，提升资源传输效率，降低延迟 。

五、渲染优化

（一）减少 DOM 操作

• 批量更新：借助文档碎片（DocumentFragment ），先在内存中完成 DOM 增删改操作，再一次性插入页面，减少重排次数；避免在循环内频繁访问 offsetWidth 等触发强制同步布局的属性，防止阻塞渲染 。

（二）CSS 优化

• 动画选择：优先使用 CSS 动画（如 transform、opacity 实现动画 ），利用浏览器合成层优化，性能优于 JS 动画；简化 CSS 选择器，避免多层嵌套（如 .parent .child .grandchild ），降低匹配复杂度 。
• 渲染提示：通过 will-change 告知浏览器元素即将发生的变化（如 will-change: transform ），让浏览器提前准备优化；设置 font-display: swap ，字体加载时先显示默认字体，避免阻塞文本渲染 。

（三）虚拟列表 / 无限滚动

长列表场景下，仅渲染可视区域内容，滚动时动态加载新数据、销毁离开可视区域的旧数据，大幅减少 DOM 节点数量，减轻渲染压力，保证滚动流畅性，如基于 react-window（React ）、vue-virtual-scroller（Vue ）实现 。

六、JavaScript 执行优化

（一）减小代码体积

• Tree Shaking：借助 Webpack 等构建工具，剔除未使用的代码（如第三方库中未引用的模块 ），精简代码体积；手动梳理代码逻辑，删除冗余功能、无效分支 。

（二）避免阻塞主线程

• 任务拆分：将耗时任务（如大数据量循环计算 ）拆分为小任务，通过 requestAnimationFrame 调度执行，避免长时间占用主线程；或利用 Web Workers ，将计算密集型任务放到后台线程，不阻塞页面交互 。

（三）事件优化

• 节流与防抖：高频事件（滚动、窗口 resize、输入框实时搜索 ）使用节流（如 lodash.throttle ，控制执行频率 ）、防抖（如 lodash.debounce ，延迟执行，避免重复触发 ）优化；精简循环内逻辑，减少不必要的 DOM 操作和计算 。

（四）WebAssembly 助力

对于计算密集型场景（如复杂图形处理、数据加密 ），用 WebAssembly 替代 JavaScript 。WebAssembly 接近机器码，执行效率更高，可显著提升运算性能 。

七、构建优化

（一）代码分割

通过 Webpack 等工具，将代码拆分为多个块（如按路由拆分组件代码 ），结合动态 import() 语法，实现按需加载，减小首屏加载的代码体积，加快首屏渲染 。

（二）压缩与混淆

构建过程中，用 Terser 压缩 JS 代码（去除空格、缩短变量名 ），减小体积；结合代码混淆工具，增加代码可读性难度，一定程度保障代码安全 。

八、框架侧优化（以 Vue/React 为例 ）

（一）Vue 优化

• 条件渲染控制：依据场景合理用 v-if（条件满足时渲染 DOM ）、v-show（始终渲染，通过 display 控制显隐 ）。
• 组件懒加载：借助 asyncComponent ，配合动态 import() ，实现组件懒加载，减小首屏包体积 。
• 组件缓存：利用 keep-alive 缓存组件实例，避免组件重复创建、销毁，提升切换性能，如缓存 tabs 页组件 。

（二）React 优化

• 避免不必要重渲染：使用 React.memo（函数组件 ）、PureComponent（类组件 ）浅比较 props，阻止无意义重渲染；结合 useMemo（缓存计算结果 ）、useCallback（缓存函数 ），优化子组件因依赖变化触发的重渲染 。
• 路由懒加载：通过 React.lazy 配合 Suspense ，实现路由组件懒加载，拆分代码，加快首屏加载 。

九、监控与持续优化

（一）工具分析

利用 Chrome DevTools（Performance 面板分析长任务、渲染瓶颈 ）、Lighthouse（检测性能、可访问性等指标并给出优化建议 ），定位性能问题，针对性优化 。

（二）持续监控

接入 Sentry、Fundebug 等性能监控平台，或自行埋点，跟踪页面加载时间、交互延迟、错误率等指标，持续迭代优化，保障用户体验 。

不同项目（单页应用、多页应用 ）、设备环境下，需灵活组合这些方法，持续打磨，才能让前端性能达到更优状态 。