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

前端高频面试题及详细答案（实战版）本文档汇总企业前端面试高频考题，涵盖HTML、CSS、JavaScript、浏览器原理、工程化、Vue/React框架、手写代码、性能优化等核心模块，答案贴合实际开发场景，摒弃理论套话，适配初级、中级前端面试。一、HTML核心面试题1.说说HTML5的新增特性，日常开发常用哪些？日常开发中高频使用的HTML5特性主要分为标签、表单、多媒体、语义化、存储几类，摒弃了老旧废弃标签，实用性极强：1.语义化标签：header、nav、main、section、article、footer，替代传统div布局，代码结构更清晰，利于SEO和浏览器解析；2.多媒体标签：audio音频、video视频，无需插件即可实现媒体播放，支持进度控制、暂停、循环等属性；3.表单增强：新增input类型（number、tel、email、date）、表单验证属性（required、pattern、maxlength）、placeholder提示；4.本地存储：localStorage、sessionStorage，弥补cookie存储量小、携带请求头的缺陷；5.其他常用：canvas画布绘图、svg矢量图形、拖拽API、全屏API、地理位置API。2.什么是语义化标签？为什么要使用？语义化标签就是标签自带明确含义，浏览器和开发者可以通过标签名直接识别对应区域的功能，而非单纯用来布局。核心作用：1.代码可读性高：告别通篇div，结构分层清晰，多人协作维护成本低；2.利于SEO：搜索引擎爬虫可精准识别页面头部、导航、内容、底部核心区域，提升页面收录权重；3.适配无障碍设备：屏幕阅读器可精准解读页面结构，适配残障人士浏览；4.浏览器兼容性更好：标准化语义标签，适配各版本浏览器解析规则。3.cookie、sessionStorage、localStorage的区别三者均为前端本地存储方案，核心差异集中在存储大小、生命周期、请求携带、作用域：1.存储大小：cookie最小，仅4KB左右；sessionStorage、localStorage可存储5MB-10MB；2.生命周期：cookie可手动设置过期时间，默认关闭浏览器失效；sessionStorage仅当前会话有效，关闭标签页立即清空；localStorage永久存储，手动清除或代码删除才会失效；3.请求携带：cookie每次HTTP请求都会自动携带到服务端；sessionStorage、localStorage仅本地存储，不参与请求传输；4.作用域：cookie同域名下所有页面共享；sessionStorage仅限当前标签页；localStorage同域名跨标签页共享；5.用途：cookie多用于登录态、权限校验；localStorage用于长期本地缓存（用户配置、静态数据）；sessionStorage用于临时会话缓存（表单临时数据）。二、CSS核心面试题1.CSS选择器优先级排序，以及权重计算规则优先级从高到低：!important>行内样式>ID选择器>类/伪类/属性选择器>标签选择器>通配符>继承样式权重计算规则（不进位，逐位对比）：1.!important：权重无穷大，优先级最高，开发中尽量少用，避免样式难以覆盖；2.行内样式：1000；3.ID选择器：0100；4.类、伪类、属性选择器：0010；5.标签、伪元素选择器：0001；6.通配符、继承样式：0000。示例：#box.list权重0110，div.item权重0011，前者优先级更高。2.盒子模型详解，标准盒模型和怪异盒模型区别盒子模型是CSS布局的核心，所有元素都由四部分组成：内容区(content)、内边距(padding)、边框(border)、外边距(margin)。1.标准盒模型（默认box-sizing:content-box）：元素实际宽度=width+padding+border+margin；width仅代表内容区宽度，padding和border会撑大盒子。2.怪异盒模型（box-sizing:border-box）：元素实际宽度=width+margin；width包含内容区、padding、border，设置的宽高为盒子整体尺寸，不会被内边距、边框撑大。日常开发中统一使用border-box，布局更精准，无需手动计算尺寸。3.水平垂直居中的常用方法（适配不同场景）1.flex居中（最常用，适配所有场景）父元素设置：display:flex;justify-content:center;align-items:center;无需设置子元素样式，兼容性好、代码简洁。2.绝对定位+transform（未知宽高元素居中）父元素：position:relative;子元素：position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);3.绝对定位+margin（已知宽高元素居中）子元素设置宽高，position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;4.grid居中（极简，现代项目常用）父元素：display:grid;place-items:center;4.BFC是什么？触发条件及应用场景BFC即块级格式化上下文，是浏览器的一块独立渲染区域，区域内的元素布局不会影响外部元素，外部也不会干扰内部。常用触发条件：1.根元素html；2.浮动元素（float不为none）；3.绝对定位元素（fixed/absolute）；4.overflow不为visible；5.display为inline-block、grid、flex。核心应用：1.清除浮动：解决子元素浮动导致父元素高度塌陷问题；2.解决margin塌陷：相邻块级元素上下margin重叠问题；3.阻止元素被浮动元素覆盖，实现自适应布局。5.移动端适配方案有哪些？优缺点1.rem适配（主流传统方案）：基于根字体大小动态适配，适配大部分移动端机型，兼容低端设备，缺点是需要设置根字体，少量样式需要单独适配。2.vw/vh适配（现代项目首选）：vw为视口宽度百分比，100vw等于屏幕宽度，无需JS计算，纯CSS实现，适配精准，缺点是不兼容极低版本移动端浏览器。3.弹性布局flex+百分比：简单页面适配，轻量无适配成本，复杂多规格机型适配精度不足。4.媒体查询：针对不同屏幕尺寸定制样式，多用于适配大屏、折叠屏，适合微调样式，不适合全局适配。三、JavaScript核心面试题（重点）1.var、let、const的区别1.变量提升：var存在变量提升，声明前访问值为undefined；let、const无变量提升，存在暂时性死区，声明前访问直接报错。2.作用域：var仅支持全局、函数作用域，无块级作用域；let、const支持块级作用域（{}、if、for内部隔离）。3.重复声明：var允许重复声明变量；let、const同一作用域禁止重复声明。4.赋值规则：var、let可重复赋值；const声明常量，禁止重新赋值（引用类型可修改内部属性）。5.全局挂载：var声明的全局变量会挂载到window；let、const不会挂载到window。开发规范：优先使用const，可变变量使用let，禁止使用var。2.闭包是什么？优缺点及使用场景闭包的本质：内层函数访问外层函数的变量，且外层函数执行结束后，内层函数依然可以持有外层变量的引用，这种组合就是闭包。形成条件：函数嵌套、内层访问外层变量、内层函数被外部调用。常用场景：1.私有变量封装：避免全局变量污染，模拟模块私有作用域；2.定时器、事件回调：保留函数内部变量状态；3.函数柯里化、防抖节流、缓存数据。优点：保护私有变量、延长变量生命周期、实现数据缓存。缺点：变量长期驻留内存，无法及时回收，容易造成内存占用过高，严重时导致内存泄漏；需要手动置空销毁闭包。3.原型与原型链详解1.每个函数都有prototype（显式原型），指向原型对象，用于存放公共方法和属性，实现实例共享；2.每个实例对象都有__proto__（隐式原型），指向构造函数的prototype；3.原型链：对象查找属性/方法时，先在自身查找，找不到就顺着__proto__向上查找，直到找到Ototype，最终指向null，这条查找链路就是原型链。核心作用：实现继承和方法复用，减少内存占用，所有内置对象（数组、字符串）的公共方法都挂载在原型上。4.作用域、作用域链、暂时性死区1.作用域：变量可访问的有效区域，分为全局、函数、块级作用域，用于隔离变量，防止全局污染；2.作用域链：内层作用域访问变量时，先找自身，再逐层向外查找全局作用域，这条层级链路就是作用域链，查找规则单向向内、向外逐层匹配；3.暂时性死区：let/const声明的变量，在代码块开始到声明语句执行前，处于不可访问的死区，在此阶段访问变量会直接报错，解决了var变量提升的乱象。5.同步、异步的区别，宏任务、微任务执行顺序1.同步：代码从上到下依次执行，上一行执行完毕才会执行下一行，阻塞后续代码；2.异步：耗时操作（定时器、请求、事件）交给浏览器后台执行，不阻塞主线程，完成后再回调执行；3.宏任务：整体代码script、setTimeout、setInterval、AJAX请求、UI渲染；4.微任务：Promise.then/catch/finally、async/await、queueMicrotask、MutationObserver；完整执行顺序：执行同步代码→清空所有微任务→执行一轮宏任务→再次清空微任务→循环往复（事件循环）。6.Promise的理解，三种状态及优缺点Promise是解决异步回调地狱的方案，用于统一管理异步操作，让异步代码扁平化、可链式调用。三种状态（不可逆）：1.pending：初始等待状态，异步操作未完成；2.fulfilled：成功状态，执行resolve，状态锁定；3.rejected：失败状态，执行reject，状态锁定。优点：解决回调地狱、支持链式调用、统一异步错误处理、可并行执行多个异步（Promise.all）；缺点：一旦创建立即执行，无法取消、无法捕获进度状态、单层链式仍有少量嵌套。7.async/await的原理，和Promise的区别async/await是Promise的语法糖，底层基于Promise实现，目的是让异步代码写法接近同步代码，可读性更高。核心规则：1.async修饰的函数，返回值自动包装成Promise对象；2.await只能在async函数内部使用，会阻塞当前代码，等待Promise状态完成后再执行后续代码；3.错误捕获需要配合try/catch，无法直接捕获异步错误。对比Promise：Promise适合多个异步并行、批量处理；async/await适合串行异步、流程清晰的场景，日常开发优先使用async/await。8.深浅拷贝的区别，及实现方式针对引用类型（对象、数组），基本数据类型无深浅拷贝差异。1.浅拷贝：只拷贝第一层属性，复杂引用类型属性依旧共享内存地址，修改新对象嵌套属性会影响原对象；常用方法：Object.assign、扩展运算符...、数组slice()；2.深拷贝：完全拷贝对象所有层级属性，新旧对象完全独立，互不影响；常用方法：JSON.parse(JSON.stringify())（简单对象，无法拷贝函数、undefined、正则）、递归手写深拷贝、lodash.cloneDeep（项目常用）。9.防抖和节流的区别及应用场景两者均为高频事件优化方案，减少函数执行次数，提升页面性能。1.防抖：触发事件后，延迟一段时间执行，若期间再次触发，重置延迟时间，多次触发只执行最后一次；场景：搜索框输入联想、窗口resize、表单输入校验；2.节流：固定时间内只执行一次，定时匀速执行，稀释触发频率；场景：滚动监听、鼠标移动、按钮高频点击、轮播图切换。四、浏览器原理与网络1.页面从输入URL到页面渲染完成的全过程1.DNS解析：将域名解析为服务器IP地址；2.TCP三次握手：建立可靠网络连接；3.发送HTTP请求：浏览器组装请求头、请求体，发送请求；4.服务器响应：后端处理请求，返回响应头、响应体（HTML、CSS、JS资源）；5.关闭TCP连接（四次挥手）；6.页面解析渲染：解析HTML生成DOM树、解析CSS生成CSSOM树、合成渲染树、布局(layout)、绘制(paint)、合成(composite)；7.执行JS代码，完成页面交互绑定。2.HTTP1.0、HTTP1.1、HTTP2、HTTP3区别1.HTTP1.0：短连接，每次请求都要新建TCP连接，请求完成立即断开，效率极低；2.HTTP1.1（主流）：支持长连接、缓存机制、断点续传，缺点是单域名同一时间只能6个请求，存在队头阻塞；3.HTTP2：二进制传输、多路复用（一个连接并发多个请求）、头部压缩、服务器推送，解决队头阻塞；4.HTTP3：基于UDP协议，无需TCP握手，连接更快，容错性更高，适配弱网环境。3.跨域问题产生原因及解决方案跨域产生原因：浏览器同源策略限制，协议、域名、端口任意一个不同，即为跨域，阻止前端访问跨域接口，保障网络安全。常用解决方案（优先级从高到低）：1.后端CORS跨域（项目主流）：服务端设置响应头，允许指定域名跨域访问；2.本地代理跨域（开发环境）：vue/vite配置proxy代理，绕过浏览器同源限制；3.JSONP：仅支持get请求，兼容性好，无法处理post请求，现在基本淘汰；4.Nginx反向代理：线上环境统一域名转发，解决跨域。4.回流和重绘的区别，如何优化1.重绘：元素样式改变（颜色、透明度），不改变布局尺寸，浏览器重新绘制页面，开销较小；2.回流（重排）：元素宽高、位置、布局改变，浏览器重新计算页面布局，开销极大，会触发连带回流；优化方案：1.批量修改样式，避免逐行修改DOM样式；2.使用类名统一样式修改，替代style直接修改；3.脱离文档流渲染：使用绝对定位、浮动，减少回流范围；4.开启硬件加速：transform、opacity属性仅触发重绘，不触发回流。五、前端工程化1.Webpack和Vite的区别1.构建原理：Webpack基于打包构建，将所有文件打包成模块，启动项目需要遍历所有文件，冷启动慢；Vite基于ESModule原生模块，开发环境无需打包，按需加载，启动速度极快；2.适配场景：Webpack生态成熟，兼容老项目、复杂项目，打包稳定性高；Vite适配Vue/React新项目，开发体验好，热更新速度快；3.热更新：Webpack热更新需要重新打包模块，大型项目卡顿；Vite精准按需更新，速度几乎无延迟；4.生产打包：Vite生产环境依旧使用Rollup打包，和Webpack打包效果差距不大。2.模块化CommonJS和ES6Module区别1.适用环境：CommonJS是Node.js规范，服务端专用；ES6Module是浏览器+服务端通用规范，前端标准模块化；2.加载方式：CommonJS运行时加载，动态加载；ES6Module编译时静态加载，支持tree-shaking（打包去除无用代码）；3.导出特性：CommonJS导出值是拷贝，原模块变化不影响导入值；ES6Module导出是引用，原模块变化会同步更新；4.语法：CommonJS：module.exports/require；ES6Module：export/import。六、Vue框架高频面试题1.Vue2和Vue3的核心区别1.底层原理：Vue2基于Object.defineProperty劫持数据，无法监听新增、删除属性，数组监听有缺陷；Vue3基于Proxy代理整个对象，支持监听所有属性、数组变化、新增删除属性；2.语法风格：Vue2选项式API，代码分散；Vue3组合式API，按功能聚合代码，适合大型项目；3.性能：Vue3打包体积更小、渲染速度更快、内存占用更低，支持tree-shaking；4.新增特性：setup语法糖、ref/reactive、computed/watch增强、Teleport、Suspense、生命周期优化；5.类型支持：Vue3原生支持TS，类型校验更完善；Vue2对TS支持较弱。2.Vue响应式原理1.Vue2响应式：通过Object.defineProperty对数据属性进行劫持，拦截数据的读取和修改操作，结合发布订阅模式，数据变化后通知视图更新；缺陷是无法监听对象新增/删除属性、数组下标修改、数组长度修改，需要借助Vue.set、$set解决。2.Vue3响应式：通过Proxy代理整个数据对象，拦截数据的读取、修改、新增、删除、数组操作等所有行为，配合Reflect操作对象属性，完美解决Vue2的响应式缺陷，支持深层监听、动态属性监听。3.computed和watch的区别1.计算属性computed：依赖缓存，依赖值不变则不会重新计算，适合数据派生、简单计算，同步执行，有返回值；2.监听属性watch：无缓存，数据每次变化都会触发执行，适合数据变化后的异步操作、复杂逻辑，支持异步，无返回值；3.使用场景：简单数据转换用computed；监听数据变化执行请求、定时器、复杂逻辑用watch。4.Vue生命周期及常用钩子生命周期是组件从创建、挂载、更新、销毁的完整流程，常用钩子：1.created：组件创建完成，数据挂载完毕，DOM未生成，可发起接口请求；2.mounted：DOM挂载完成，页面渲染完毕，可操作DOM、绑定事件、初始化插件；3.updated：数据更新后DOM重新渲染完成；4.unmounted：组件销毁，清除定时器、解绑事件，防止内存泄漏。5.Vue虚拟DOM和diff算法虚拟DOM：用JS对象描述DOM结构，真实DOM操作开销大，通过虚拟DOM对比差异，最小化更新真实DOM，提升渲染性能。diff算法核心：同层比较，不跨层级对比1.Vue2diff：双端对比，通过key标识节点，判断节点新增、删除、移动，逐层对比标签、属性、文本；2.Vue3diff：优化快速Diff算法，跳过静态节点，只对比动态节点，通过预处理判断节点增减，大幅提升diff效率。key的作用：唯一标识节点，精准复用节点，避免节点错乱、渲染错误。七、React高频面试题（选学）1.函数组件和类组件的区别1.语法：函数组件是纯JS函数，结构简洁；类组件基于ES6类，代码冗余；2.状态管理：函数组件通过Hooks管理状态；类组件通过this.state、this.setState管理；3.生命周期：函数组件无原生生命周期，通过useEffect模拟；类组件拥有完整生命周期钩子；4.性能：函数组件无this指向问题，渲染更快，配合Hooks逻辑复用更灵活；5.现状：官方推荐函数组件+Hooks开发，类组件逐步淘汰。2.useState和useEffect用法及原理1.useState：用于函数组件定义响应式状态，返回状态变量和修改函数，状态修改触发组件重新渲染；2.useEffect：副作用钩子，用于替代生命周期，处理接口请求、事件绑定、定时器、DOM操作；依赖项规则：空依赖仅挂载执行一次；依赖数组监听指定变量变化执行；无依赖每次渲染都执行。3.React虚拟DOM和fiber架构React16之前采用递归diff，一次性渲染完成，耗时过长会阻塞主线程；Fiber架构将组件渲染任务拆分为细小单元，通过浏览器空闲时间分片执行，可暂停、恢复、中断任务，避免页面卡顿，提升页面流畅度。八、手写代码高频考题（必背）1.手写防抖函数PlainText

functiondebounce(fn,delay=300){

lettimer=null;

returnfunction(...args){

if(timer)clearTimeout(timer);

timer=setTimeout(()=>{

fn.apply(this,args);

timer=null;

},delay)

}

}2.手写节流函数PlainText

functionthrottle(fn,delay=300){

letflag=true;

returnfunction(...args){

if(!flag)return;

flag=false;

setTimeout(()=>{

fn.apply(this,args);

flag=true;

},delay)

}

}3.手写简易深拷贝PlainText

functiond