2026前端高频面试题及详细答案（完整版）

2026前端高频面试题及详细答案（完整版）一、HTML基础面试题1、HTML5新增特性有哪些？答：日常开发中常用的HTML5新特性主要分为几类，实用性很强：1.语义化标签：新增header、nav、main、section、article、aside、footer等标签，替代传统div布局，代码结构更清晰，利于SEO和浏览器解析。2.媒体标签：audio音频、video视频标签，无需插件即可直接播放媒体资源。3.表单增强：新增email、tel、number、date、range等表单类型，以及required、placeholder、autofocus等属性，简化表单校验和样式开发。4.本地存储：localStorage、sessionStorage，替代传统cookie，存储容量更大、使用更便捷。5.图形绘制：canvas绘图、svg矢量图形，可实现复杂动画和可视化效果。6.其他功能：拖拽API、地理位置API、websocket长连接、history路由API等。2、语义化标签的好处是什么？答：第一，代码结构清晰，可读性高，团队协作时别人能快速看懂页面模块分工；第二，对搜索引擎友好，爬虫可以精准识别页面结构和核心内容，提升SEO优化效果；第三，适配无障碍访问，屏幕阅读器能精准解析页面模块，服务特殊用户群体；第四，利于浏览器解析渲染，减少布局错乱问题。3、cookie、localStorage、sessionStorage的区别？答：三者都是前端本地存储方式，核心区别集中在存储容量、生命周期、请求携带、作用域：1.存储容量：cookie最小，仅4KB左右；localStorage和sessionStorage可达5MB-10MB。2.生命周期：cookie可手动设置过期时间，默认关闭浏览器失效；localStorage永久存储，手动清除才会失效；sessionStorage仅当前会话有效，关闭标签页立即清空。3.请求携带：cookie会在每次HTTP请求中自动携带，后端可直接获取；localStorage、sessionStorage仅前端可用，不会参与网络请求。4.作用域：cookie同域名下跨标签页共享；localStorage全局域名共享；sessionStorage仅限当前标签页，不同标签页不互通。二、CSS面试高频题1、CSS选择器优先级顺序？答：优先级从高到低依次为：!important>行内样式（style）>ID选择器>类选择器、伪类选择器、属性选择器>标签选择器、伪元素选择器>通配符选择器（*）>继承样式。优先级权重计算规则：行内样式(1000)>ID(100)>类/伪类(10)>标签(1)，权重高的样式优先生效，权重相同时，后写的样式覆盖先写的。2、盒子模型有几种？区别是什么？答：CSS包含标准盒模型和怪异盒模型两种，由box-sizing属性控制：1.标准盒模型（content-box，默认）：元素宽高仅包含content内容区，padding、border会额外撑开元素整体尺寸，布局容易超出预期。2.怪异盒模型（border-box）：元素设置的宽高包含content+padding+border，内容区宽高会自动自适应缩减，不会撑大盒子，是日常开发最常用的模式。3、flex常用属性及居中方案答：flex是弹性布局，适配移动端和自适应布局，核心常用属性：容器属性：display:flex（开启弹性布局）、flex-direction（主轴方向）、justify-content（主轴对齐）、align-items（侧轴对齐）、flex-wrap（是否换行）。子项属性：flex-grow（放大比例）、flex-shrink（缩小比例）、flex-basis（基础尺寸）、flex（简写）、align-self（单独对齐）。万能居中方案：父元素设置display:flex;justify-content:center;align-items:center;可实现子元素水平垂直居中，兼容性好、代码简洁。4、BFC是什么？如何触发？有什么作用？答：BFC即块级格式化上下文，是浏览器的一块独立渲染区域，区域内部元素的布局不会影响外部元素，外部也不会干扰内部。常见触发条件：float不为none、overflow不为visible、position为absolute/fixed、display为inline-block/flex/grid等。核心作用：解决浮动塌陷问题、解决上下margin重叠问题、实现自适应两栏/三栏布局。5、CSS动画和过渡的区别？答：transition过渡：仅支持属性从一个状态到另一个状态的单次过渡，无关键帧，需要触发条件（hover、点击等），适合简单动效。animation动画：支持关键帧@keyframes，可以设置多段状态、循环播放、延迟、动画速度曲线，无需触发即可自动执行，适合复杂、循环的动画效果。三、JavaScript核心面试题（重点）1、var、let、const的区别？答：三者核心差异在作用域、变量提升、重复声明、修改特性：1.作用域：var是函数作用域，let、const是块级作用域（{}内部有效）。2.变量提升：var存在变量提升，声明前调用值为undefined；let、const存在暂时性死区，声明前调用直接报错。3.重复声明：var允许重复声明；let、const不允许重复声明同一变量。4.赋值修改：var、let可重复赋值修改；const声明常量，必须初始化，且不能修改基础类型值，引用类型可修改内部属性。日常开发优先使用const，可变变量使用let，完全不用var。2、JS数据类型有哪些？如何判断？答：JS一共8种数据类型，分为基础类型和引用类型：基础类型（7种）：String、Number、Boolean、Null、Undefined、Symbol、BigInt引用类型（1种）：Object（包含普通对象、数组、函数、正则等）判断方式：1.typeof：适合判断基础类型，无法区分null、数组、对象，返回值均为object。2.instanceof：判断引用类型，可区分数组、对象、函数，无法判断基础类型。3.Ototype.toString.call()：最精准，可判断所有数据类型，是项目常用判断方式。3、原型和原型链的理解？答：JS中每个函数都有prototype原型对象，每个实例对象都有__proto__属性，指向构造函数的prototype。原型链：当访问对象的属性或方法时，自身没有就会通过__proto__向上查找对应的原型，直到找到Ototype，最终指向null，这条查找链路就是原型链。核心作用：实现属性和方法的共享、继承，减少内存占用，是JS实现面向对象的核心机制。4、闭包是什么？优缺点及使用场景？答：闭包指内层函数访问外层函数的变量，且外层函数执行结束后，内层函数依然可以保留外层变量的作用域，形成闭包。简单说：函数嵌套，内部函数引用外部变量，就是闭包。优点：可以保留私有变量、延长变量生命周期、实现模块化隔离。缺点：变量常驻内存，容易造成内存占用过高，使用不当会引发内存泄漏。常用场景：防抖节流、定时器封装、私有变量封装、柯里化函数、模块化开发。5、同步、异步的区别？宏任务和微任务？答：JS是单线程语言，同步代码自上而下依次执行，必须等上一段代码执行完毕才会执行下一段，容易阻塞代码。异步代码不会阻塞主线程，耗时任务放入任务队列，主线程同步代码执行完毕后再执行异步任务。任务分为宏任务和微任务：宏任务：script整体代码、setTimeout、setInterval、AJAX请求、DOM事件。微任务：Promise.then/catch/finally、async/await、queueMicrotask。执行顺序：先执行全部同步代码→清空所有微任务→执行一轮宏任务，循环往复（事件循环EventLoop）。6、Promise是什么？三种状态及优缺点？答：Promise是解决异步回调地狱的方案，用于处理异步请求、异步任务，让异步代码扁平化、更易维护。三种状态：pending（进行中）、fulfilled（成功）、rejected（失败），状态一旦改变就不会再次变更。优点：解决回调嵌套问题、支持链式调用、可以统一处理异步错误。缺点：一旦创建就会立即执行，无法中途取消、无法监听进度、内部错误不主动捕获会静默失败。7、async/await的理解？和Promise的区别？答：async/await是Promise的语法糖，2026项目中基本是主流异步写法。async修饰的函数默认返回Promise对象，await用于等待Promise执行完成，将异步代码改成同步写法，可读性极强。区别：Promise是链式调用，多层异步依然有轻微嵌套；async/await是线性写法，代码更简洁优雅，支持try/catch统一捕获错误，调试更方便。8、JS垃圾回收机制？答：JS是自动垃圾回收语言，无需手动管理内存，核心回收两种机制：1.标记清除：最常用，浏览器遍历所有变量，标记活跃变量，清除无标记的无用变量，释放内存。2.引用计数：统计变量引用次数，引用为0时立即回收，容易产生循环引用无法回收的问题。常见内存泄漏场景：全局变量过多、闭包滥用、定时器未清除、事件监听未移除、DOM节点未释放。四、Vue3高频面试题（2026主流）1、Vue2和Vue3的核心区别？答：1.响应式原理：Vue2基于Object.defineProperty，无法监听数组下标、新增/删除属性；Vue3基于Proxy，支持全量监听，适配所有数据变化。2.架构：Vue3采用组合式API（setup），代码按需组织，适合大型项目；Vue2选项式API，代码按配置分类，大型项目杂乱难维护。3.性能：Vue3支持编译优化、静态提升、补丁标记，渲染速度更快，打包体积更小。4.新增特性：setup语法糖、ref/reactive、computed/watch新写法、Teleport、Suspense、CompositionAPI。5.生命周期：Vue3生命周期部分更名，移除了beforeCreate、created，统一在setup中执行。2、ref和reactive的区别？答：1.适用场景：ref用于基础类型（字符串、数字、布尔），也可用于简单对象；reactive专门用于复杂引用类型（对象、数组）。2.底层原理：ref底层依然是Proxy，通过value属性响应式；reactive直接对对象进行Proxy劫持。3.使用方式：ref变量访问/修改需要.value；reactive直接操作属性即可。4.特点：ref值更新会替换整个变量；reactive是深度响应式，支持解构（需配合toRefs保留响应式）。3、Vue3生命周期及执行顺序？答：常用生命周期执行顺序：setup→onBeforeMount→onMounted→onBeforeUpdate→onUpdated→onBeforeUnmount→onUnmounted。核心常用：onMounted（DOM挂载完成，可请求接口、操作DOM）、onUpdated（数据更新DOM渲染完成）、onUnmounted（组件销毁，清除定时器、事件监听）。4、Vue双向绑定原理？答：双向绑定核心是数据劫持+视图更新。Vue3通过Proxy劫持数据的读取、修改、删除操作，数据变化时触发依赖收集，更新视图；同时通过v-model绑定视图，视图输入变化时同步更新数据，实现双向同步。v-model本质是语法糖：value属性绑定+input事件监听。5、watch和computed的区别？答：1.特性：computed是计算属性，有缓存，依赖值不变则不重复计算；watch无缓存，数据变化就执行。2.适用场景：computed适合简单数据计算、派生数据；watch适合异步操作、复杂逻辑、数据变化监听。3.返回值：computed必须有return返回值；watch不需要返回值。4.执行时机：computed页面加载会默认执行一次；watch默认数据变化才执行（可开启immediate立即执行）。五、前端工程化&性能优化1、前端性能优化方案（面试必背）答：我日常项目中会从加载、渲染、代码、网络四个维度做优化：1.网络优化：静态资源CDN加速、图片压缩/懒加载、接口缓存、减少HTTP请求、开启gzip压缩。2.打包优化：路由懒加载、组件按需引入、去除冗余代码、打包分包、压缩js/css代码。3.渲染优化：避免频繁DOM操作、使用防抖节流、减少重绘重排、开启GPU加速、虚拟列表处理长列表。4.代码优化：合理使用缓存、避免全局变量泛滥、及时清除定时器和事件监听、优化循环逻辑。5.用户体验优化：骨架屏、加载动画、图片预加载、接口请求loading状态。2、webpack/vite的区别？为什么现在多用vite？答：webpack是打包构建工具，基于打包机制，启动项目需要先打包所有文件，冷启动速度慢，大型项目热更新较慢。vite是新一代构建工具，基于ES模块原生能力，开发环境无需打包，按需加载文件，冷启动极快；热更新只更新对应模块，速度远超webpack。生产环境基于rollup打包，打包体积更小。2026年新项目基本默认使用vite。3、模块化CommonJS和ES6Module区别？答：1.适用环境：CommonJS用于Node端，ES6Module是浏览器和node通用标准。2.加载方式：CommonJS是运行时加载，整体加载模块；ES6Module是编译时加载，按需加载。3.特性：CommonJS模块输出值是拷贝值，修改互不影响；ES6Module输出是引用值，原始值变化会同步更新。4.语法：CommonJS用require/module.exports；ES6Module用import/export。六、网络面试题1、HTTP1.1、HTTP2、HTTP3区别？答：1.HTTP1.1：支持长连接，但同一域名有6个请求限制，请求串行，存在队头阻塞，头部冗余。2.HTTP2：支持多路复用，同一连接可并行多个请求，解决队头阻塞；头部压缩、服务器推送，大幅提升传输效率。3.HTTP3：基于QUIC协议，采用UDP传输，彻底解决TCP队头阻塞，连接更快、抗网络抖动能力更强，是目前最新主流协议。2、HTTPS和HTTP的区别？答：1.安全性：HTTP是明文传输，无加密，容易被劫持、篡改；HTTPS基于SSL/TLS加密传输，数据安全、防篡改、防劫持。2.端口：HTTP默认80端口，HTTPS默认443端口。3.性能：HTTPS需要握手加密，首次请求速度略慢；HTTP无加密流程，速度更快。4.证书：HTTPS需要CA证书认证，HTTP无需证书。3、TCP三次握手、四次挥手？答：三次握手（建立连接）：1.客户端向服务端发送连接请求；2.服务端接收请求，返回确认消息；3.客户端接收确认，正式建立连接。目的：确保双方收发能力均正常。四次挥手（断开连接）：1.客户端发起断开请求；2.服务端确认接收断开请求，继续传输剩余数据；3.服务端数据传输完毕，发起断开请求；4.客户端确认断开，连接关闭。目的：保证数据完全传输完毕，不丢失数据。七、手写代码高频题（面试必考）1、手写防抖函数核心逻辑：触发事件后，延迟执行函数，期间再次触发则重置延时，只执行最后一次。适用于输入框搜索、窗口resize。javascript

functiondebounce(fn,delay=300){

lettimer=null

returnfunction(...args){

if(timer)clearTimeout(timer)

timer=setTimeout(()=>{

fn.apply(this,args)

},delay)

}

}2、手写节流函数核心逻辑：固定时间内只执行一次函数，稀释执行频率。适用于滚动、拖拽、点击频繁触发。javascript

functionthrottle(fn,delay=300){

letflag=false

returnfunction(...args){

if(flag)return

flag=true

setTimeout(()=>{

fn.apply(this,args)

flag=false

},delay)

}

}3、手写Promise实现核心：三种状态、状态不可变、then链式调用、异步回调处理，满足基础使用规范，面试写简易版即可。javascript

classMyPromise{

constructor(executor){

this.status='pending'

this.value=null

this.reason=null

this.resolveCb=[]

this.rejectCb=[]

constresolve=(val)=>{

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