2026年前端高频面试题及详细答案（实战向、无模板化）

2026年前端高频面试题及详细答案（实战向、无模板化）一、HTML核心面试题1、HTML5新增特性有哪些？日常开发常用哪些？答案：HTML5主要新增了结构标签、表单能力、多媒体能力、画布能力、本地存储等特性，日常开发高频用到的有：1.语义化标签：header、nav、main、section、article、aside、footer，替代传统div布局，提升代码可读性和SEO效果；2.表单增强：新增input类型（number、tel、email、date）、表单验证、placeholder、required、autofocus等属性，减少JS校验代码；3.多媒体标签：audio、video，无需插件即可实现音视频播放；4.本地存储：localStorage、sessionStorage，弥补cookie存储量小、携带请求头的缺陷；5.画布与图形：canvas、svg，用于数据可视化、图标绘制、简单动画；6.其他：拖拽API、地理定位、websocket通信等，多用于特定业务场景。2、什么是语义化HTML？为什么要使用？答案：语义化HTML就是让标签自带含义，标签本身能清晰表达页面结构和内容作用，而不是全部用无意义的div、span。使用优势：1.代码可读性高，团队协作时新人能快速看懂页面结构；2.利于搜索引擎抓取，提升网站SEO排名；3.适配屏幕阅读器，对残障用户更友好，满足无障碍开发要求；4.结构清晰，样式、结构、行为分离，后期维护和重构更方便。3、Cookie、localStorage、sessionStorage区别？答案：1.存储大小：Cookie最大4KB，localStorage、sessionStorage一般5MB左右；2.生命周期：Cookie可手动设置过期时间，默认关闭页面失效；localStorage永久存储，手动删除才会消失；sessionStorage仅当前会话有效，关闭标签页立即清空；3.请求携带：Cookie每次HTTP请求都会自动携带到服务端，另外两个仅本地存储，不参与请求；4.作用域：Cookie、localStorage同域名跨标签共享；sessionStorage仅限当前标签页；5.使用场景：Cookie用于登录态、token存储；localStorage用于长期本地缓存（用户配置、静态数据）；sessionStorage用于临时会话数据（表单临时缓存）。二、CSS核心面试题1、CSS选择器优先级规则？如何计算？答案：优先级从高到低排序：!important>行内样式>ID选择器>类/伪类/属性选择器>标签选择器>通配符>继承样式计算规则（权重计数）：1.行内样式：10002.ID选择器：01003.类、伪类、属性选择器：00104.标签、伪元素选择器：00015.通配符、继承：0000权重数值越大优先级越高，同级优先级后面的样式会覆盖前面的，!important直接置顶，开发中尽量少用，避免样式难以维护。2、Flex布局常用属性及实战用法答案：Flex是移动端和后台系统最常用的布局方案，分为容器属性和子项属性。容器常用属性：1.display:flex：开启弹性布局；2.flex-direction：设置主轴方向（row横向、column纵向）；3.justify-content：主轴对齐（center居中、space-between两端对齐、space-around均分）；4.align-items：侧轴对齐（center垂直居中、stretch拉伸）；5.flex-wrap：是否换行，默认不换行，wrap自动换行；子项常用属性：1.flex:1：均分剩余空间，日常自适应布局最常用；2.align-self：单独设置自身侧轴对齐方式；3.flex-shrink：是否压缩，默认1会压缩，0不压缩。3、BFC是什么？触发条件和作用答案：BFC是块级格式化上下文，相当于一个独立的渲染区域，区域内的元素布局不会影响外部元素。触发条件：1.根元素html；2.overflow不为visible（auto、hidden、scroll）；3.display为inline-block、flex、grid；4.position为absolute、fixed；5.float不为none。实战作用：1.解决浮动元素父级高度塌陷问题；2.解决相邻元素margin重叠问题；3.防止浮动元素覆盖普通元素。4、居中布局的常用方式（水平+垂直）答案：1.Flex居中（最常用）：父元素设置display:flex;justify-content:center;align-items:center;适配所有场景，简单稳定；2.Grid居中：父元素display:grid;place-items:center;代码极简；3.绝对定位居中：子元素absolute，top/left50%，transform:translate(-50%,-50%);适配不定宽高元素；4.定宽高居中：margin:0auto实现水平居中，配合定位实现垂直居中。三、JavaScript核心面试题（重点）1、var、let、const的区别答案：1.作用域：var是函数作用域，let、const是块级作用域（{}内生效）；2.变量提升：var存在变量提升，声明前可访问，值为undefined；let、const存在暂时性死区，声明前不能访问，直接报错；3.重复声明：var允许重复声明；let、const不允许重复声明；4.赋值规则：var、let可修改值；const声明后不可修改（引用类型可修改内部属性，地址不变即可）；日常开发统一使用let/const，完全废弃var，避免变量污染和作用域混乱。2、原型与原型链的理解答案：JS中每个函数都有prototype显式原型，每个实例对象都有__proto__隐式原型，实例的__proto__指向构造函数的prototype。原型链就是对象层层向上查找__proto__的链条，当访问对象的属性或方法时，先在自身查找，找不到就去原型上找，再找不到就去原型的原型，直到找到Object原型，最终为null，查找终止。作用：实现属性和方法的复用，节省内存，也是JS实现继承的核心原理。3、this指向问题（面试高频）答案：this指向由调用方式决定，和定义位置无关，核心场景：1.普通函数直接调用：this指向window（浏览器）/global（node）；2.对象方法调用：this指向调用的对象；3.构造函数调用：this指向new出来的实例对象；4.箭头函数：没有自身this，继承外层作用域的this，且无法修改；5.bind/call/apply：强制修改this指向，call、apply立即执行，bind返回新函数延迟执行。4、闭包的概念、作用、优缺点答案：闭包就是内层函数访问外层函数的变量，且外层函数执行结束后，内层函数依然可以持有外层变量的作用域。简单说：函数嵌套，内层引用外层变量，就是闭包。作用：1.保存私有变量，实现变量私有化，防止全局污染；2.延长变量生命周期；3.实现模块化、防抖节流、柯里化等功能。缺点：1.变量长期占用内存，无法及时释放，容易造成内存泄漏；2.滥用闭包会导致代码可读性变差，调试困难。5、异步JS发展史及区别（回调、Promise、async/await）答案：1.回调函数：最原始的异步方案，缺点是多层嵌套会出现「回调地狱」，代码层级深、难以维护、无法统一捕获错误；2.Promise：ES6推出，解决回调地狱，支持链式调用，状态不可逆（pending/fulfilled/rejected），可以统一捕获异常，但是依然存在大量链式代码，串行异步不够直观；3.async/await：ES7基于Promise的语法糖，将异步代码写成同步写法，代码简洁、可读性极高，支持try/catch捕获错误，是目前项目主流用法。6、宏任务和微任务、事件循环机制答案：JS是单线程语言，为了处理异步任务，引入事件循环机制，任务分为宏任务和微任务。宏任务：script整体代码、setTimeout、setInterval、AJAX、DOM事件；微任务：Promise.then/catch/finally、async/await、queueMicrotask；执行顺序：1.先执行同步代码；2.同步代码执行完毕，清空所有微任务队列；3.执行一轮宏任务；4.重复循环，即「同步=>微任务=>宏任务」。7、深浅拷贝区别及实现方式答案：浅拷贝：只拷贝对象第一层属性，复杂引用类型（数组、对象）只拷贝地址，修改新对象会影响原对象；深拷贝：递归拷贝所有层级属性，新旧对象完全独立，修改互不影响。浅拷贝实现：Object.assign、扩展运算符...、数组slice；深拷贝实现：1.简单场景：JSON.parse(JSON.stringify())，缺点是无法拷贝函数、undefined、正则、循环引用；2.项目场景：手写递归深拷贝函数，或使用Lodash工具库。四、Vue框架核心面试题（Vue3为主，2026主流）1、Vue2和Vue3的核心区别答案：1.底层原理：Vue2基于Object.defineProperty劫持数据，无法监听新增、删除属性，数组需要重写方法；Vue3基于Proxy代理，支持全量监听，兼容更多数据场景；2.编程方式：Vue2选项式API，大项目代码碎片化；Vue3组合式API，按业务逻辑拆分代码，复用性、可维护性更强；3.性能：Vue3新增虚拟DOM优化、静态提升、patchFlag，渲染速度更快，打包体积更小；4.类型支持：Vue3原生支持TS，类型校验更完善；Vue2对TS支持较弱；5.生命周期：Vue3组合式API生命周期需要手动引入，部分钩子更名（beforeDestroy=>beforeUnmount）。2、Vue3响应式原理答案：Vue3响应式核心是Proxy+Reflect+依赖收集派发更新。1.通过Proxy拦截对象的读取、修改、删除、新增属性等所有操作；2.读取数据时进行依赖收集，记录当前组件对应的副作用函数；3.修改数据时触发更新，派发依赖，执行对应的副作用函数，更新视图；4.使用Reflect操作对象，保证上下文指向正确，兼容更多属性操作场景。相比Vue2，解决了新增属性、数组下标修改不更新的问题，响应式更全面。3、setup函数的特点答案：1.setup是组合式API的入口，在beforeCreate之前执行，此时组件实例尚未创建；2.内部无法使用this，this指向undefined；3.所有响应式数据、方法、生命周期都需要在setup中定义；4.执行完毕后，返回的变量和方法可以直接在模板中使用；5.支持asyncsetup，可以直接使用异步请求。4、ref和reactive的区别答案：1.适用类型：ref支持基本数据类型（字符串、数字、布尔）和引用类型；reactive仅支持对象、数组等引用类型；2.原理：ref底层依然调用reactive，单独封装value属性；reactive直接通过Proxy代理对象；3.使用方式：ref定义的数据，脚本中需要.value访问，模板中自动解包；reactive直接访问属性即可；4.场景：简单数据、表单单个字段用ref；复杂对象、批量数据用reactive。5、Vue组件通信方式答案：1.父子通信：父传子props，子传父emit；2.祖孙跨级通信：provide/inject，无需逐层传递；3.兄弟/任意组件通信：mitt事件总线、Pinia状态管理；4.大型项目统一状态：Pinia，替代Vuex，语法更简洁、模块化更强、无mutations；日常开发简单跨组件用mitt，全局状态统一用Pinia。五、前端工程化&性能优化（2026面试必问）1、Vite和Webpack的区别？为什么现在项目多用Vite？答案：1.构建原理：Webpack是基于打包的构建工具，启动时会打包所有文件，启动慢；Vite基于浏览器原生ESModule，开发环境无需打包，按需加载文件，启动速度极快；2.热更新：Webpack热更新需要重新编译打包；Vite只更新修改的单个文件，热更新秒级响应；3.生产构建：Vite生产环境基于Rollup打包，打包体积更小、性能更好；4.适用场景：老项目、大型复杂项目多用Webpack；新项目、Vue3/React新项目统一用Vite，开发体验更好。2、前端性能优化实战方案答案：加载优化：1.资源压缩：JS、CSS、图片压缩，开启Gzip压缩；2.路由懒加载、组件懒加载，首屏只加载核心资源；3.静态资源CDN部署，减少服务器压力；4.图片优化：webp格式、懒加载、雪碧图；渲染优化：1.减少DOM操作，避免频繁回流重绘；2.列表渲染使用虚拟列表，解决大数据渲染卡顿；3.避免无效闭包、全局变量滥用，减少内存泄漏；打包优化：1.分包打包，拆分第三方依赖和业务代码；2.去除无效代码、tree-shaking精简冗余资源。3、如何解决页面白屏、首屏加载慢问题？答案：1.开启路由懒加载，减小首屏打包体积；2.引入骨架屏、loading过渡，优化用户体验；3.核心CSS内联，优先渲染页面结构；4.静态资源缓存，合理设置缓存策略；5.大图片、大资源延后加载，优先展示页面主体内容；6.接口请求优化，关键接口优先请求，非关键接口异步延后。六、浏览器&网络面试题1、HTTP1.1、HTTP2、HTTP3区别答案：1.HTTP1.1：支持长连接，但是同一域名并行请求数量有限，存在队头阻塞，请求头冗余大；2.HTTP2：支持多路复用，一个连接可并发多个请求，解决队头阻塞；支持头部压缩、二进制传输、服务器推送，加载速度大幅提升；3.HTTP3：基于QUIC协议，UDP传输，彻底解决队头阻塞，握手速度更快，弱网环境适配更好，目前主流网站已逐步普及。2、从输入网址到页面渲染完成的全过程答案：1.DNS解析：将域名解析为服务器IP地址；2.TCP三次握手，建立可靠连接（HTTPS额外TLS握手加密）；3.浏览器发送HTTP请求，携带请求头、参数；4.服务器处理请求，返回响应数据、状态码、资源；5.浏览器解析HTML生成DOM树，解析CSS生成CSSOM树；6.生成渲染树，进行布局（回流）、绘制（重绘）；7.页面渲染完成，加载后续异步资源。3、回流和重绘的区别，如何避免？答案：重绘：元素样式改变（颜色、背景），不改变宽高和位置，只重新绘制页面，开销较小；回流（重排）：元素宽高、位置、布局改变，导致整个页面重新计算布局，开销极大；避免方案：1.避免频繁修改DOM样式，统一批量修改；2.使用class统一切换样式，不单独修改style；3.复杂动画开启GPU加速（transform、opacity）；4.避免频繁获取DOM布局属性（offset、client）。七、手写代码面试题（高频实战）1、手写防抖函数答案：防抖：频繁触发事件，只在停止触发指定时间后执行一次，适用于搜索框输入、窗口resize。PlainText

functiondebounce(fn,delay){

lettimer=null;

returnfunction(...args){

if(timer)clearTimeout(timer);

timer=setTimeout(()=>{

fn.apply(this,args);

timer=null;

},delay)

}

}2、手写节流函数答案：节流：频繁触发事件，固定时间只执行一次，适用于滚动、拖拽、点击节流。PlainText

functionthrottle(fn,delay){

letflag=true;

returnfunction(...args){

if(!flag)return;

flag=false;

setTimeout(()=>{

fn.apply(this,args);

flag=true;

},delay)

}

}3、手写简单Promise答案：PlainText

classMyPromise{

constructor(executor){

this.status='pending';

this.value=null;

this.reason=null;

this.onFulfilledList=[];

this.onRejectedList=[];

constresolve=(value)