2026前端面试题大全（高频真题+详细实战答案）

2026前端面试题大全（高频真题+详细实战答案）说明：本文汇总互联网企业前端高频面试题，覆盖基础、进阶、框架、工程化、浏览器原理、性能优化、手写代码等核心考点，答案贴合真实面试场景，通俗易懂、侧重实战，无空洞理论，适合面试突击、日常复盘。一、HTML核心面试题1.HTML5新增特性有哪些？答：日常开发高频用到的核心新增特性，主要分为五类：1）语义化标签：header、footer、nav、section、article、aside、main，替代传统div布局，提升代码可读性和SEO优化效果；2）多媒体标签：audio音频、video视频、canvas画布、svg矢量图，无需第三方插件即可实现音视频播放、图形绘制；3）表单增强：新增email、tel、number、date、range等输入类型，以及required、placeholder、autofocus、pattern校验属性；4）本地存储：localStorage、sessionStorage，弥补cookie存储量小、携带请求的缺陷；5）其他能力：拖拽API、地理定位、websocket长连接、history路由、webWorker多线程。2.什么是HTML语义化？语义化的好处？答：HTML语义化就是用符合标签本意的标签书写代码，让标签自带语义，而非全部使用div、span。比如导航用nav、文章用article、页脚用footer。核心好处：1）代码结构清晰，团队协作可读性、可维护性更强；2）利于搜索引擎爬虫抓取，优化SEO排名；3）适配屏幕阅读器，提升网站无障碍访问能力；4）移动端适配、浏览器解析更稳定。3.行内元素、块级元素、行内块元素的区别？答：三类元素核心差异集中在换行、宽高、边距特性：1）块级元素（div、p、h1-h6、ul、li）：独占一行，默认宽度100%父级，可设置宽高、内外边距，可嵌套所有元素；2）行内元素（span、a、em、i）：不独占一行，同行排列，无法设置宽高、上下内外边距不生效，只能嵌套行内元素；3）行内块元素（img、input、button）：同行排列，同时支持设置宽高、内外边距，兼具两者优势。4.href和src的区别？答：核心区别是加载逻辑和作用场景不同：src：用于引入资源，会阻塞当前页面渲染，加载资源时替换当前标签内容，常见于img、script、iframe；href：用于建立链接关系，不会阻塞页面渲染，只是关联外部资源，常见于a超链接、link引入css。二、CSS核心面试题1.标准盒模型和IE怪异盒模型的区别？如何切换？答：盒模型决定元素宽高计算规则，是布局核心基础：1）标准盒模型（W3C）：元素实际宽度=width+padding+border+margin，width仅代表内容区宽度；2）IE怪异盒模型：元素实际宽度=width+margin，width包含内容区、padding、border；切换方式：通过box-sizing属性控制，box-sizing:content-box（标准默认），box-sizing:border-box（怪异盒，开发常用）。2.什么是BFC？触发条件和实际应用场景？答：BFC即块级格式化上下文，是浏览器独立的渲染区域，内部元素布局不会影响外部，外部也不会干扰内部。常见触发条件：1）根元素html；2）overflow不为visible（auto/hidden/scroll）；3）float不为none；4）position为absolute/fixed；5）display为inline-block、flex、grid。实际业务用途：1）解决父元素浮动塌陷问题；2）阻止垂直margin重叠；3）防止元素被浮动元素覆盖。3.CSS选择器优先级规则？答：优先级从高到低排序，权重逐级递减，可叠加计算：!important（最高）>行内样式（style）>ID选择器>类/伪类/属性选择器>标签选择器>通配符>继承样式（最低）补充规则：权重相同，后写样式覆盖先写样式；样式继承无优先级，可被任意选择器覆盖。4.Flex布局常用属性及实战用法？答：Flex是移动端主流布局方案，分为容器属性和子项属性，核心常用属性：容器属性（父元素）：display:flex（开启弹性布局）；flex-direction（主轴方向：row/column）；justify-content（主轴对齐：居中/两端对齐等）；align-items（侧轴对齐）；flex-wrap（是否自动换行）。子项属性（子元素）：flex-grow（放大比例，默认0）；flex-shrink（缩小比例，默认1）；flex-basis（基准宽度）；align-self（单独设置自身对齐方式）。实战场景：居中布局、等分布局、自适应适配、不规则列表布局。5.水平垂直居中的常用方法？答：整理4种职场最常用、兼容性好的方案：1）Flex方案（首选）：父元素设置display:flex、justify-content:center、align-items:center，简单高效，适配所有现代浏览器；2）绝对定位+transform：父相对定位，子绝对定位，top/left设为50%，transform:translate(-50%,-50%)，无需固定宽高；3）绝对定位+margin：父相对定位，子绝对定位，上下左右0，margin:auto，适合固定宽高元素；4）Grid方案：父元素display:grid，place-items:center，极简写法。6.清除浮动的方法？答：浮动会导致父元素高度塌陷，业务常用3种清除方案：1）伪类清除（推荐）：给父元素添加clearfix伪类，兼容性最好，不冗余；2）触发BFC：父元素设置overflow:hidden，简单快捷，适合简单布局；3）新增空标签：末尾添加空div，设置clear:both，代码冗余，不推荐。三、JavaScript核心面试题（高频必考）1.var、let、const的区别？答：三者核心差异集中在作用域、变量提升、重复声明、修改特性：1）var：函数级作用域，存在变量提升，可重复声明、可修改，易造成全局变量污染；2）let：块级作用域（{}内生效），无变量提升、存在暂时性死区，不可重复声明，可修改；3）const：块级作用域，无变量提升、暂时性死区，不可重复声明，声明后不可修改引用地址（对象、数组可改内部属性），声明必须赋值。开发规范：日常优先使用const，可变变量用let，完全不用var。2.什么是暂时性死区？答：ES6中使用let/const声明变量时，在代码块起始到变量声明语句执行前，该变量处于不可访问状态，这段区间就是暂时性死区。核心作用：杜绝变量提升带来的不合理访问问题，让代码逻辑更严谨。3.原型和原型链的理解？答：JS万物皆对象，原型是JS实现继承的核心机制：1）每个函数都有prototype（显式原型），存储公共方法和属性；2）每个实例对象都有__proto__（隐式原型），指向构造函数的prototype；3）原型链：对象查找属性/方法时，先找自身，自身没有就顺着__proto__向上查找，直到null，这条查找链路就是原型链。实战价值：实现方法复用、原型继承，减少内存占用。4.this指向问题（面试高频）答：this指向由调用方式决定，和定义位置无关，5种核心场景：1）普通函数直接调用：this指向window（浏览器）/global（node）；2）对象方法调用：this指向调用该方法的对象；3）构造函数调用：this指向new出来的实例对象；4）箭头函数：没有自身this，继承外层作用域的this，且无法修改；5）call/apply/bind：强制修改this指向，指向传入的第一个参数。5.call、apply、bind的区别？答：三者均用于修改函数this指向，核心差异在传参和执行逻辑：1）call：立即执行函数，参数逐个传递；2）apply：立即执行函数，参数以数组形式传递；3）bind：不会立即执行，返回一个修改好this的新函数，可后续调用。6.闭包的理解、优缺点及应用场景？答：闭包指内层函数访问外层函数的变量，且外层函数执行结束后，内层函数依然可以持有外层变量的现象。形成条件：函数嵌套、内层引用外层变量、内层函数被外部调用。优点：保留私有变量、实现数据私有化、延长变量生命周期；缺点：变量常驻内存，容易造成内存堆积，使用不当会引发内存泄漏；应用场景：防抖节流、模块化封装、定时器回调、私有方法封装。7.防抖和节流的区别及实战场景？答：两者都是高频事件优化方案，核心差异在执行时机：防抖：触发事件后，延迟n秒执行，若n秒内再次触发，重置计时，只执行最后一次；场景：搜索框输入联想、窗口resize、表单输入校验。节流：固定时间内只执行一次，均匀稀释执行频率；场景：滚动加载、鼠标移动、按钮频繁点击、页面拖拽。8.同步、异步、宏任务、微任务的执行顺序？答：浏览器事件循环核心执行顺序（必考）：1）先执行所有同步代码；2）执行所有微任务（Promise.then、async/await、queueMicrotask）；3）执行一次宏任务（setTimeout、setInterval、ajax、DOM事件）；4）重复循环第二步、第三步。核心口诀：同步优先，微任务大于宏任务，一轮一清。9.Promise的理解及三种状态？答：Promise是解决异步回调地狱的方案，让异步代码扁平化、可链式调用。三种状态（不可逆）：1）pending：初始等待状态；2）fulfilled：成功状态；3）rejected：失败状态。核心方法：then（接收成功结果）、catch（捕获失败）、finally（无论成败都会执行）、all、race、allSettled。10.async/await的原理？答：async/await是Promise的语法糖，让异步代码写法贴近同步，可读性更强。核心规则：async修饰的函数默认返回Promise对象；await会阻塞后续代码，等待Promise执行完成，再继续执行，仅能在async函数内使用。11.深浅拷贝的区别及实现方式？答：仅针对引用类型（数组、对象），基本类型无深浅拷贝之分：浅拷贝：只拷贝第一层属性，深层引用数据依然共用内存，修改新数据深层内容会影响原数据；深拷贝：完全拷贝所有层级数据，新旧数据完全独立，互不影响。实现方式：浅拷贝：扩展运算符...、Object.assign、slice、concat；深拷贝：JSON.parse(JSON.stringify())（简单场景）、递归遍历（完整场景，可处理函数、undefined）。四、Vue框架核心面试题（Vue2+Vue3）1.Vue2和Vue3的核心区别？答：实战开发核心差异，面试重点答优化点：1）响应式原理：Vue2基于Object.defineProperty，仅监听已有属性，无法监听新增、删除属性和数组下标变更；Vue3基于Proxy，代理整个对象，支持所有属性监听；2）语法方式：Vue2选项式API，代码分散；Vue3组合式API，按功能聚合代码，适合大型项目；3）性能优化：Vue3支持按需编译、Tree-shaking，打包体积更小，初始渲染、更新速度更快；4）新增特性：Teleport传送组件、Suspense异步组件、CompositionAPI、多根节点；5）类型支持：Vue3全面适配TS，类型校验更完善。2.Vue响应式原理？答：Vue2：通过Object.defineProperty劫持对象属性的getter/setter，数据读取时收集依赖，数据修改时触发视图更新；存在数组、新增属性监听缺陷，需$set弥补。Vue3：通过Proxy代理整个数据对象，拦截数据的读取、修改、删除、新增等所有操作，结合Reflect操作原数据，完美解决Vue2响应式缺陷。3.Vue生命周期及常用钩子？答：生命周期是组件从创建、挂载、更新到销毁的完整流程，常用钩子：1）created：组件创建完成，可获取数据、调用接口，无法操作DOM；2）mounted：组件挂载完成，DOM渲染完毕，可操作DOM、初始化定时器、监听事件；3）updated：数据更新后，DOM重新渲染完成；4）unmounted：组件销毁，清除定时器、解绑事件，防止内存泄漏。4.v-if和v-show的区别？答：核心差异是渲染和切换逻辑，选型看使用场景：v-if：动态创建/销毁DOM节点，切换开销大，初始渲染开销小；适合切换频率低的场景；v-show：通过CSSdisplay控制显示隐藏，DOM始终存在，切换开销小，初始渲染开销大；适合频繁切换的场景。5.computed和watch的区别？答：computed：计算属性，基于依赖缓存，依赖不变则不重新计算，支持读写，适合数据衍生、简单计算，同步执行；watch：监听属性，无缓存，数据变化就触发，支持异步操作，适合数据变化后执行复杂逻辑、接口请求、数据监听。6.Vue组件通信方式？答：覆盖所有组件关系，高频常用：1）父子通信：父传子props，子传父$emit；2）跨级通信：provide/inject、$parent/$children；3）兄弟/任意组件通信：Vuex/Pinia状态管理、事件总线（$bus）；4）简单跨组件：本地存储临时传值。7.Vue虚拟DOM和Diff算法？答：虚拟DOM是真实DOM的JS对象描述，操作JS对象开销远小于操作真实DOM，提升渲染性能。Diff算法是Vue的节点对比更新策略，核心是同层比较、不跨层对比，通过key标识节点唯一性，精准找到变化节点，只更新局部DOM，减少渲染开销。key作用：高效区分新旧节点，避免错复用，提升Diff效率。五、React高频面试题（进阶必备）1.React函数组件和类组件的区别？答：1）语法：类组件基于ES6class，代码繁琐；函数组件是纯函数，简洁轻量；2）状态管理：类组件通过this.state/this.setState管理状态；函数组件通过Hooks管理状态；3）生命周期：类组件有完整生命周期钩子；函数组件通过Hooks模拟生命周期；4）性能：函数组件无this绑定，渲染开销更小，React官方推荐函数组件+Hooks开发。2.useState和useEffect核心用法？答：useState：函数组件状态管理钩子，返回状态变量和更新函数，状态更新会触发组件重渲染；useEffect：副作用处理钩子，可模拟挂载、更新、销毁生命周期。依赖项为空时，仅挂载执行一次；依赖项变化时触发更新；返回函数可处理销毁逻辑。3.React组件渲染优化方案？答：1）函数组件：React.memo缓存组件、useMemo缓存计算结果、useCallback缓存函数；2）避免无效渲染：精简依赖项、避免组件内定义函数/对象；3）大数据渲染：虚拟列表、分页加载。六、浏览器与网络面试题1.浏览器从输入URL到页面渲染完成的全过程？答：完整流程（面试标准答题流程）：1）DNS解析：域名解析为服务器IP地址；2）TCP三次握手：建立可靠传输连接；3）发送HTTP请求，服务器处理并返回响应数据；4）浏览器接收数据，解析HTML生成DOM树，解析CSS生成CSSOM树；5）合成渲染树（RenderTree）；6）布局（Layout）：计算元素位置大小；7）绘制（Paint）：像素渲染到页面；8）TCP四次挥手，关闭连接。2.HTTP1.1、HTTP2、HTTP3的区别？答：HTTP1.1：默认长连接，支持管道传输，但存在队头阻塞，同一域名限制6个请求；HTTP2：基于TCP，支持多路复用、二进制传输、头部压缩、服务器推送，解决队头阻塞；HTTP3：基于QUIC协议（UDP），彻底解决TCP队头阻塞，连接更快、容错性更强。3.Cookie、localStorage、sessionStorage区别？答：从存储容量、生命周期、请求携带、适用场景区分：1）Cookie：容量4KB，默认会话失效，可手动设置过期时间，每次HTTP请求自动携带，适合存储登录凭证、token；2）localStorage：容量5MB，永久存储，手动清除才会失效，不跟随请求，适合长期静态配置、用户偏好设置；3）sessionStorage：容量5MB，会话级存储，关闭标签页自动清空，适合临时页面数据存储。4.回流和重绘的区别及优化？答：重绘：元素样式改变（颜色、透明度），不影响布局，仅重新绘制像素，开销小；回流（重排）：元素宽高、位置、布局改变，浏览器重新计算页面布局，开销极大，回流必然触发重绘，重绘不会触发回流。优化方案：批量修改DOM、使用文档碎片、避免频繁读取布局属性、使用GPU加速。5.浏览器垃圾回收机制？答：浏览器通过自动垃圾回收管理内存，核心采用标记-清除算法。1）标记阶段：从全局根对象遍历，标记所有可访问、正在使用的对象；2）清除阶段：回收未被标记、无法访问的废弃对象，释放内存；针对频繁创建销毁的小对象，采用分代回收策略，提升回收效率。七、前端工程化与性能优化1.Webpack核心流程？答：Webpack打包核心5步：1）初始化：读取配置文件，初始化参数；2）编译构建：从入口文件开始，递归解析所有依赖模块；3）模块转换：通过loader处理各类文件（css、图片、vue文件等）；4）模块打包：整合所有模块，生成chunk代码块；5）输出文件：根据配置生成最终打包资源到输出目录。2.前端性能优化全方位方案？答：面试通用满分答案，覆盖加载、渲染、代码、网络：1）网络优化：资源压缩、开启gzip、CDN加速、图片懒加载、接口缓存、减少HTTP请求；2）构建优化：Tree-shaking去除冗余代码、代码分割（分包）、按需加载、去除无用依赖；3）渲染优化：减少回流重绘、硬件加速、虚拟列表渲染大数据、避免频繁DOM操作；4）代码优化：防抖节流、缓存计算结果、避免内存泄漏、优化循环逻辑；5）用户体验优化：骨架屏、加载动画、预加载、懒加载。3.跨域问题解决方案？答：浏览器同源策略限制跨域请求，常用解决方案：1）后端CORS跨域（主流）：服务端设置响应头，允许前端域名访问；2）代理跨域：开发环境通过webpack/vite代理、nginx代理转发请求；3）JSONP：仅支持get请求，兼容性好，不推荐新项目使用；4）WebSocket：不受同源策略限制，适合长连接场景。八、高频手写代码题（面试必写）1.手写防抖函数javascript

functiondebounce(fn,delay){

lettimer=null;

returnfunction(...args){

if(timer)clearTimeout(timer);

timer=setTimeout(()=>{

fn.apply(this,args);

},delay)

}

}2.手写节流函数javascript

functionthrottle(fn,interval){

letflag=true;

returnfunction(...args){

if(!flag)re