2026前端高频面试题及详细答案（实战向）

2026前端高频面试题及详细答案（实战向）一、JavaScript核心基础（高频必考）1.说说var、let、const的区别？实际开发怎么用？参考答案：三者核心差异集中在变量提升、作用域、重复声明、只读特性四个点：1.var：函数级作用域，存在变量提升，允许重复声明，初始值为undefined。缺点是容易造成全局变量污染、变量泄露，现在开发基本不用。2.let：块级作用域（{}内有效），存在暂时性死区，无变量提升，不允许同作用域重复声明，变量可修改。3.const：块级作用域，规则和let基本一致，唯一区别是声明后不可重新赋值。如果是引用类型（对象、数组），可以修改内部属性和元素，只是指针地址不能变。开发规范：默认全部用const，只有变量需要重新赋值时改用let，彻底摒弃var。2.什么是暂时性死区？参考答案：在代码块中，使用let/const声明的变量，在声明语句执行之前，无法被访问、赋值，这个区间就是暂时性死区。和var不同，let/const虽然也有提升，但不会初始化默认值，引擎会锁定变量，提前访问直接报错Cannotaccess'xxx'beforeinitialization。作用：规避了var变量提升带来的逻辑混乱，让代码执行顺序更直观。3.深拷贝和浅拷贝的区别？手写完整深拷贝函数参考答案：1.浅拷贝：只复制对象第一层属性，引用类型属性只复制内存地址，新旧对象共用同一引用，修改嵌套属性会互相影响。常见方法：Object.assign、扩展运算符、数组slice/map。2.深拷贝：递归复制所有层级属性，新旧对象完全独立，修改任意属性互不影响。简易深拷贝缺陷：JSON.parse(JSON.stringify())无法处理函数、正则、undefined、循环引用，生产环境不推荐。手写深拷贝（兼容常用场景）：PlainText

functiondeepClone(obj,map=newWeakMap()){

//基础类型、null、undefined直接返回

if(obj===null||typeofobj!=='object')returnobj;

//处理循环引用

if(map.has(obj))returnmap.get(obj);

//处理日期、正则

if(objinstanceofDate)returnnewDate(obj);

if(objinstanceofRegExp)returnnewRegExp(obj.source,obj.flags);

//创建新对象/数组

constcloneObj=Array.isArray(obj)?[]:{};

map.set(obj,cloneObj);

//递归遍历赋值

for(letkeyinobj){

if(obj.hasOwnProperty(key)){

cloneObj[key]=deepClone(obj[key],map);

}

}

returncloneObj;

}4.原型和原型链的理解？参考答案：1.原型（prototype）：每个函数都有一个prototype属性，是一个对象，用来存放实例共享的方法和属性，避免重复创建，节省内存。2.__proto__：每个实例对象都有__proto__属性，指向创建它的构造函数的prototype。3.原型链：对象通过__proto__层层向上查找原型，最终指向Ototype，顶端为null，这条查找链路就是原型链。访问对象属性/方法时，先在自身查找，找不到就沿着原型链向上找，直到顶端。开发中常用原型链实现继承、方法复用。5.闭包是什么？优缺点及使用场景参考答案：定义：函数嵌套函数，内层函数访问外层函数的变量，外层函数执行结束后，内层函数依然可以持有外层变量，形成闭包。核心作用：保留函数局部作用域，变量不被销毁。优点：实现变量私有化、缓存数据、柯里化、防抖节流。缺点：变量常驻内存，容易造成内存占用过高，使用不当会引发内存泄漏。常见场景：定时器、事件监听、防抖节流函数、模块化封装、私有变量。6.异步遍历forEach和for循环的区别？为什么forEach不支持async/await？参考答案：1.for循环是串行执行，配合async/await可以实现有序异步等待，每一轮循环会等待异步任务完成再执行下一轮。2.forEach底层是回调遍历，内部不处理Promise状态，不会阻塞遍历流程，所有异步任务会同时发起，无法串行等待。如果需要异步遍历，优先使用for...of，完美支持async/await，遍历可控。7.Promise三种状态、静态方法、手写简易Promise参考答案：1.三种状态：pending（进行中）、fulfilled（成功）、rejected（失败），状态一旦改变不可逆。2.常用静态方法：-Promise.all：全部成功才成功，一个失败直接失败（并行执行）-Promise.race：谁先完成就返回谁的结果（成功/失败）-Promise.allSettled：等待所有任务结束，返回每一个任务的结果状态-Promise.any：一个成功就成功，全部失败才失败手写简易Promise（核心逻辑）：PlainText

classMyPromise{

constructor(executor){

this.status='pending';

this.value=null;

this.reason=null;

this.onFulfilledCallbacks=[];

this.onRejectedCallbacks=[];

constresolve=(value)=>{

if(this.status==='pending'){

this.status='fulfilled';

this.value=value;

this.onFulfilledCallbacks.forEach(fn=>fn());

}

}

constreject=(reason)=>{

if(this.status==='pending'){

this.status='rejected';

this.reason=reason;

this.onRejectedCallbacks.forEach(fn=>fn());

}

}

try{

executor(resolve,reject);

}catch(err){

reject(err);

}

}

then(onFulfilled,onRejected){

onFulfilled=typeofonFulfilled==='function'?onFulfilled:val=>val;

onRejected=typeofonRejected==='function'?onRejected:err=>{throwerr};

//支持链式调用

returnnewMyPromise((resolve,reject)=>{

if(this.status==='fulfilled'){

setTimeout(()=>{

try{

letres=onFulfilled(this.value);

resolve(res);

}catch(err){

reject(err);

}

})

}

if(this.status==='rejected'){

setTimeout(()=>{

try{

letres=onRejected(this.reason);

resolve(res);

}catch(err){

reject(err);

}

})

}

if(this.status==='pending'){

this.onFulfilledCallbacks.push(()=>{

setTimeout(()=>{

try{

letres=onFulfilled(this.value);

resolve(res);

}catch(err){

reject(err);

}

})

})

this.onRejectedCallbacks.push(()=>{

setTimeout(()=>{

try{

letres=onRejected(this.reason);

resolve(res);

}catch(err){

reject(err);

}

})

})

}

})

}

}8.宏任务和微任务的执行顺序？完整事件循环流程参考答案：宏任务：script整体代码、setTimeout、setInterval、AJAX、DOM事件微任务：Promise.then/catch/finally、async/await、queueMicrotask事件循环完整流程：1.先执行同步代码2.同步代码执行完毕，清空所有微任务队列（一次性清空）3.执行一个宏任务4.再次清空微任务，循环往复核心口诀：同步优先，微任务优于宏任务，一轮宏任务配一轮全量微任务。二、CSS核心面试题1.水平垂直居中的5种常用方案（适配不同场景）参考答案：1.flex居中（最常用）：适配所有场景，简单高效PlainText

parent{

display:flex;

justify-content:center;

align-items:center;

}2.grid居中：现代布局首选，代码极简PlainText

parent{

display:grid;

place-items:center;

}3.绝对定位+transform：未知宽高居中PlainText

child{

position:absolute;

left:50%;

top:50%;

transform:translate(-50%,-50%);

}4.绝对定位+margin自适应：已知宽高可用PlainText

child{

position:absolute;

top:0;

left:0;

right:0;

bottom:0;

margin:auto;

}5.table布局：兼容老旧浏览器，现在基本不用2.BFC是什么？触发条件和实际应用参考答案：BFC即块级格式化上下文，是浏览器的独立渲染区域，区域内部元素不会影响外部布局。触发条件：-根元素html-overflow不为visible（hidden/auto/scroll）-display:flex/grid/inline-block-position:absolute/fixed实际应用：解决margin塌陷、margin重叠、浮动高度塌陷问题。3.移动端适配方案对比（rem、vw、flex、媒体查询）参考答案：1.vw/vh适配（2026主流）：视口单位，1vw=屏幕宽度1%，无需JS，适配精准，兼容性完美，是现在移动端首选方案。2.rem适配：依赖JS动态设置根字体大小，适配成熟，但需要脚本支持，纯CSS无法实现。3.flex布局：用于页面结构自适应，搭配vw使用，不单独做整体适配。4.媒体查询：适配不同屏幕断点，多用于大屏兼容、响应式布局。4.CSS层叠上下文、z-index失效原因参考答案：层叠上下文是元素在Z轴的层级空间，父元素创建层叠上下文后，子元素z-index只会在父级内部对比，不会穿透外层。z-index失效常见原因：1.元素没有定位（非relative/absolute/fixed/sticky）2.父级层叠上下文层级过低，子级z-index再高也无效3.元素存在transform、opacity等属性，提前创建了层叠上下文三、Vue3核心面试题（2026重点）1.Vue2和Vue3核心区别参考答案：1.响应式原理：Vue2基于Object.defineProperty，无法监听新增/删除属性、数组下标；Vue3基于Proxy，支持全量监听，无缺陷。2.编码方式：Vue2选项式API，代码碎片化；Vue3组合式API，逻辑聚合，适合大型项目。3.性能优化：Vue3支持静态提升、PatchFlag标记、按需编译，渲染速度更快，内存占用更低。4.TS支持：Vue3原生基于TS开发，类型校验完善；Vue2TS支持较弱。5.生命周期：组合式API摒弃beforeCreate/created，改用setup统一替代。2.setup函数特点？执行时机？参考答案：1.setup是组合式API的入口函数，组件创建前执行，早于beforeCreate。2.内部无法使用this，this为undefined。3.定义的变量、函数需要return才能在模板使用（<scriptsetup>语法糖无需return）。4.支持异步，但异步setup返回的组件无法正常渲染，需要配合Suspense。3.ref和reactive的区别？如何选择？参考答案：1.ref：支持基本类型+引用类型，通过.value访问值，模板中可自动解包，适合定义简单变量、布尔、字符串、数字。2.reactive：仅支持引用类型（对象、数组），无需.value，解构会丢失响应式，适合定义复杂对象、表单数据。使用规范：基础类型用ref，复杂对象用reactive；解构reactive数据用toRefs保留响应式。4.Vue3生命周期组合式API对应关系参考答案：-onBeforeMount/onMounted：挂载前/挂载完成-onBeforeUpdate/onUpdated：更新前/更新完成-onBeforeUnmount/onUnmounted：卸载前/卸载完成-onActivated/onDeactivated：组件缓存激活/失活所有生命周期函数均可在setup中多次调用，逻辑可拆分，比Vue2更灵活。5.Vue3性能优化点（面试加分项）参考答案：1.PatchFlag补丁标记：编译时标记动态节点，diff只对比标记节点，减少无效DOM对比。2.静态提升：静态无变化节点提升到全局，无需每次渲染重新创建。3.事件缓存：缓存静态事件，避免每次渲染生成新函数。4.Proxy响应式：全量监听，无需递归遍历所有属性，初始化更快。5.Tree-Shaking：API按需引入，打包体积更小。四、前端工程化&性能优化（必问）1.Webpack/Vite区别？2026项目选型参考答案：1.Webpack：基于打包构建，先打包再启动服务，大型项目打包速度慢，配置繁琐，生态成熟，兼容所有场景。2.Vite：基于浏览器原生ES模块，开发环境无需打包，秒启动；生产环境基于Rollup打包，速度极快，配置简洁，Vue/React项目首选。2026选型：中小型项目、Vue3/React新项目全部用Vite；老旧大型遗留项目保留Webpack。2.前端性能优化10条实战方案参考答案：1.资源压缩：JS/CSS/图片压缩，开启Gzip压缩2.按需加载：路由懒加载、组件懒加载、图片懒加载3.打包优化：拆分chunk、剔除冗余代码、Tree-Shaking4.缓存优化：静态资源长期缓存、hash命名更新缓存5.减少重排重绘：批量修改DOM、使用transform/opacity做动画6.虚拟列表：长列表渲染优化，只渲染可视区域DOM7.请求优化：接口节流防抖、请求合并、取消重复请求8.CDN加速：静态资源托管CDN，减少服务器压力9.预加载/预解析：preload、prefetch优化资源加载顺序10.SSR/SSG：首屏渲染优化，解决白屏、SEO问题3.防抖和节流的区别？手写源码参考答案：1.防抖：触发事件后，延迟n秒执行，期间再次触发会重置计时，多用于输入框搜索、窗口resize。2.节流：固定时间内只执行一次，稀释执行频率，多用于滚动、点击频繁请求。手写防抖：PlainText

functiondebounce(fn,delay){

lettimer=null;

returnfunction(...args){

if(timer)clearTimeout(timer);

timer=setTimeout(()=>{

fn.apply(this,args);

},delay);

}

}手写节流：PlainText

functionthrottle(fn,interval){

letlastTime=0;

returnfunction(...args){

constnow=Date.now();

if(now-lastTime>=interval){

lastTime=now;

fn.apply(this,args);

}

}

}五、浏览器&网络面试题1.从输入网址到页面渲染完成的全过程参考答案：1.DNS解析：域名解析为服务器IP地址2.TCP三次握手：建立可靠传输连接3.HTTPS握手：证书校验、协商加密密钥4.发送HTTP请求：携带请求头、参数、cookie5.服务器处理请求：返回响应数据、状态码、资源6.浏览器解析资源：解析HTML生成DOM树，解析CSS生成CSSOM树7.生成渲染树：DOM+CSSOM合并为渲染树8.布局（重排）：计算元素位置、大小9.绘制（重绘）：绘制像素到屏幕10.TCP四次挥手：断开连接2.HTTP1.1/HTTP2/HTTP3区别参考答案：1.HTTP1.1：默认长连接，但存在队头阻塞，同一域名有限并行请求数，头部冗余。2.HTTP2：二进制传输、多路复用（解决队头阻塞）、头部压缩、服务器推送，基于TCP。3.HTTP3：基于QUIC协议（UDP），彻底解决队头阻塞，连接更快，抗网络波动，2026主流普及版本。3.跨域问题产生原因及所有解决方案参考答案：跨域原因：浏览器同源策略限制，协议、域名、端口任意一个不同，即为跨域，阻止非法跨域请求窃取数据。解决方案（常用排序）：1.CORS跨域资源共享：后端配置响应头，主流生产方案2.代理跨域：Vite/Webpack本地代理，开发环境专用3.JSONP：仅支持GET请求，兼容性好，现在基本淘汰4.Nginx反向代理：线上环境统一域名转发5.WebSocket：不受同源策略限制，适合实时通信六、手写代码高频题（面试必写）1.手写数组去重（ES6+最简写法）PlainText

//基础去重

constuniqueArr=[...newSet(arr)];

//复杂对象数组去重（根据id）

functionuniqueObjArr(arr,key){

constmap=newMap();

returnarr.filter(item=>!map.has(item[key])&&map.set(item[key],1));

}2.手写call/apply/bindPlainText

//手写call

Ftotype.myCall=function(context,...args){

context=contex