前端高频面试题汇总及答案.docxVIP

前端高频面试题汇总及答案

一、HTML/CSS基础

语义化标签的作用？实际项目中怎么用？

答：核心是让HTML结构更清晰，方便搜索引擎解析（SEO）和屏幕阅读器（无障碍），同时提升代码可读性。

实际用例：头部用header，导航用nav，文章主体用article，侧边栏用aside，底部用footer；避免全用div嵌套，比如新闻列表用ul+li而非多个div。

CSS盒模型有哪两种？区别是什么？

答：两种是标准盒模型（W3C）和怪异盒模型（IE）。

区别：标准盒模型的width/height仅包含内容区（content），边框（border）和内边距（padding）会撑大盒子；怪异盒模型的width/height包含content+padding+border。

控制方式：用box-sizing:content-box（标准，默认）或box-sizing:border-box（怪异，项目中常用，避免计算padding/border导致的布局错乱）。

Flex布局中，flex:1具体代表什么？

答：是flex-grow:1、flex-shrink:1、flex-basis:0%的简写。

实际场景：比如导航栏中“首页”“分类”等项，加flex:1可让它们自动平分父容器宽度，不用手动算百分比；注意父容器必须设display:flex。

二、JavaScript核心

闭包的定义、实际用途及注意事项？

答：定义是“有权访问另一个函数作用域变量的函数”，本质是函数作用域链的留存。

用途：①封装私有变量，比如写工具函数时隐藏内部逻辑（例：functioncreateCounter(){letn=0;return()=n++}）；②防抖节流函数的实现；③模块化（ES6前替代import/export）。

注意：滥用会导致内存泄漏，比如闭包引用DOM元素时，要在组件卸载前手动清除引用（例：Vue的beforeUnmount中置空闭包变量）。

Promise的三种状态？async/await比Promise链好在哪？

答：Promise有pending（等待）、fulfilled（成功）、rejected（失败）三种状态，状态一旦改变就不可变。

优势：①代码更扁平，避免Promise多层.then()嵌套（“回调地狱”）；②错误处理更直观，用try/catch就能捕获所有异步错误，不用每个.then()后加.catch()；③可读性更高，符合同步代码的思维逻辑。

this指向在不同场景下的区别？

答：①全局作用域（非严格模式）：this指向window；严格模式下this是undefined；②函数直接调用：functionfn(){console.log(this)}，非严格模式指向window，严格模式undefined；③对象方法调用：obj.fn()，this指向obj；④构造函数（new）：this指向新创建的实例；⑤箭头函数：无自己的this，继承外层作用域的this（例：Vue组件中methods用普通函数，watch用箭头函数会导致this指向错误）。

三、框架应用（Vue/React）

Vue3的响应式原理和Vue2有什么区别？

答：Vue2用Object.defineProperty，Vue3用Proxy。

核心区别：①Vue2无法监听数组索引变化（如arr[0]=1）和对象新增属性（需用Vue.set）；Vue3的Proxy能原生监听数组修改和对象新增/删除属性；②Vue2需要递归遍历对象所有属性做响应式，Vue3的Proxy只代理顶层对象，访问深层属性时才动态代理（懒代理，性能更优）；③Vue3支持Map、Set等复杂数据类型的响应式。

React中虚拟DOM和Diff算法的作用？

答：虚拟DOM是用JS对象模拟真实DOM的结构（例：{type:div,props:{className:box},children:[]}），避免频繁操作真实DOM（真实DOM操作性能开销大）。

Diff算法是对比新旧虚拟DOM的差异，只更新有变化的部分到真实DOM。ReactDiff的优化点：①按“层级”对比（同层级节点才比较，跨层级节点直接删除重建）；②同类型节点对比属性，复用DOM；③列表节点需加key（用唯一ID而非索引，避免错位，提升复用效率）。

Vue的v-if和v-show区别？怎么选？

答：①渲染逻辑：v-if是“条件渲染”，条件不满足时元素直接从DOM中移除；v-show是“条件显示”，元素始终在DOM中，通过di