2025年高频前端面试题(含答案).docxVIP

2025年高频前端面试题(含答案)

1.如何理解Vue3组合式API（CompositionAPI）与选项式API（OptionsAPI）的核心差异？实际项目中如何选择？

Vue3组合式API与选项式API的核心差异体现在代码组织方式和逻辑复用能力上。选项式API以data、methods、computed等选项划分代码块，适合小型项目，逻辑按功能类型分散在不同选项中；组合式API通过setup函数和自定义hook（如useFetch、useCounter）将关联逻辑聚合，解决了复杂组件中“逻辑关注点分散”的问题（例如一个组件同时涉及数据请求、表单验证、动画控制时，选项式API会导致同一逻辑的代码分散在data、methods、watch等不同选项里）。

选择依据：小型项目或需要快速上手时推荐选项式API，其结构符合直觉；中大型项目或需要高复用性逻辑（如跨组件共享的表单验证逻辑）时，组合式API通过自定义hook实现逻辑抽离更高效。需注意组合式API对TypeScript支持更友好，若项目使用TS，优先选择组合式API。

2.React18中Concurrent模式的核心改进是什么？如何影响组件渲染行为？

Concurrent模式的核心是“可中断的异步渲染”，通过优先级调度（Lane模型）和时间分片（基于requestIdleCallback优化）实现更平滑的用户体验。传统同步渲染（Legacy模式）中，组件渲染一旦开始就无法中断，若组件树复杂会导致主线程阻塞超过50ms，出现卡顿；Concurrent模式下，渲染过程可根据任务优先级中断，优先处理用户输入（如点击、滚动）等高优先级任务，待空闲时恢复低优先级渲染。

具体影响：①组件渲染可能被中断并重新开始（需保证组件纯函数特性，避免副作用在渲染阶段执行）；②支持Suspense组件的异步边界（如数据加载时显示加载状态，数据就绪后无缝切换）；③自动批处理（Batching）范围扩大，即使在setTimeout、Promise回调中调用setState也会合并更新（React18前仅事件回调内批处理）。

3.简述Vite4.x相比Webpack5的核心优势，以及各自适用场景。

Vite4.x基于ES模块原生支持（ESModules），开发阶段使用esbuild预构建依赖（速度比Webpack的babel快10-100倍），并通过HTTP服务器直接提供ES模块（无需打包），实现秒级冷启动和即时热更新（HMR耗时100ms）。生产环境使用Rollup打包，利用Tree-shaking和现代浏览器的原生支持优化产物。

Webpack5通过持久化缓存（cache:{type:filesystem}）、模块联邦（ModuleFederation）、更智能的tree-shaking等特性提升构建性能，但开发阶段需完整打包，冷启动时间随项目增大而增加（大型项目可能超过10秒）。

适用场景对比：Vite适合现代框架（Vue/React/Svelte）的中大型前端项目（尤其注重开发体验）、静态网站（SSG）或轻量级应用；Webpack适合需要复杂插件生态（如传统多页应用、需要IE兼容）、微前端（模块联邦跨应用共享组件）或需要深度定制构建流程（如自定义优化器、多环境变量处理）的项目。

4.如何实现一个高性能的前端图片加载方案？需考虑哪些关键指标？

高性能图片加载方案需结合格式优化、加载策略、懒加载和缓存策略：

（1）格式优化：优先使用WebP（比JPEG小25-35%），对不支持的浏览器降级为AVIF（更高压缩率）或JPEGXL；图标类图片使用SVG（矢量无失真）或压缩后的PNG（通过ImageOptim工具压缩）。

（2）加载策略：①响应式图片（srcset+sizes）：根据设备分辨率和视口宽度加载合适尺寸的图片（如imgsrcset=small.jpg480w,medium.jpg768w,large.jpg1200wsizes=(max-width:600px)480px,800px）；②占位图（低质量模糊图LQIP或SVG占位）：在图片加载前显示模糊预览，减少白屏时间。

（3）懒加载：使用IntersectionObserverAPI监听图片是否进入视口（替代传统的scroll事件监听），仅当图片接近可视区域时加载。注意设置loading=lazy属性（现代浏览器支持）作为补充。

（4）缓存策略：通过HTTP头设置长缓存（Cache-Control:max-age，图片哈希命名（如image-abc123.jpg）实现内容变化时自动失效；使用ServiceWorker缓存高频访问图片，离线时仍可显