2026年前端高频面试题及详细答案（真实面试版）

2026年前端高频面试题及详细答案（真实面试版）说明：所有答案贴合一线大厂真实面试作答逻辑，去除书面模板化话术，侧重实战理解和工程落地，适配2026年前端面试侧重点，涵盖基础、核心原理、工程化、性能优化、手写代码、业务场景六大模块。一、HTML/CSS基础面试题1、HTML5新增特性有哪些？日常开发常用哪些？参考答案：HTML5主要新增了结构标签、表单功能、多媒体能力、本地存储、语义化能力等，我日常开发用得最多的是语义化标签、表单新属性、本地存储和媒体标签。核心新增点：1.语义化结构标签：header、nav、main、section、article、footer，替代传统div布局，代码结构更清晰，利于SEO和可读性；2.多媒体标签：audio、video，无需插件即可实现音视频播放，支持原生控制属性；3.表单增强：新增input类型tel、email、number、date，以及required、placeholder、autofocus、正则校验等属性，简化表单校验开发；4.本地存储：localStorage、sessionStorage，弥补cookie存储量小、携带请求头的问题；5.其他能力：canvas绘图、svg矢量图、拖拽API、地理位置API等，项目中按需使用。2、CSS选择器优先级规则？如何计算？参考答案：CSS优先级是用来判定样式覆盖规则的核心标准，优先级从高到低排序：!important>行内样式>ID选择器>类/伪类/属性选择器>标签选择器>通配符选择器>继承样式。日常计算不用复杂公式，记实战规则即可：1.优先级逐位对比，高位胜出，不累计叠加；2.多个同类选择器叠加，只提升同层级权重，不会跨层级超越高级选择器；3.!important优先级最高，开发中尽量少用，会打乱样式层级，难以维护；4.样式优先级相同时，后写的样式会覆盖先写的样式。实战场景：写通用组件样式时，尽量用类选择器，避免ID和行内样式，方便后续覆写维护。3、flex布局常用属性及实战场景参考答案：flex是目前项目主流的布局方案，兼容性足够，适配移动端和PC端，分为容器属性和子项属性。容器常用属性：1.display:flex：开启弹性布局；2.flex-direction：设置主轴方向，row横向、column纵向，默认横向；3.justify-content：主轴对齐，常用center居中、space-between两端对齐、space-around均分；4.align-items：侧轴对齐，center垂直居中最常用；5.flex-wrap:wrap：自动换行，默认不换行，内容溢出会挤压子项。子项常用属性：1.flex:1：自动均分剩余空间，适配自适应布局；2.align-self：单独设置当前子项的侧轴对齐方式；3.flex-shrink:0：禁止子项压缩，固定尺寸常用。实战场景：页面居中、列表自适应、导航栏布局、卡片等分布局，全部优先用flex，比传统浮动布局更简洁，无需清除浮动。4、BFC是什么？触发条件和实战作用参考答案：BFC是块级格式化上下文，相当于一个独立的渲染区域，区域内的元素布局不会影响外部元素，外部也不会影响内部。常用触发条件：1.根元素html自带BFC；2.overflow不为visible（hidden/auto/scroll）；3.display为inline-block、flex、grid；4.元素设置float、position为absolute/fixed。实战用途（核心三点）：1.解决浮动塌陷：父元素高度塌陷问题，触发父级BFC即可撑起高度；2.解决外边距重叠：相邻块级元素上下margin合并，BFC容器可隔离；3.实现自适应两栏布局：左侧浮动固定宽度，右侧触发BFC自适应铺满剩余宽度。二、JavaScript核心基础1、JS数据类型有哪些？区别是什么？参考答案：JS一共8种数据类型，分为基本数据类型和引用数据类型。基本类型（7种）：String、Number、Boolean、Null、Undefined、Symbol、BigInt；引用类型（1种）：Object，包含普通对象、数组、函数、正则等。核心区别：1.存储位置：基本类型存在栈内存，引用类型栈存地址、堆存真实数据；2.赋值机制：基本类型赋值是值拷贝，新旧变量互不影响；引用类型赋值是地址拷贝，修改一个会影响另一个；3.数据大小：基本类型体积小、固定；引用类型体积不固定，可无限扩展属性。补充：Symbol用来定义唯一不重复的属性名，解决对象属性覆盖问题；BigInt用于处理超大整数，避免Number精度丢失。2、null和undefined的区别？参考答案：两者都代表空值，但语义和使用场景完全不同。undefined：代表未定义，是系统默认空值。变量声明未赋值、函数无返回值、获取对象不存在的属性，都会返回undefined。null：代表手动置空，是开发者主动赋值的空对象。一般用于主动释放对象、清空变量、接口返回空数据的场景。核心区别：typeofnull结果是object（历史bug），typeofundefined结果是undefined；日常开发中，初始化对象变量优先赋值null，变量未初始化不用手动赋值undefined。3、作用域、作用域链、闭包详解及实战应用参考答案：1.作用域：变量的可访问范围，JS分为全局作用域、函数作用域、块级作用域（let/const），作用域内变量外部无法直接访问。2.作用域链：当访问一个变量时，会先在当前作用域查找，找不到就向上层父作用域查找，直到全局作用域，这条查找链路就是作用域链。3.闭包：函数嵌套函数，内层函数访问外层函数的变量，并且内层函数被外部调用，就会形成闭包。闭包会保留外层作用域的变量，不会被垃圾回收。实战应用：1.私有化变量：避免全局变量污染，封装私有方法和属性；2.缓存数据：利用变量常驻内存的特性，做简单数据缓存；3.定时器、事件回调：保留当前作用域的变量状态；注意点：闭包会造成内存常驻，滥用会导致内存泄漏，使用后及时手动释放变量。4、var、let、const的区别参考答案：1.变量提升：var存在变量提升，声明前可访问，值为undefined；let、const无变量提升，存在暂时性死区，声明前访问会报错。2.作用域：var只有全局、函数作用域，无块级作用域；let、const支持块级作用域，大括号内有效。3.重复声明：var允许重复声明变量；let、const同一作用域禁止重复声明。4.赋值规则：var、let可修改值；const声明后不可修改引用地址，声明时必须赋值（引用类型可修改内部属性）。开发规范：日常全部使用let、const，彻底废弃var，避免变量污染和作用域混乱。5、原型和原型链的核心理解参考答案：JS所有函数都有prototype（显式原型），所有对象都有__proto__（隐式原型），对象的隐式原型指向构造函数的显式原型。原型的作用：实现属性和方法的共享，减少内存占用。比如数组的push、map方法，都是定义在Atotype上，所有数组实例共享使用，不用每个实例单独创建。原型链：对象查找属性/方法时，先找自身，没有就顺着__proto__找构造函数原型，再往上找Object原型，最终指向null，这条链路就是原型链。实战场景：封装公共方法、实现继承、手写内置方法、框架底层原理都会用到原型。6、异步JS宏任务、微任务、事件循环机制参考答案：JS是单线程语言，为了处理异步任务，依靠事件循环（EventLoop）执行代码，核心规则：先执行同步代码，再清空所有微任务，最后执行一个宏任务，循环往复。微任务（优先级高）：Promise.then/catch/finally、async/await后续代码、queueMicrotask、MutationObserver。宏任务（优先级低）：script整体代码、setTimeout、setInterval、AJAX、DOM事件。执行顺序总结：同步代码=>所有微任务=>单个宏任务=>再次清空微任务=>下一个宏任务。面试高频坑点：await后面的代码是微任务，会等同步代码执行完再执行；Promise主体是同步代码，then回调才是微任务。7、Promise核心原理及常用方法参考答案：Promise是解决异步回调地狱的方案，统一异步代码写法，让异步代码扁平化、可维护。三种状态：pending（等待）、fulfilled（成功）、rejected（失败），状态一旦改变不可逆。常用核心方法：1.then：接收成功结果，可链式调用；2.catch：捕获失败异常，统一处理错误；3.finally：无论成功失败都会执行，适合关闭加载、清空状态；4.Promise.all：全部成功才成功，有一个失败直接失败，适合并行请求；5.Promise.race：谁先完成返回谁，适合请求超时拦截；6.Promise.allSettled：所有请求结束，不管成功失败，返回全部结果，适合批量请求不中断场景。8、async/await的原理和优缺点参考答案：async/await是Promise的语法糖，本质还是Promise，只是把异步代码改成同步写法，可读性极强。核心规则：async修饰的函数默认返回Promise对象；await会阻塞后续代码，等待Promise状态完成后再执行。优点：代码简洁、逻辑清晰、层级扁平，彻底解决回调地狱，适合串行异步请求。缺点：会阻塞代码执行，多个无依赖的请求不建议单独await，推荐用Promise.all并行执行，提升效率。错误处理：优先用try/catch捕获异常，也可以用await.catch()简洁处理。三、Vue3核心面试题（2026重点）1、Vue2和Vue3的核心区别参考答案：1.底层原理：Vue2是Object.defineProperty劫持属性，存在数组重写、新增属性不响应的问题；Vue3用Proxy代理整个对象，支持数组、新增属性、删除属性响应式，无缺陷。2.语法风格：Vue2选项式API，代码碎片化；Vue3组合式API（setup），按业务逻辑聚合代码，适合大型项目。3.性能优化：Vue3支持静态提升、补丁标记、事件缓存，减少diff开销，渲染速度更快；打包体积更小，移除冗余API。4.生命周期：Vue3移除beforeCreate、created，统一在setup中编写；生命周期钩子需引入使用，命名全部加on前缀。5.类型支持：Vue3原生适配TS，类型推导更精准，适合中大型项目维护。2、Vue3响应式原理（Proxy+Reflect）参考答案：Vue3响应式核心是Proxy数据劫持+依赖收集+派发更新，搭配Reflect优化操作。1.劫持：通过Proxy拦截对象的读取、修改、删除、新增、数组操作等所有行为，相比Vue2的属性劫持，覆盖所有场景；2.依赖收集：页面渲染读取数据时，收集当前组件的渲染依赖，记录数据和视图的对应关系；3.派发更新：数据被修改时，触发更新函数，重新渲染视图；4.Reflect：配合Proxy使用，统一对象操作的返回值，修复this指向问题，让代码更规范。补充：ref处理基本类型响应式，通过包装成对象实现；reactive处理引用类型响应式。3、setup语法糖的特点和注意事项参考答案：setup是Vue3组合式API的核心执行环境，组件创建前执行，比生命周期更早。核心特点：1.语法糖<scriptsetup>无需手动return变量和方法，模板可直接使用，代码更简洁；2.自动解构props、emit，无需手动定义setup参数；3.组件、指令引入后可直接使用，无需注册；4.天生支持TS，类型定义更简单。注意事项：1.setup中没有this，所有API按需引入；2.代码执行时机早，无法获取DOM；3.响应式变量必须用ref/reactive声明，普通变量不具备响应式。4、Vue3生命周期及使用场景参考答案：常用核心生命周期（组合式API）：1.onBeforeMount：挂载前，可提前处理初始数据；2.onMounted：挂载完成，DOM已生成，用于请求接口、操作DOM、初始化定时器；3.onBeforeUpdate：数据更新前，视图重新渲染前触发；4.onUpdated：数据更新后，视图渲染完成，可操作更新后的DOM；5.onBeforeUnmount：组件卸载前，清除定时器、解绑事件、取消请求，防止内存泄漏；6.onUnmounted：组件卸载完成，释放资源。日常开发90%场景只用onMounted、onBeforeUnmount两个钩子。5、Vue组件通信方式（Vue3最全）参考答案：1.父子通信：父传子props，子传父defineEmits，父子双向绑定v-model（Vue3支持多v-model）；2.祖孙跨级通信：provide/inject，无需层层传递，适合全局状态、主题、权限配置；3.兄弟/任意组件通信：mitt事件总线，轻量高效，适合小型项目；4.全局状态通信：Pinia，替代Vuex，语法简洁、模块化、无嵌套，中大型项目首选；5.属性透传：attrs，快速传递自定义属性和事件，无需手动声明props。6、Pinia相比Vuex的优势参考答案：1.极简语法：移除mutation，直接在action中修改状态，不用繁琐的提交步骤；2.模块化天然隔离：每个store独立，无需modules嵌套，结构清晰；3.完美适配TS：类型推导精准，支持自动提示，类型错误可提前校验；4.体积更小、性能更好：底层精简，无冗余逻辑；5.支持直接解构使用，无需辅助函数，代码更简洁。2026年项目开发已全面淘汰Vuex，统一使用Pinia。四、前端工程化&性能优化1、Vite和Webpack的区别？Vite优势参考答案：核心区别：构建机制不同。Webpack是基于打包构建，启动时打包所有文件；Vite基于浏览器原生ES模块，按需编译。Vite核心优势：1.启动极速：开发环境无需打包，按需加载文件，项目越大优势越明显；2.热更新更快：只更新修改的单个模块，不重新打包整体文件；3.原生支持TS、JSX，零配置适配大部分场景；4.生产环境基于Rollup打包，打包体积小、效率高。目前Vue3、React新项目基本全部使用Vite，Webpack多用于老旧项目维护。2、前端性能优化实战方案（面试高频）参考答案：我日常开发主要从加载、渲染、代码、网络四个维度做优化，都是落地可复用的方案：1.网络加载优化：路由懒加载、组件按需引入、图片懒加载、静态资源CDN、开启gzip压缩、去除冗余依赖；2.渲染优化：避免频繁DOM操作、使用v-forkey唯一、避免v-for和v-if混用、使用节流防抖处理高频事件、开启浏览器硬件加速；3.代码优化：封装通用工具函数、避免全局变量滥用、及时清除定时器和事件监听、闭包及时释放、减少无效渲染；4.打包优化：Vite/Webpack拆分chunk、压缩代码、移除console、tree-shaking剔除无用代码；5.用户体验优化：骨架屏、加载动画、错误兜底、接口缓存、离线缓存。3、跨域问题解决方案及适用场景参考答案：跨域是浏览器同源策略限制，协议、域名、端口任一不同即跨域，常用解决方案：1.开发环境代理（最常用）：Vite/Webpack配置proxy代理，本地请求转发后端服务，仅适用于本地开发；2.后端CORS跨域：后端设置响应头，允许前端域名跨域，生产环境首选、最稳定；3.Nginx反向代理：生产环境通过Nginx转发请求，统一域名端口，彻底解决跨域；4.JSONP：仅支持get请求，兼容性好但功能单一，现在基本不用。五、高频手写代码题（2026必考）1、手写防抖、节流函数参考答案：防抖：触发事件后，延迟n秒执行，期间再次触发重置计时，适合输入框搜索、窗口resize。PlainText

//防抖

functiondebounce(fn,delay=300){

lettimer=null

returnfunction(...args){

if(timer)clearTimeout(timer)

timer=setTimeout(()=>{

fn.apply(this,args)

timer=null

},delay)

}

}

//节流

functionthrottle(fn,interval=300){

letflag=false

returnfunction(...args){

if(flag)return

flag=true

fn.apply(this,args)

setTimeout(()=>{

flag=false

},interval)

}

}节流：固定时间内只执行一次，适合滚动监听、按钮重复点击、拖拽事件。2、手写简易Promise参考答案：PlainText

classMyPromise{

constructor(executor){

this.status='pending'

this.value=null

this.reason=null

this.onFulfilledCb=[]

this.onRejectedCb=[]

constresolve=(value)=>{

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

this.status='fulfilled'

this.value=value

this.onFulfilledCb.forEach(cb=>cb())

}

}

constreject=(reason)=>{

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

this.status='rejected'

this.reason=reason

this.onRejectedCb.forEach(cb=>cb())

}

}

try{

executor(resolve,reject)

}catch(err){

reject(err)

}

}

then(onFulfilled,onRejected){

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

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

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

onFulfilled(this.value)

}

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

onRejected(this.reason)

}

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

this.onFulfilledCb.push(()=>onFulfilled(this.value))

this.onRejectedCb.push(()=>onRejected(this.reason))

}

returnthis

}

}3、手写深拷贝参考答案：PlainText

functiondeepClone(obj,map=newWeakMap()){

//基础类型直接返回

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

//处理循环引用

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

//处理日期、正则

if(objinstanceofDate)returnnewDate(obj)

if(objinstanceofRegExp)re