Web前端高频面试题及详细答案（完整版可下载）

Web前端高频面试题及详细答案（完整版可下载）说明：本题库汇总一线大厂高频考点，答案贴合实际开发场景，语言通俗直白，无冗余话术，适合面试突击、日常复盘，可直接保存打印使用。涵盖HTML、CSS、JavaScript、ES6+、浏览器原理、工程化、性能优化、框架基础核心考点。一、HTML核心面试题1、HTML5新增特性有哪些？日常开发常用哪些？参考答案：HTML5主要新增语义化标签、多媒体能力、表单新特性、本地存储、画布绘图等功能，日常高频使用的内容如下：1.语义化标签：header、nav、main、section、article、aside、footer，替代传统div布局，提升代码可读性和SEO优化效果；2.多媒体标签：audio音频、video视频，无需依赖插件即可实现媒体播放；3.表单升级：新增input类型（date、number、email、tel）、表单验证属性（required、pattern、placeholder）；4.本地存储：localStorage、sessionStorage，弥补cookie存储量小、携带请求头的缺陷；5.绘图能力：canvas画布、svg矢量图形，用于实现图表、动画、可视化效果；6.其他：拖拽API、全屏API、地理定位API等。2、语义化标签的作用是什么？参考答案：1.代码可读性更强：结构清晰，一眼可区分页面头部、导航、主体、侧边栏、底部等区域，方便团队协作维护；2.利于SEO：搜索引擎爬虫可精准识别页面结构和内容权重，提升网页搜索排名；3.适配无障碍设备：屏幕阅读器可精准解析页面模块，适配残障人士浏览场景；4.标准化规范：替代杂乱的div嵌套，统一项目代码规范。3、cookie、localStorage、sessionStorage的区别？参考答案：1.存储大小：cookie最大4KB，localStorage、sessionStorage可存储5MB左右；2.生命周期：cookie可手动设置过期时间，默认关闭浏览器失效；localStorage永久存储，手动清除才会失效；sessionStorage仅当前会话有效，关闭标签页立即清空；3.请求携带：cookie每次HTTP请求都会自动携带到服务端，另外两者仅本地存储，不参与请求；4.使用场景：cookie用于身份验证、登录态保存；localStorage用于长期本地数据缓存；sessionStorage用于临时页面数据存储。二、CSS核心面试题1、标准盒模型和IE怪异盒模型的区别？如何统一设置？参考答案：1.标准盒模型（W3C）：元素设置的width/height仅对应内容区content宽度高度，元素实际占位宽高=content+padding+border+margin；2.IE怪异盒模型：元素设置的width/height包含content+padding+border，实际占位宽高=设定宽高+margin；3.项目统一设置：全局添加box-sizing:border-box;，所有元素统一使用怪异盒模型，避免布局错位，是前端项目通用规范。2、什么是BFC？触发条件和实际作用？参考答案：BFC即块级格式化上下文，是浏览器独立的渲染区域，内部元素布局不会影响外部元素，外部也不会干扰内部。常见触发条件：1.根元素html；2.设置overflow为hidden、auto、scroll；3.元素浮动float不为none；4.position为absolute、fixed；5.display为flex、grid、inline-block。实际作用：1.清除浮动：解决子元素浮动导致父元素高度塌陷问题；2.解决margin重叠：相邻块级元素上下margin合并的问题；3.隔离布局：形成独立渲染区域，避免元素互相干扰。3、CSS选择器权重优先级？参考答案：优先级从高到低排序：!important>行内样式>ID选择器>类/伪类/属性选择器>标签/伪元素选择器>通配符选择器>继承样式权重计算规则（a,b,c,d）：a：行内样式数量；b：ID选择器数量；c：类、伪类、属性选择器数量；d：标签、伪元素选择器数量对比时从左到右依次比较，数值大的优先级更高，权重高的样式会覆盖低权重样式。4、回流和重绘的区别？如何优化？参考答案：回流（重排）：当元素的布局属性（宽高、位置、边距、字体大小）发生变化时，浏览器重新计算页面所有元素布局，开销极大。重绘：仅元素样式（颜色、背景、透明度）发生变化，不改变布局，浏览器仅重新渲染像素，开销较小。优化方案：1.批量修改DOM样式，避免逐行修改；2.使用class统一切换样式，替代单独修改style；3.利用transform、opacity实现动画，仅触发重绘不触发回流；4.使用文档碎片批量插入DOM节点；5.避免频繁读取DOM布局属性。5、Flex常用属性及居中方案？参考答案：Flex是弹性布局，适配移动端和自适应布局，分为容器属性和子项属性。容器常用属性：display:flex（开启弹性布局）、flex-direction（主轴方向）、justify-content（主轴对齐）、align-items（侧轴对齐）、flex-wrap（是否换行）。子项常用属性：flex-grow（放大比例）、flex-shrink（缩小比例）、flex-basis（基础宽度）、align-self（单独对齐）。万能居中方案：父元素设置display:flex;justify-content:center;align-items:center;，可实现子元素水平垂直居中，兼容性好、代码简洁。三、JavaScript核心面试题1、JS数据类型有哪些？区别是什么？参考答案：分为基本数据类型和引用数据类型两大类，共8种。1.基本类型（7种）：String、Number、Boolean、Null、Undefined、Symbol、BigInt特点：存储在栈内存，赋值为值拷贝，数据相互独立，互不影响；Symbol用于定义唯一值，避免属性冲突，BigInt用于处理超大整数。2.引用类型（1种）：Object（包含对象、数组、函数、正则等）特点：存储在堆内存，栈中仅保存内存地址，赋值为地址拷贝，多个变量指向同一内存，修改会互相影响。2、什么是闭包？优缺点及内存泄漏解决方案？参考答案：闭包定义：内层函数能够访问并记住外层函数的变量，即使外层函数执行完毕，变量依然不会被销毁，这种组合就是闭包。本质是函数作用域的嵌套与变量常驻。优点：1.实现变量私有化，避免全局变量污染；2.保存函数执行上下文，缓存数据；3.实现模块化、柯里化、防抖节流等功能。缺点：会导致变量长期占用内存，无法被垃圾回收，容易造成内存泄漏。解决办法：1.闭包变量使用完毕后手动赋值为null，释放引用；2.避免在循环中创建大量闭包；3.合理控制闭包使用场景，不滥用闭包。3、防抖和节流的区别？手写基础版本？参考答案：防抖：触发事件后延迟执行，若期间再次触发，重置延迟时间，只执行最后一次。适用于输入框搜索、窗口resize、表单输入等场景。节流：固定时间内只执行一次，无论触发多少次，保持执行频率稳定。适用于滚动监听、按钮重复点击、鼠标移动等场景。手写防抖：javascript

functiondebounce(fn,delay){

lettimer=null;

returnfunction(...args){

if(timer)clearTimeout(timer);

timer=setTimeout(()=>{

fn.apply(this,args);

timer=null;

},delay);

}

}手写节流：javascript

functionthrottle(fn,interval){

letflag=true;

returnfunction(...args){

if(!flag)return;

flag=false;

setTimeout(()=>{

fn.apply(this,args);

flag=true;

},interval);

}

}4、JS事件循环机制（浏览器端）？宏任务和微任务区别？参考答案：JS是单线程语言，事件循环是其异步执行的核心机制，执行顺序：同步代码执行完毕→清空所有微任务→执行一轮宏任务→循环往复。微任务（优先级高）：Promise.then/catch/finally、queueMicrotask、async/await、MutationObserver宏任务（优先级低）：setTimeout、setInterval、AJAX请求、DOM事件、script整体代码注意：Node.js事件循环与浏览器不同，执行阶段更多、优先级规则有差异，日常前端开发以浏览器机制为准。5、this指向问题总结？参考答案：this指向由调用方式决定，和定义位置无关：1.普通函数直接调用：this指向window（浏览器）/global（Node），严格模式下为undefined；2.对象方法调用：this指向调用该方法的对象；3.构造函数new调用：this指向实例化的新对象；4.箭头函数：无独立this，继承外层作用域的this，且无法被bind、call、apply修改；5.bind/call/apply：手动修改this指向，绑定指定对象。6、数组常用方法及是否改变原数组？参考答案：改变原数组：push、pop、unshift、shift、splice、reverse、sort不改变原数组（返回新数组/新值）：map、filter、reduce、forEach、slice、concat、join、find、findIndex、every、some日常开发优先使用不改变原数组的方法，符合函数式编程思想，减少副作用。四、ES6+高频面试题1、let、const、var的区别？参考答案：1.变量提升：var存在变量提升，声明前可访问（值为undefined）；let、const无变量提升，存在暂时性死区，声明前无法访问；2.作用域：var仅支持函数作用域、全局作用域；let、const支持块级作用域（{}内部生效）；3.重复声明：var允许重复声明；let、const禁止重复声明；4.赋值规则：var、let可修改值；const声明常量，必须初始化，基础类型不可修改，引用类型可修改内部属性；5.挂载全局：var声明的全局变量挂载到window；let、const不会挂载到window。2、Promise是什么？三种状态及链式调用特点？参考答案：Promise是异步编程解决方案，用于解决回调地狱问题，让异步代码扁平化、可维护。三种状态（不可逆）：1.pending：初始等待状态；2.fulfilled：成功状态；3.rejected：失败状态链式调用特点：1.then方法返回新的Promise实例，支持链式调用；2.成功走then，失败走catch；3.状态一旦改变，永久固定，无法二次修改；4.finally无论成功失败都会执行，常用于关闭加载状态。3、async/await的作用及优缺点？参考答案：async/await是Promise的语法糖，让异步代码写法同步化，代码更简洁易懂。规则：async修饰函数，返回Promise实例；await只能在async函数内部使用，用于等待Promise执行完毕。优点：解决Promise链式嵌套问题，代码可读性高，逻辑清晰；缺点：默认串行执行，多个无依赖异步任务并行执行效率低，需配合Promise.all使用；需手动try/catch捕获异常。4、Set和Map的作用及使用场景？参考答案：1.Set：无序、元素唯一的集合，自动去重，支持数组去重、判断元素是否存在；常用方法：add、delete、has、clear；2.Map：键值对集合，键可以是任意类型（对象、数组、函数），弥补Object键只能是字符串/Symbol的缺陷；适合存储复杂键名数据、频繁增删键值对的场景。五、浏览器原理与性能优化1、浏览器从输入网址到页面展示全过程？参考答案：1.DNS解析：将域名解析为服务器IP地址；2.TCP三次握手：建立客户端与服务端可靠连接；3.HTTP请求：客户端发送请求报文，服务端返回响应资源（HTML、CSS、JS、图片等）；4.解析HTML：构建DOM树；解析CSS：构建CSSOM树；5.生成渲染树：整合DOM树和CSSOM树，只包含可见元素；6.布局回流：计算元素页面位置和大小；7.绘制重绘：渲染像素到屏幕，展示页面；8.TCP四次挥手：关闭连接。2、前端常见内存泄漏场景及解决方案？参考答案：常见场景：1.全局变量过多，未及时销毁；2.闭包未释放引用；3.定时器、延时器未清除；4.DOM事件监听未解绑；5.手动存储DOM引用，节点删除后未清空；6.循环引用未处理。解决方案：1.减少全局变量，使用模块化作用域；2.闭包变量用完置空；3.页面销毁前清除定时器、解绑事件；4.删除DOM节点时清空对应引用；5.避免无效循环引用。3、前端性能优化常用方案？参考答案：1.加载优化：资源压缩打包、开启Gzip压缩、图片懒加载、路由懒加载、静态资源CDN加速、减少HTTP请求次数；2.渲染优化：减少回流重绘、开启硬件加速、避免层级嵌套过深、精简DOM节点；3.代码优化：避免全局污染、合理使用闭包、清除无效定时器和事件、防抖节流优化高频事件；4.缓存优化：利用浏览器缓存、localStorage缓存静态数据、接口数据缓存。六、前端工程化与框架基础1、webpack常用核心配置？参考答案：1.entry：项目入口文件；2.output：打包输出路径和文件名；3.module：配置loader，解析css、less、图片、字体等资源；4.plugins：配置插件，实现html生成、代码压缩、热更新等功能；5.mode：区分开发环境development和生产环境production；6.devServer：开启本地热更新、跨域代理。2、Vue双向绑定原理？参考答案：Vue2通过Object.defineProperty劫持对象属性的getter和setter，数据读取时收集依赖，数据修改时触发视图更新；结合发布订阅模式，监听数据变化，精准更新对应视图。Vue3使用Proxy代理整个对象，支持数组、新增属性、删除属性监听，弥补了Object.defineProperty的缺陷，响应式能力更强。3、React虚拟DOM和Diff算法作用？参考答案：虚拟DOM是真实DOM的JS对象映射，避免频繁操作真实DOM造成的性能损耗。Diff算法用于对比新旧