阿里前端面试题及答案（贴近真实面试场景）.docxVIP

阿里前端面试题及答案（贴近真实面试场景）

一、基础题（HTML/CSS/JS）

1.题目：说说CSS中的BFC及其应用场景

答案：BFC是块级格式化上下文，简单说就是一个独立的渲染区域，内部元素的布局不会影响外部元素。触发条件有这几种：根元素（html）、float不为none、overflow不为visible、display是inline-block/table-cell/flex、position是absolute/fixed。实际开发中常用它解决问题：比如清除浮动（父元素触发BFC后，能包含浮动子元素，避免高度塌陷）、解决margin重叠（两个相邻块级元素都触发BFC，垂直margin就不会合并了）、防止元素被浮动元素覆盖（比如左侧浮动元素压着右侧内容，给右侧元素触发BFC就能避开）。

2.题目：JS中闭包的定义、常见场景及可能的问题

答案：闭包其实就是函数嵌套时，内部函数能访问外部函数的变量和作用域，哪怕外部函数已经执行完。常见场景很多：比如防抖节流函数（需要保存上一次的计时ID或触发时间）、模块化（用闭包封装私有变量，只暴露接口，比如早期没有ES6模块时，用立即执行函数创建模块）、回调函数（比如定时器回调里访问外部函数的变量）。可能的问题是内存泄漏——如果闭包引用的外部变量一直不释放（比如被全局变量持有），会导致这些变量无法被垃圾回收，长期下来占用内存。解决办法就是不用的时候手动解除引用，比如把闭包赋值为null。

3.题目：说说HTML语义化的意义，以及你常用的语义化标签

答案：语义化就是让HTML标签的含义更明确，不是单纯用div和span堆。意义有三点：一是对搜索引擎友好（SEO），爬虫能更好理解页面结构，比如article标签里的内容会被认为是核心内容；二是提升可访问性，屏幕阅读器能根据语义标签正确朗读内容，帮助残障用户；三是提高代码可读性，后期维护时一看标签就知道这部分是导航（nav）、页脚（footer）还是正文（main）。常用的语义标签：header（页面头部）、nav（导航栏）、main（主要内容区）、article（独立文章/内容块）、section（章节/区块）、aside（侧边栏）、footer（页脚）、figure（图片+说明）、details（折叠面板）。

二、框架题（React/Vue）

1.题目：React中useEffect的依赖数组作用，以及空依赖和不传依赖的区别

答案：useEffect是React的副作用钩子，依赖数组用来控制effect的执行时机——只有依赖数组里的变量发生变化时，effect才会重新执行。空依赖（[]）表示effect只在组件挂载时执行一次，卸载时执行return里的清理函数，相当于类组件的componentDidMount和componentWillUnmount结合。不传依赖的话，effect会在每次组件渲染（包括初始渲染和更新渲染）后都执行，而且没有清理时机，容易导致性能问题或逻辑错误，比如每次渲染都触发定时器，会越积越多。另外要注意，依赖数组里必须包含effect中用到的所有外部变量（状态、props、函数等），不然会出现闭包陷阱，拿到的是旧值。

2.题目：Vue3的CompositionAPI相比Vue2的OptionsAPI有什么优势

答案：首先是逻辑复用更灵活——OptionsAPI只能用mixins复用逻辑，但会有命名冲突、来源不清晰的问题；CompositionAPI可以把相关逻辑抽成独立的组合式函数（比如useUser、useCart），导入后直接使用，逻辑归属明确，还能避免冲突。其次是代码组织更清晰——OptionsAPI把代码按data、methods、computed、watch分类，复杂组件里相关逻辑会被拆到不同选项中，找起来麻烦；CompositionAPI可以按功能模块组织代码，比如用户相关的状态和方法放在一起，购物车相关的放在一起，维护起来更高效。另外，对TypeScript支持更好——OptionsAPI的this指向不明确，TS类型推导困难；CompositionAPI是基于函数的，变量和函数都是显式定义的，TS能轻松推导类型，减少类型错误。还有就是更好的tree-shaking，没用的逻辑能被打包工具剔除，减小包体积。

3.题目：React和Vue的虚拟DOM原理及diff算法差异

答案：两者核心都是通过虚拟DOM（JS对象）描述真实DOM，修改虚拟DOM后通过diff算法