3年前端工程师高频面试题（含详细实战答案）

3年前端工程师高频面试题（含详细实战答案）一、JavaScript核心基础（必考）1、讲讲var/let/const的区别？实际开发怎么用？答案：1）变量提升：var存在变量提升，声明前访问是undefined；let、const有暂时性死区，声明前直接报错。2）作用域：var只有函数/全局作用域，没有块级作用域；let、const支持块级作用域（if/for/{}内有效）。3）重复声明：var允许重复声明；let、const同一作用域不允许重复声明。4）赋值规则：const声明的是常量，必须初始化，且不能修改基础类型值；引用类型可以改属性；let、var可重复赋值。开发规范：优先用const，能不变就不变；需要重新赋值用let；业务代码完全不用var。2、闭包是什么？有什么优缺点？项目中哪里用到？答案：闭包就是：内层函数访问外层函数的变量，且外层函数执行结束后，内层函数依然能保留外层变量的引用，形成闭包。优点：1）可以私有化变量，避免全局污染；2）能够缓存数据，延长变量生命周期。缺点：1）变量常驻内存，容易造成内存占用过高；2）使用不当会引发内存泄漏。项目场景：防抖节流、封装工具函数、React自定义hooks、缓存接口结果、模块化私有方法。3、原型和原型链讲清楚？instanceof原理是什么？答案：每个函数都有prototype显式原型，每个实例对象都有__proto__隐式原型，指向构造函数的prototype。原型链就是：对象查找属性/方法时，先找自身，没有就顺着__proto__往上找，直到Ototype，终点是null。instanceof原理：遍历实例的原型链，看是否能找到对应构造函数的prototype，找到返回true，否则false。4、异步进阶：宏任务和微任务的区别？执行顺序？答案：JS执行机制：先执行同步代码，同步执行完，清空所有微任务，再执行一轮宏任务，循环往复（事件循环）。微任务（优先级高）：Promise.then/catch/finally、async/await、queueMicrotask、MutationObserver宏任务（优先级低）：script整体代码、setTimeout、setInterval、AJAX、DOM渲染常考顺序口诀：同步=>微任务=>宏任务5、Promise状态、常用方法、解决了什么问题？答案：Promise三种状态：pending（进行中）、fulfilled（成功）、rejected（失败），状态一旦改变不可逆。常用方法：then、catch、finally、all、race、allSettled解决的核心问题：回调地狱，把嵌套回调改成链式调用，代码可读性、可维护性大幅提升。拓展：all全部成功才成功，一个失败直接失败；allSettled不管成功失败，全部返回结果，适合批量接口不阻塞场景。6、async/await原理是什么？和Promise的关系？答案：async/await是Promise的语法糖，本质还是Promise，只是把异步代码写成同步写法。async修饰函数，返回值一定是Promise；await只能在async函数内使用，会阻塞后续代码，等待Promise状态完成。错误处理：必须用try/catch捕获await的异常，替代Promise.catch。二、手写代码（必手撕）1、手写防抖、节流（工作最常用）防抖答案（触发后延迟执行，多次触发重置计时）：PlainText

functiondebounce(fn,delay=300){

lettimer=null

returnfunction(...args){

if(timer)clearTimeout(timer)

timer=setTimeout(()=>{

fn.apply(this,args)

timer=null

},delay)

}

}

节流答案（固定时间只执行一次，稀释频率）：PlainText

functionthrottle(fn,interval=300){

letlastTime=0

returnfunction(...args){

constnow=Date.now()

if(now-lastTime>=interval){

fn.apply(this,args)

lastTime=now

}

}

}

使用场景：防抖用于搜索框输入、窗口resize；节流用于滚动监听、按钮频繁点击、拖拽。2、手写简易Promise.allPlainText

functionmyPromiseAll(list){

returnnewPromise((resolve,reject)=>{

letresult=[]

letcount=0

constlen=list.length

if(len===0)resolve([])

list.forEach((item,index)=>{

Promise.resolve(item).then(res=>{

result[index]=res

count++

if(count===len)resolve(result)

}).catch(err=>{

reject(err)

})

})

})

}

3、手写深拷贝（基础版，解决大部分面试场景）PlainText

functiondeepClone(obj){

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

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

for(letkeyinobj){

if(obj.hasOwnProperty(key)){

newObj[key]=deepClone(obj[key])

}

}

returnnewObj

}三、Vue3核心面试（3年主力技术栈）1、Vue2和Vue3的核心区别？答案：1）响应式：Vue2是Object.defineProperty，只能监听已有属性，数组需要重写方法；Vue3用Proxy，支持新增、删除属性、数组下标监听，兼容性更好。2）编程方式：Vue2选项式API，大项目代码碎片化；Vue3组合式API，按功能聚合代码，适合中大型项目。3）性能：Vue3打包体积更小、初始渲染更快、更新性能更强，增加了patch标记、静态提升。4）TS支持：Vue3原生支持TS，类型提示完善；Vue2对TS支持较弱。2、setup语法糖特点？ref和reactive区别？答案：setup语法糖：不用写setup函数、不用return变量、组件自动注册，代码更简洁。ref：基础类型响应式（字符串、数字、布尔），也可存对象，取值需要.value，底层还是Proxy。reactive：只针对引用类型（对象、数组），不用.value，解构会丢失响应式，需要用toRefs解决。3、Vue3生命周期和Vue2对应关系？答案：beforeCreate/created=>setup()beforeMount=>onBeforeMountmounted=>onMountedbeforeUpdate=>onBeforeUpdateupdated=>onUpdatedbeforeUnmount=>onBeforeUnmountunmounted=>onUnmounted项目中最常用：onMounted请求接口、onUnmounted清除定时器/监听，防止内存泄漏。4、watch和watchEffect区别？答案：1）watch：需要明确监听指定变量，默认惰性执行，只有变量变化才触发；可以获取新旧值。2）watchEffect：自动收集依赖，立即执行一次，依赖变化重新执行；无法获取新旧值，代码更简洁。开发选择：需要新旧值、精细监听用watch；单纯监听依赖变化执行逻辑用watchEffect。5、Vue组件通信方式（最全总结）答案：1）父子通信：props/emit2）隔代/多层：provide/inject3）兄弟/任意组件：mitt事件总线、Pinia4）全局状态：Pinia（Vue3首选，替代Vuex）5）模板穿透：$attrs/$slots四、浏览器与性能优化（面试高频场景）1、浏览器渲染过程？重排重绘区别？如何优化？答案：渲染流程：解析HTML生成DOM树=>解析CSS生成CSSOM树=>生成渲染树=>布局（重排）=>绘制（重绘）=>合成图层重排（回流）：元素布局、位置、大小改变，浏览器重新计算布局，消耗极高。重绘：元素样式改变（颜色、背景），不改变布局，只重新绘制，消耗较低。优化手段：1）批量修改DOM，避免频繁读写DOM；2）使用transform、opacity做动画，走合成层，不触发重排重绘；3）避免频繁获取offset、scroll等布局属性；4）DOM操作离线处理（文档碎片、隐藏元素修改）。2、前端常见的内存泄漏场景及解决方案答案：1）定时器/延时器未清除：页面销毁时clearTimeout/clearInterval2）事件监听未移除：onUnmounted中removeEventListener3）闭包滥用导致变量不释放：手动置空变量4）全局变量过多：尽量模块化、局部化变量5）Vue中监听window、scroll未销毁：组件销毁统一清除监听3、HTTP1.1/HTTP2/HTTP3区别答案：HTTP1.1：默认长连接，但串行请求，同一域名并发数有限，队头阻塞。HTTP2：二进制传输、多路复用，一个连接并发多个请求，头部压缩，支持服务器推送，解决队头阻塞。HTTP3：基于QUIC协议，UDP传输，彻底解决队头阻塞，握手更快、弱网体验更好。五、工程化与项目实战（3年核心考察点）1、Vite和Webpack的区别？为什么Vite更快？答案：Webpack：基于打包编译，启动时会打包所有文件，项目越大启动越慢，热更新需要重新编译模块。Vite：基于ESModule原生模块，启动不打包，按需加载文件；热更新只更新当前模块，速度极快。缺点：Vite生产打包还是依赖Rollup，复杂项目兼容问题比Webpack多。2、跨域问题怎么解决？项目中常用哪种？答案：跨域原因：浏览器同源策略（协议、域名、端口任一不同即跨域）。解决方案：1）开发环境：Vue/Vite配置proxy代理（项目最常用）；2）生产环境：后端配置CORS跨域头；3）Nginx反向代理；4）JSONP（只支持get，老旧方案，基本不用）。3、前端项目性能优化落地方案（面试可直接口述）答案：打包优化：路由懒加载、组件按需引入、图片压缩、代码分割、去除冗余代码、开启gzip压缩。加载优化：静态资源CDN、图片懒加载、预加载/预解析、接口缓存。渲染优化：减少重排重绘、长列表虚拟滚动、防抖节流优化频繁操作。体验优化：骨架屏、loading状态、错误兜底、接口超时重试。六、场景面试题（3年差异化加分项）1、怎么解决接口并发请求依赖问题？答案：无依赖并发：用Promise.all同时请求，提升速度；有先后依赖：用await串行执行，或者请求结果缓存，避免重复请求；