2026前端高频面试题（含详细接地气答案）

2026前端高频面试题（含详细接地气答案）这套面试题整理了一线大厂前端高频提问点，覆盖入门基础、核心JS、CSS布局、浏览器原理、工程化、性能优化、手写代码等必考内容，答案摒弃书面化套话，都是面试现场可直接口述的标准答案，适合跳槽、校招、日常复盘使用。一、JavaScript核心高频题（重中之重）1.讲讲var、let、const的区别这是前端基础必问，核心区别集中在变量提升、作用域、重复声明、赋值规则四个点：1.作用域不同：var是函数作用域，let、const是块级作用域（{}、if、for内部都能限制作用域）；2.变量提升不同：var存在变量提升，声明前置、赋值后置，未赋值时是undefined；let、const也有提升，但存在暂时性死区，在声明前使用会直接报错；3.重复声明：var允许重复声明同一变量，不会报错；let、const不允许重复声明；4.赋值规则：var、let可以修改值；const声明的是常量，必须初始化赋值，且不能直接修改基础类型值，如果是引用类型（对象、数组），可以修改内部属性。日常使用规范：优先用const，确定变量会修改再用let，项目中完全不用var。2.什么是暂时性死区？ES6为了规避var变量提升带来的诡异bug，新增了暂时性死区规则。在代码块中，用let、const声明的变量，从代码块开始到变量声明语句之前的区域，就是暂时性死区。这个区域内，禁止读取、使用该变量，否则直接报错。简单说：变量已经提升了，但不让用，必须等到声明语句执行完才能用，彻底解决了var先使用后声明不报错的问题。3.闭包是什么？有什么作用和弊端？定义：一个函数能够访问并使用自身外部作用域的变量，即使外部函数已经执行完毕，这个变量依然被保留，这种组合就是闭包。简单理解：内层函数引用了外层函数的局部变量，就形成了闭包。常用作用：1.保留局部变量，实现变量私有化，防止全局变量污染；2.缓存数据，比如节流防抖、计时器回调、封装私有方法；3.解决for循环定时器变量取值错误的经典问题。弊端：闭包会让外部变量一直驻留在内存中，无法被垃圾回收机制回收，容易造成内存占用过高，长期大量使用会导致页面卡顿、内存泄漏。优化方式：使用完闭包后，手动置空变量，切断引用。4.原型和原型链彻底讲清楚JS中所有函数都有一个prototype（显式原型），所有实例对象都有一个__proto__（隐式原型），实例的__proto__指向构造函数的prototype。原型：构造函数的原型对象，存放所有实例可以共享的方法和属性，避免每个实例都创建一份重复方法，节省内存。原型链：当访问一个对象的属性/方法时，如果自身没有，就会顺着__proto__往上找，直到找到Ototype，再往上就是null，这条查找链路就是原型链。核心特点：属性方法共享、逐级查找、最终终点是null。日常开发中封装公共方法、继承都基于原型链实现。5.作用域、作用域链、执行上下文的区别1.作用域：代码编写时就确定的变量可访问范围，静态不变，分全局、函数、块级作用域；2.作用域链：变量查找的层级链路，内层作用域可以访问外层变量，外层不能访问内层，代码编写时确定；3.执行上下文：代码运行时浏览器创建的运行环境，动态变化，包含变量、this、作用域链等信息，函数调用时创建，执行结束销毁。通俗总结：作用域是规则，作用域链是查找路径，执行上下文是运行时环境。6.this指向问题（面试必考）this的指向只看调用方式，和定义位置无关，五种常见场景：1.普通函数调用：this指向window（浏览器）/global（node），严格模式下指向undefined；2.对象方法调用：this指向调用该方法的对象；3.构造函数调用：this指向new创建的实例对象；4.箭头函数：没有自己的this，继承外层作用域的this，且无法被bind、call、apply修改；5.bind/call/apply绑定：this指向手动绑定的第一个参数。7.call、apply、bind的区别三者都是用来修改函数this指向的，核心差异在执行方式和传参：1.call：立即执行函数，参数逐个传递（thisArg,p1,p2...）；2.apply：立即执行函数，参数以数组形式传递（thisArg,[p1,p2]）；3.bind：不会立即执行，返回一个绑定好this的新函数，支持后续调用传参。常用场景：数组最大值Math.max.apply(Math,arr)、继承、数组类数组转换。8.异步机制：宏任务、微任务执行顺序JS是单线程语言，为了实现异步，采用事件循环机制，核心执行顺序：1.先执行同步代码；2.同步代码执行完毕，清空所有微任务；3.执行一次宏任务；4.重复循环：微任务→宏任务。常见微任务：Promise.then/catch/finally、async/await、queueMicrotask、MutationObserver；常见宏任务：setTimeout、setInterval、AJAX、DOM事件、script整体代码。面试高频坑：await后面的代码属于微任务，会在同步代码执行完后、宏任务前执行。9.Promise相关知识点及三种状态Promise是解决异步回调地狱的方案，让异步代码扁平化、可读性更高。三种状态（不可逆）：1.pending：初始等待状态；2.fulfilled：成功状态，状态锁定，不会再改变；3.rejected：失败状态，状态锁定。核心方法：Promise.all：全部成功才成功，一个失败直接失败；Promise.race：谁先完成就返回谁的结果，不管成功失败；Promise.allSettled：等待所有请求完成，返回每一个的结果状态，适合批量请求不中断场景。10.async/await原理async/await是Promise的语法糖，本质还是基于Promise+微任务实现，只是把异步代码写成了同步写法，极大提升可读性。async修饰的函数，返回值会自动包装成Promise；await会阻塞当前代码执行，等待Promise状态完成后，再执行后续代码。注意点：await只能在async函数中使用，普通函数直接用会报错；异常需要用try/catch捕获。二、CSS高频面试题1.盒子模型区别（标准盒、怪异盒）1.标准盒模型（content-box）：元素宽高=content宽高，padding、border会撑开盒子，让整体尺寸变大；2.怪异盒模型（border-box）：元素宽高=content+padding+border，设置的宽高就是盒子最终尺寸，padding和border不会撑大盒子。开发规范：所有项目统一设置box-sizing:border-box，方便布局控尺寸。2.水平垂直居中的常用方法1.flex居中（最常用）：父元素设置display:flex;justify-content:center;align-items:center;简单高效，适配所有场景；2.绝对定位+transform：父相对定位，子绝对定位，top/left50%，transform:translate(-50%,-50%);适配未知宽高元素；3.绝对定位+marginauto：子元素上下左右0，margin:auto;适合已知宽高元素；4.grid居中：父元素display:grid;place-items:center;代码极简，兼容性良好。3.浮动的问题及清除浮动的方法浮动原本用于文字环绕，现在多用于布局。浮动元素会脱离标准文档流，导致父元素高度塌陷，这是核心问题。清除浮动常用方案：1.父元素设置overflow:hidden;简单快捷，适合无溢出显示需求的场景；2.伪类清除（最推荐、项目常用）：给父元素添加clearfix类，通过::after伪类设置content:'';display:block;clear:both;无副作用；3.新增空标签设置clear:both;冗余标签，不推荐使用。4.BFC是什么？触发条件和作用BFC即块级格式化上下文，是浏览器的独立渲染区域，内部元素的布局不会影响外部，外部也不会影响内部。触发条件：1.根元素html；2.overflow不为visible；3.display为flex、grid、inline-block；4.绝对定位、浮动元素。常用作用：清除浮动、解决margin塌陷、阻止元素被浮动覆盖。5.CSS优先级规则优先级从高到低：!important>行内样式>ID选择器>类/伪类/属性选择器>标签选择器>通配符>继承样式。优先级是累加比较，不看个数，只看权重等级；同权重下，后写的样式覆盖先写的。开发禁忌：尽量不用!important，会打乱优先级逻辑，难以维护。三、浏览器与网络面试题1.从输入网址到页面渲染完成的全过程1.DNS解析：域名解析为服务器IP地址，先查本地缓存，再递归查询服务器；2.TCP三次握手：建立可靠连接，确保数据传输稳定；3.发送HTTP请求：浏览器构建请求报文，发送给服务器；4.服务器处理请求：后端接收、处理逻辑，返回响应报文；5.浏览器解析资源：解析HTML生成DOM树，解析CSS生成CSSOM树；6.生成渲染树：DOM+CSSOM结合，生成可视渲染树；7.布局（重排）：计算元素位置和尺寸；8.绘制（重绘）：将像素绘制到屏幕；9.TCP四次挥手：断开连接。2.重排和重绘的区别、如何优化重绘：元素样式改变（颜色、背景），不改变布局尺寸，只重新绘制像素，开销较小；重排（回流）：元素布局、尺寸、位置改变，浏览器需要重新计算整个页面布局，开销极大，会触发重绘。优化方案：1.集中修改样式，不要逐行修改；2.使用class统一替换样式，不操作行内样式；3.频繁动画用transform、opacity，直接走合成层，不触发重排重绘；4.脱离文档流的元素动画，减少页面大面积重排。3.HTTP1.1、HTTP2、HTTP3区别1.HTTP1.1：默认长连接，但是单域名同一时间只能6个请求并行，存在队头阻塞，文本传输、无压缩，性能一般；2.HTTP2：基于TCP，支持多路复用，一个连接可并行多个请求，解决队头阻塞；头部压缩、二进制传输、支持服务器推送，大幅提升加载速度；3.HTTP3：基于QUIC协议（UDP），彻底解决TCP队头阻塞，连接更快、延迟更低，弱网环境体验更好，目前主流网站已大面积适配。4.缓存机制（强缓存、协商缓存）前端缓存是性能优化核心，分为强缓存和协商缓存，优先级：强缓存>协商缓存。强缓存：Cache-Control、Expires，命中后直接读取本地缓存，不发网络请求，状态码200(frommemorycache/diskcache)；协商缓存：强缓存失效后，携带标识请求服务器，对比资源是否更新。标识为ETag/If-None-Match、Last-Modified/If-Modified-Since。资源无更新返回304，复用缓存；资源更新返回200和新资源。5.跨域问题及解决方案跨域本质是浏览器同源策略限制，协议、域名、端口任一不同，即为跨域，阻止前端读取跨域响应数据。常用解决方案：1.CORS跨域（正式项目主流）：后端配置Access-Control-*响应头，允许前端域名跨域请求；2.代理跨域（开发环境主流）：webpack/vite配置proxy代理，前端请求本地服务，本地服务转发请求，绕过浏览器跨域限制；3.JSONP：利用script标签不受跨域限制的特点，只支持get请求，兼容性好，现在基本不用；4.nginx反向代理：线上部署常用，统一域名端口，实现同源访问。四、前端工程化&框架基础1.Vue2和Vue3的核心区别1.响应式原理：Vue2基于Object.defineProperty，无法监听新增、删除属性和数组下标修改；Vue3基于Proxy，完美支持全量数据监听；2.代码组织：Vue2选项式API，复杂组件代码散乱；Vue3组合式API，按功能逻辑聚合代码，复用性更强；3.性能优化：Vue3支持静态节点提升、补丁标记，减少diff开销；打包体积更小、运行更快；4.TS支持：Vue3原生基于TS重构，类型支持完善；Vue2对TS支持较弱；5.生命周期：Vue3组合式API生命周期写法更灵活，摒弃部分废弃钩子。2.Vue双向绑定原理Vue双向绑定核心：数据劫持+发布订阅模式。通过劫持数据的get/set方法，数据变化时触发更新通知，通知订阅的视图更新；同时通过v-model监听视图输入变化，反向更新数据，实现双向同步。3.虚拟DOM和diff算法作用虚拟DOM是真实DOM的JS对象映射，操作JS对象开销远小于操作真实DOM。数据更新时，会生成新的虚拟DOM树，通过diff算法对比新旧虚拟DOM，找出最小差异，只更新变化的真实DOM，避免全量重渲染，大幅提升页面性能。4.vite和webpack的区别1.构建方式：webpack是打包构建，启动时打包所有模块，项目越大启动越慢；vite基于浏览器原生ESModule，启动无需打包，按需加载；2.热更新：webpack热更新需要重新编译打包，速度慢；vite精准更新单个模块，秒级响应；3.适用场景：小型项目、快速开发首选vite；大型复杂项目、兼容老业务、需要极致打包优化首选webpack。五、手写代码高频题（面试必写）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,interval){

letflag=true;

returnfunction(...args){

if(!flag)return;

flag=false;

setTimeout(()=>{

fn.apply(this,args);

flag=true;

},interval)

}

}3.手写简易Promise实现核心状态、resolve、reject、then基础逻辑，适配面试基础考察。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)=>{