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

3年前端工程师高频面试题（含详细答案）说明：本套试题针对工作3年左右前端工程师，聚焦职场实战、高频面试考点，涵盖JS核心、浏览器、CSS、Vue/React、工程化、手写代码、场景优化等核心模块，答案贴合一线企业面试标准，通俗易懂、无书面化套话。一、JavaScript核心基础（高频必考）1.说说var、let、const的区别？参考答案：1）变量提升：var存在变量提升，声明前访问会返回undefined；let、const不存在变量提升，声明前访问会报错，存在暂时性死区。2）作用域：var仅支持函数作用域和全局作用域，不支持块级作用域；let、const支持块级作用域（{}、if、for内部）。3）重复声明：var允许重复声明变量；let、const禁止同一作用域内重复声明。4）赋值特性：let可重复修改值；const声明后必须赋值，且基础类型值不可修改，引用类型可修改内部属性（仅锁定地址）。实际开发规范：优先使用const，可变变量使用let，完全不用var。2.什么是闭包？闭包的作用和弊端是什么？日常怎么用？参考答案：闭包指内层函数可以访问外层函数的变量，且外层函数执行结束后，内层函数依然可以保留外层变量的引用，不会被垃圾回收。简单说：函数嵌套，内层引用外层变量，就是闭包。作用：1）实现变量私有化，避免全局变量污染；2）缓存数据，保留函数执行后的状态；3）实现防抖、节流、柯里化等工具函数。弊端：会造成变量常驻内存，无法及时回收，容易引发内存堆积，严重时导致内存泄漏。日常使用：封装私有方法、防抖节流、定时器回调、组件数据缓存，使用完毕后手动置空变量，释放内存。3.讲讲JS原型和原型链，以及继承的实现方式参考答案：1）原型：每个函数都有prototype原型对象，用来存放实例共享的方法和属性，减少内存占用；每个实例对象都有__proto__属性，指向构造函数的prototype。2）原型链：当访问对象的属性/方法时，自身没有就会通过__proto__向上查找，直到Ototype，终点为null，这条查找链路就是原型链。常用继承方式（实战常用）：1）ES6class继承：最简、最常用，通过extends+super实现，支持静态方法、实例方法继承，项目开发主力方式；2）原型继承：子类原型指向父类实例，实现方法继承，但无法继承父类实例属性；3）组合继承：结合原型继承和构造函数继承，解决属性和方法继承问题，存在原型冗余问题；日常开发统一使用ES6class继承，兼容性足够、代码简洁易维护。4.宏任务和微任务的区别？EventLoop执行顺序是什么？参考答案：JS是单线程语言，通过事件循环处理异步任务，任务分为宏任务、微任务。宏任务：耗时较长的异步任务，包括script整体代码、setTimeout、setInterval、AJAX、DOM事件、UI渲染。微任务：优先级更高、执行更快的任务，包括Promise.then/catch/finally、async/await、queueMicrotask。完整执行顺序：1）先执行同步代码（主线程栈任务）；2）同步代码执行完毕，清空所有微任务队列；3）执行一轮宏任务；4）重复2、3步骤，循环执行。核心考点：微任务优先级高于宏任务，每一轮宏任务执行完，必须清空所有微任务。5.async/await的原理，以及和Promise的区别参考答案：async/await是Promise的语法糖，本质没有改变异步机制，只是让异步代码写法同步化，可读性更强。1）async修饰函数，函数返回值会自动包装成Promise对象；2）await只能在async函数内使用，会阻塞后续代码，等待Promise执行完成，获取最终结果；3）异常处理：await报错需要通过try/catch捕获，避免程序崩溃。区别：Promise是链式调用，多层异步会出现链式嵌套，代码冗长；async/await线性写法，逻辑清晰，便于调试和维护，是目前项目主流异步写法。二、浏览器与网络考点1.从输入网址到页面渲染完成，全过程讲一下参考答案：1）DNS解析：将域名解析为服务器IP地址，先查本地缓存，再递归查询DNS服务器；2）TCP三次握手：与服务器建立可靠连接，确保数据传输稳定；3）发送HTTP/HTTPS请求：携带请求头、参数、cookie等信息，向服务器请求资源；4）服务器处理请求：后端接收参数、逻辑处理、查询数据，返回响应报文（状态码、响应头、html、js、css资源）；5）浏览器解析资源：解析HTML生成DOM树，解析CSS生成CSSOM树，合并生成渲染树；6）页面布局（回流）：计算元素大小、位置；7）页面绘制（重绘）：填充颜色、图片、文字、边框；8）合成图层：将页面分层渲染，提升流畅度，最终展示页面；9）TCP四次挥手：断开连接。2.回流和重绘的区别？如何优化？参考答案：重绘：元素样式改变，但不影响布局（如颜色、透明度、背景色），浏览器重新绘制元素，开销较小。回流：元素布局、大小、位置改变（如宽高、边距、定位、字体大小），浏览器需要重新计算整个页面布局，开销极大，回流必然触发重绘，重绘不会触发回流。优化方案：1）避免频繁操作DOM，批量修改样式，可统一修改class代替逐个修改样式；2）频繁操作的元素，先设置为脱离文档流（absolute/fixed），修改完成后复原；3）使用文档碎片批量插入DOM节点；4）开启硬件加速，使用transform、opacity实现动画，不会触发回流。3.HTTP1.1、HTTP2、HTTP3的区别参考答案：1）HTTP1.1：默认长连接，支持缓存、断点续传，但存在队头阻塞，同一域名下有限制请求数量，多个请求串行执行，性能一般。2）HTTP2：基于TCP，支持多路复用，一个连接可并行多个请求，解决队头阻塞；支持头部压缩、二进制传输、服务器推送，大幅提升加载速度。3）HTTP3：基于QUIC协议（UDP），彻底解决TCP队头阻塞，连接建立更快、抗网络抖动能力强，弱网环境体验更好，目前主流网站已逐步普及。4.跨域产生的原因及常用解决方案参考答案：跨域是浏览器同源策略限制，协议、域名、端口任意一个不同，即为跨域，目的是防止恶意网站窃取本地数据，保障前端安全。常用解决方案（项目实战优先级排序）：1）后端配置CORS：主流方案，后端设置Access-Control-*响应头，允许指定域名跨域；2）本地代理（webpack/viteproxy）：开发环境使用，前端配置代理转发请求，规避跨域；3）Nginx反向代理：生产环境常用，统一域名端口，解决跨域；4）JSONP：仅支持get请求，兼容性好，无法处理post请求，现在基本不用；5）WebSocket：不受同源策略限制，可实现跨域通信。三、CSS高频面试题1.居中布局的常用方式（水平+垂直居中）参考答案：1）Flex居中（最常用）：父元素设置display:flex;justify-content:center;align-items:center;适配所有场景，简洁高效。2）Grid居中：父元素display:grid;place-items:center;一行代码实现居中。3）绝对定位居中：子元素absolute;top:50%;left:50%;transform:translate(-50%,-50%);适配不定宽高元素。4）定宽高居中：absolute+上下左右0+margin:auto;仅适用于固定宽高元素。2.BFC是什么？有什么作用？参考答案：BFC即块级格式化上下文，是浏览器的独立渲染区域，内部元素布局不会影响外部元素。触发条件：浮动元素、绝对定位元素、overflow不为visible、display为inline-block/flex/grid等。实际作用：1）清除浮动，解决父元素高度塌陷；2）解决上下margin重叠问题；3）实现自适应两栏、三栏布局。3.CSS选择器优先级参考答案：优先级从高到低：!important>行内样式>ID选择器>类/伪类/属性选择器>标签选择器>通配符>继承样式优先级就近原则：同级样式，后写的样式覆盖先写的样式。开发中尽量不用!important，避免样式难以维护。四、Vue框架核心（3年必备）1.Vue2和Vue3的核心区别参考答案：1）响应式原理：Vue2基于Object.defineProperty，无法监听新增、删除属性，数组需要重写方法；Vue3基于Proxy，支持全量监听，可监听新增、删除、数组变化，兼容性更好。2）语法风格：Vue2选项式API，代码分散，大型项目逻辑混乱；Vue3组合式API，按功能聚合代码，复用性、可维护性更强。3）打包体积：Vue3支持按需编译，移除冗余代码，体积更小，运行速度更快。4）生命周期：Vue3部分生命周期更名，废弃beforeCreate/created，统一使用setup替代。5）新增特性：Vue3新增Teleport、Suspense、CompositionAPI、多根节点等特性。2.Vue响应式原理详细说明参考答案：Vue2：通过Object.defineProperty劫持对象已有属性的get、set方法，数据读取时收集依赖，数据修改时触发更新。缺陷是无法监听对象新增/删除属性、数组下标和长度修改，需要借助$set解决。Vue3：通过ES6Proxy代理整个对象，可拦截属性读取、修改、新增、删除、数组操作等所有行为，配合track收集依赖、trigger触发更新，实现完整响应式，无需额外处理数组和新增属性。核心逻辑：数据劫持+依赖收集+视图更新。3.Vue组件通信方式有哪些？适用场景参考答案：1）父子通信：props/$emit，最基础常用，适用于简单父子组件传值；2）祖孙跨级通信：provide/inject，无需逐层传参，适合深层组件传值；3）全局通信：Vuex/Pinia，适合全局状态管理（用户信息、菜单、全局配置）；4）兄弟组件通信：事件总线（mitt）、全局状态管理，适合简单兄弟传值；5）ref/$parent/$children：直接获取组件实例，适合简单方法调用，不推荐大量使用。4.Vue生命周期钩子及使用场景参考答案：1）setup（Vue3）：组件初始化，定义变量、方法、监听；2）onMounted：DOM挂载完成，可操作DOM、发送首次请求、初始化定时器；3）onUpdateed：数据更新、DOM重新渲染后触发；4）onUnmounted：组件销毁，清除定时器、解绑事件、取消请求，防止内存泄漏；5）onBeforeRouteLeave：路由跳转前拦截，做页面离开确认、数据保存。五、前端工程化与性能优化1.说说你项目中做过的前端性能优化参考答案：结合日常项目，从加载、渲染、代码、网络四个维度优化：1）网络优化：静态资源CDN部署、图片懒加载、图片压缩（webp格式）、接口缓存、gzip压缩；2）打包优化：路由懒加载、组件按需引入、剔除冗余代码、打包分包（splitChunks）、移除console；3）渲染优化：减少回流重绘、使用transform做动画、虚拟列表处理长列表数据、防抖节流优化高频事件；4）代码优化：合理使用缓存、避免全局变量泛滥、销毁定时器和监听事件、减少DOM操作；5）用户体验：骨架屏、加载动画、错误兜底、预加载关键资源。2.Vite和Webpack的区别？为什么Vite更快？参考答案：1）构建原理：Webpack基于打包构建，启动时会打包所有文件，项目越大启动越慢；Vite基于浏览器ESModule原生能力，开发环境无需打包，按需加载文件。2）更新速度：Webpack热更新需要重新编译打包；Vite精准更新修改的模块，热更新秒级响应。3）适用场景：小型项目、快速开发用Vite；大型复杂项目、兼容老业务优先Webpack，生态更完善。六、手写代码实战题（面试必考）1.手写防抖函数参考答案：javascript

//防抖：触发事件后，延迟n秒执行，期间再次触发重置计时

functiondebounce(fn,delay=300){

lettimer=null

returnfunction(...args){

if(timer)clearTimeout(timer)

timer=setTimeout(()=>{

fn.apply(this,args)

timer=null

},delay)

}

}

//适用场景：搜索框输入、窗口resize、表单输入校验2.手写节流函数参考答案：javascript

//节流：固定时间内只执行一次，防止高频触发

functionthrottle(fn,delay=300){

letflag=true

returnfunction(...args){

if(!flag)return

flag=false

setTimeout(()=>{

fn.apply(this,args)

flag=true

},delay)

}

}

//适用场景：滚动监听、鼠标移动、按钮高频点击3.手写Promise简易版参考答案：javascript

classMyPromise{

constructor(executor){

this.status='pending'

this.value=null

this.reason=null

this.resolveCb=[]

this.rejectCb=[]

constresolve=(val)=>{

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

this.status='fulfilled'

this.value=val

this.resolveCb.forEach(fn=>fn())

}

}

constreject=(err)=>{

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

this.status='rejected'

this.reason=err

this.rejectCb.forEach(fn=>fn())

}

}

try{

executor(resolve,reject)

}catch(err){

reject(err)

}

}

then(resolveFn,rejectFn){

resolveFn=resolveFn||(val=>val)

rejectFn=rejectFn||(err=>{throwerr})

if(this.status==='ful