Web前端经典面试题（含详细答案）真实企业版

Web前端经典面试题（含详细答案）真实企业版适用场景：初级/中级前端面试、校招笔试、岗位复试题型说明：包含基础概念、原理问答、手写代码、工程化、浏览器原理、网络面试、实战场景题，答案贴合一线企业标准答案，通俗易懂、落地性强。一、HTML基础面试题1.HTML5新增特性有哪些？参考答案：1、语义化标签：header、nav、main、section、article、aside、footer，让页面结构更清晰，利于SEO和可读性。2、多媒体标签：audio、video，无需插件即可播放音视频。3、表单新特性：新增email、tel、number、date等输入类型，新增required、placeholder、autofocus等属性。4、本地存储：localStorage、sessionStorage，替代传统cookie，存储容量更大。5、画布与图形：canvas绘图、svg矢量图。6、其他能力：拖拽API、地理位置、webWorker、WebSocket长连接等。2.什么是语义化标签？好处是什么？参考答案：语义化标签就是标签本身可以描述内容含义，而非单纯用来设置样式。比如header代表头部、nav代表导航、footer代表底部。好处：1、代码结构清晰，可读性高，方便团队维护；2、有利于搜索引擎抓取页面内容，提升SEO效果；3、适配屏幕阅读器，对残障用户更友好；4、降低冗余div嵌套，代码更简洁。3.localStorage、sessionStorage、Cookie的区别参考答案：Cookie容量小，约4KB；默认跟随请求自动发送给服务端；可设置过期时间，默认浏览器关闭失效；可被后端操作。localStorage容量约5MB；永久存储，手动清除才会失效；仅前端可操作，不会自动随请求上传；跨标签共享。sessionStorage容量约5MB；仅当前标签页会话有效，关闭页面数据清空；不跨标签共享；仅前端操作。二、CSS核心面试题1.盒子模型有几种？区别是什么？参考答案：两种：标准盒模型、怪异盒模型（IE盒模型），由box-sizing控制。标准盒模型（content-box）元素宽高仅为content内容宽高，padding、border会向外撑开盒子，实际大小=width+padding+border。怪异盒模型（border-box）width设定的是整个盒子总宽度，包含content、padding、border，padding和border不会撑大盒子，日常开发最常用。2.居中布局的常用方式（水平+垂直）参考答案：1、Flex居中（最常用）父元素设置display:flex;justify-content:center;align-items:center;简单高效，适配所有场景。2、Grid居中父元素display:grid;place-items:center;一行代码实现居中。3、绝对定位居中（未知宽高）子元素absolute;top:0;left:0;right:0;bottom:0;margin:auto;4、绝对定位+transformtop:50%;left:50%;transform:translate(-50%,-50%);适配不定宽高元素。3.什么是BFC？触发条件和作用参考答案：BFC即块级格式化上下文，是浏览器的一块独立渲染区域，内部元素布局不会影响外部，外部也不会影响内部。触发条件：1、根元素html；2、overflow不为visible；3、display为inline-block、flex、grid；4、绝对定位、浮动元素。作用：1、解决浮动塌陷问题；2、解决上下margin重叠问题；3、隔离布局，防止元素互相干扰。4.CSS浮动的优缺点以及清除浮动的方法参考答案：优点：可以实现元素横向排列，早期用于多列布局。缺点：浮动脱离标准文档流，导致父元素高度塌陷，会影响后续布局。清除浮动方式：1、父元素设置overflow:hidden（最简单）；2、伪元素清除浮动（企业常用，最优解）；3、底部添加空div并设置clear:both。三、JavaScript核心高频题1.var、let、const的区别参考答案：1、var：函数级作用域，存在变量提升，可重复声明，值可修改，容易造成全局变量污染。2、let：块级作用域，无变量提升、存在暂时性死区，不可重复声明，值可修改。3、const：块级作用域，声明后不可修改引用地址，基础类型值不可变，引用类型可修改内部属性，日常用于定义常量。2.什么是闭包？闭包的用途和弊端参考答案：闭包是指内层函数可以访问外层函数作用域变量，且外层函数执行结束后，变量不被销毁的现象。简单说：函数嵌套，内层引用外层变量，即为闭包。用途：1、保存私有变量，实现模块化；2、缓存数据；3、解决循环定时器绑定问题；4、实现函数柯里化。弊端：变量常驻内存，无法及时回收，容易造成内存占用过高，使用不当会引发内存泄漏。3.原型与原型链的理解参考答案：JS中每个函数都有prototype原型对象，每个实例对象都有__proto__指向构造函数的prototype。原型链：当访问对象的属性或方法时，自身没有就会顺着__proto__向上查找，直到找到Ototype，终点为null，这条查找链路就是原型链。作用：实现方法和属性的复用，节省内存，是JS实现继承的核心机制。4.同步、异步、宏任务、微任务（面试必考）参考答案：同步：代码从上到下依次执行，上一行执行完才执行下一行，阻塞执行。异步：不会阻塞主线程，耗时任务交给浏览器后台执行，完成后再进入主线程。宏任务：整体代码、setTimeout、setInterval、AJAX、DOM事件。微任务：Promise.then/catch/finally、async/await、queueMicrotask。执行顺序：同步代码优先执行→清空所有微任务→执行一轮宏任务→再次清空微任务，循环往复（事件循环）。5.Promise的理解与三种状态参考答案：Promise是解决异步回调地狱的方案，用于统一管理异步任务，让异步代码更规整、可链式调用。三种状态：1、pending等待：初始状态，正在执行异步任务；2、fulfilled成功：任务执行成功，状态不可逆；3、rejected失败：任务执行失败，状态不可逆。状态一旦改变，就不会再次变更，支持链式调用then、catch、finally。6.async/await的原理参考答案：async/await是Promise的语法糖，让异步代码写法趋近同步，极大提升可读性。async修饰函数，返回值会自动包装为Promise；await只能在async函数内使用，会阻塞当前代码，等待Promise执行完成后再继续往下执行。优势：解决Promise链式嵌套问题，代码层级清晰，方便调试和异常捕获。7.深浅拷贝的区别及实现方式参考答案：浅拷贝：只拷贝第一层属性，复杂引用类型只拷贝地址，修改新对象会影响原对象。常用方式：Object.assign、扩展运算符...、数组slice。深拷贝：递归拷贝所有层级属性，新旧对象完全独立，修改互不影响。常用方式：JSON.parse(JSON.stringify())、手写递归深拷贝、lodash.cloneDeep。注意：JSON方式无法拷贝函数、undefined、正则、循环引用。四、浏览器与网络面试题1.从输入网址到页面展示全过程参考答案：1、DNS解析：将域名解析为服务器IP地址；2、建立TCP三次握手连接；3、发送HTTP请求，服务器接收并处理请求；4、服务器返回HTTP响应报文（HTML、CSS、JS、图片等资源）；5、浏览器解析HTML生成DOM树，解析CSS生成CSSOM树；6、合成渲染树，进行布局（重排）、绘制（重绘）；7、页面展示，关闭TCP连接（四次挥手）。2.重绘和重排的区别，如何优化参考答案：重排（回流）：元素布局、位置、尺寸发生改变，浏览器重新计算页面布局，消耗性能极高。重绘：仅元素样式、颜色、背景改变，不改变布局，只重新绘制页面，性能消耗较低。优化方案：1、集中修改样式，不要频繁操作DOM；2、使用class统一切换样式；3、使用transform、opacity实现动画（只触发重绘，不触发重排）；4、文档碎片批量更新DOM。3.HTTP1.0、HTTP1.1、HTTP2、HTTP3区别参考答案：HTTP1.0：短连接，一次请求一次连接，资源请求效率低。HTTP1.1：默认长连接，支持管道传输，新增缓存策略、状态码，是目前最通用版本，但存在队头阻塞。HTTP2：二进制传输、多路复用（解决队头阻塞）、头部压缩、服务器推送，大幅提升并发性能。HTTP3：基于QUIC协议，UDP传输，连接更快、抗网络抖动，弱网环境体验更好。4.GET和POST区别参考答案：1、传参方式：GET参数拼接在URL上，POST放在请求体中；2、缓存：GET可被浏览器缓存，POST默认不缓存；3、安全性：POST相对更安全，参数不会暴露在地址栏；4、数据限制：GET有URL长度限制，POST无限制；5、用途：GET用于查询数据，POST用于提交、新增、修改数据。五、Vue框架高频面试题（主流必考）1.Vue2和Vue3的核心区别参考答案：1、底层原理：Vue2基于Object.defineProperty劫持数据；Vue3基于Proxy代理，支持数组、新增属性监听。2、语法形式：Vue2选项式API；Vue3支持组合式API，代码更聚合，适合大型项目。3、生命周期：Vue3部分生命周期更名，新增setup作为入口函数。4、性能：Vue3按需编译、虚拟DOM优化、打包体积更小、渲染更快。5、TS支持：Vue3原生支持TypeScript，类型校验更完善。2.Vue双向绑定原理参考答案：Vue2核心：数据劫持+发布订阅模式。通过Object.defineProperty劫持data中属性的getter和setter，数据变化时触发setter，通知订阅者更新视图，视图输入变化时同步更新数据，实现双向绑定。Vue3使用Proxy代理整个对象，解决了Vue2无法监听数组变化、新增属性不更新的问题。3.Vue生命周期及常用场景参考答案：beforeCreate：实例刚创建，无法获取data和DOM。created：数据初始化完成，可请求接口、操作数据，无DOM。mounted：DOM渲染完成，可操作DOM、初始化插件、监听事件。updated：数据更新后视图重新渲染完成。beforeUnmount：组件销毁前，清除定时器、解绑事件，防止内存泄漏。unmounted：组件销毁完成。4.Vue组件通信方式参考答案：1、父子通信：props、$emit；2、祖孙跨级：provide/inject；3、兄弟组件：全局事件总线、Pinia/Vuex；4、任意组件：Pinia、Vuex状态管理；5、ref/$refs获取子组件实例。六、前端工程化&性能优化1.前端性能优化方案参考答案：加载优化1、静态资源CDN加速；2、图片懒加载、webp压缩；3、路由懒加载、组件按需引入；4、打包压缩、去除冗余代码；5、开启Gzip压缩。渲染优化1、减少DOM操作，避免频繁重排重绘；2、使用transform做动画；3、虚拟列表处理长列表数据；4、防抖节流优化高频事件。代码优化1、合理使用缓存（浏览器缓存、本地缓存）；2、避免全局变量泛滥；3、及时清除定时器、监听事件。2.防抖和节流的区别及使用场景参考答案：防抖：触发事件后延迟执行，期间再次触发会重置计时，只执行最后一次。场景：搜索框输入联想、窗口resize、表单输入校验。节流：固定时间内只执行一次，稀释执行频率。场景：滚动加载、鼠标移动、按钮频繁点击、拖拽事件。七、手写代码面试题（必刷）1.手写防抖函数参考答案：PlainText

functiondebounce(fn,delay){

lettimer=null;

returnfunction(...args){

if(timer)clearTimeout(timer);

timer=setTimeout(()=>{

fn.apply(this,args);

},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.onResolveCb=[];

this.onRejectCb=[];

constresolve=(val)=>{

if(this.status!=='pending')return;

this.status='fulfilled';

this.value=val;

this.onResolveCb.forEach(fn=>fn())

}

constreject=(err)=>{

if(this.status!=='pending')return;

this.status='rejected';

this.reason=err;

this.onRejectCb.forEach(fn=>fn())

}

executor(resolv