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

Web前端高频面试题及详细答案（真实面试版）一、HTML基础面试题1、HTML5新增了哪些常用标签？语义化标签的优势是什么？答案：常用新增语义化标签：header、nav、main、section、article、aside、footer、figure、figcaption。优势：1、结构清晰：页面代码层级分明，一眼能区分头部、导航、主体、侧边栏、底部模块；2、利于SEO：搜索引擎可以精准识别页面模块权重，提升网页收录和排名；3、适配设备：屏幕阅读器等辅助设备可精准解析页面结构，提升无障碍访问性；4、代码可维护性高：替代了大量无意义的div，多人协作时更容易读懂代码结构。2、行内元素、块级元素、行内块元素的区别？答案：块级元素：独占一行，默认宽度100%父级宽度，可设置宽高、内外边距。常见：div、p、h1-h6、ul、li、section。行内元素：同行排列，不独占一行，宽高由内容撑开，无法设置宽高、上下边距，仅可设置左右内外边距。常见：span、a、em、i。行内块元素：兼具两者特性，同行排列，同时可以设置宽高、内外边距。常见：img、input、button。3、img标签alt和title属性的区别？答案：alt：图片加载失败时显示的替代文本，核心作用是SEO优化和无障碍访问，是img必需属性。title：鼠标悬浮在图片上时显示的提示文字，仅作交互提示，无优化作用。二、CSS核心面试题1、CSS选择器优先级规则？如何计算？答案：优先级从高到低排序：!important>行内样式>ID选择器>类/伪类/属性选择器>标签选择器>通配符选择器>继承样式。计算规则（无进位机制）：1、行内样式：10002、ID选择器：01003、类、伪类、属性选择器：00104、标签、伪元素选择器：0001相同优先级时，后写的样式覆盖先写的，!important直接强制最高优先级，开发中尽量少用，避免样式难以维护。2、盒模型有几种？区别是什么？答案：分为标准盒模型（content-box）和怪异盒模型（border-box）。标准盒模型（默认）：元素设置的width/height仅为内容区尺寸，元素实际占位宽高=内容宽高+padding+border+margin。怪异盒模型：元素设置的width/height是整体尺寸，包含内容、padding、border，修改padding和border不会撑大盒子，实际占位宽高=设置的宽高+margin。日常开发统一设置：box-sizing:border-box，方便布局尺寸精准控制。3、Flex常用属性及布局原理？答案：Flex是弹性布局，核心是通过父容器控制子元素排列，适配各类自适应场景，替代传统浮动布局。父容器常用属性：display:flex：开启弹性布局；flex-direction：主轴方向（row横向、column纵向）；justify-content：主轴对齐方式（居中、两端对齐、均分等）；align-items：交叉轴对齐方式；flex-wrap：是否自动换行。子元素常用属性：flex-grow：剩余空间分配比例，默认0（不分配）；flex-shrink：空间不足时缩放比例，默认1（自动缩放）；flex-basis：元素基础尺寸，优先级高于width；flex：1是常用简写，代表均分剩余空间。4、CSS垂直居中的常用方法？答案：分享3种项目最常用、兼容性好的方法：1、Flex居中（首选）：父容器设置display:flex;justify-content:center;align-items:center;简单高效，适配所有场景。2、绝对定位+transform：子元素绝对定位top:50%;left:50%;transform:translate(-50%,-50%);无需知道元素宽高。3、绝对定位+margin负值：已知子元素宽高时，top/left设50%，margin设置宽高一半的负值，兼容性极佳。5、BFC是什么？触发条件和作用？答案：BFC即块级格式化上下文，是页面独立的渲染区域，内部元素样式不会影响外部，外部也不会干扰内部。常用触发条件：1、根元素html；2、overflow不为visible（auto/hidden/scroll）；3、display为inline-block、flex、table；4、绝对定位、浮动元素。实际作用：1、解决浮动元素父级高度塌陷问题；2、阻止外边距重叠；3、实现自适应两栏、三栏布局。三、JavaScript核心面试题1、var、let、const的区别？答案：1、变量提升：var存在变量提升，声明前可访问（值为undefined）；let、const无变量提升，存在暂时性死区，声明前无法访问。2、作用域：var只有全局、函数作用域；let、const支持块级作用域（{}内部生效）。3、重复声明：var允许重复声明；let、const禁止重复声明。4、修改规则：var、let可重复赋值修改；const声明后不可修改（引用类型可修改内部属性，地址不变即可）。日常开发：优先用const，需修改变量用let，完全不用var。2、什么是闭包？闭包的作用和优缺点？答案：定义：函数嵌套，内层函数访问外层函数的变量，外层函数执行结束后，变量不被销毁，这个内层函数就是闭包。简单说：能够读取其他函数内部变量的函数。作用：1、保存私有变量，实现变量私有化，避免全局变量污染；2、保留函数执行上下文，缓存数据；3、实现模块化、防抖节流、柯里化等功能。缺点：1、变量常驻内存，不会被垃圾回收，容易造成内存占用过高；2、使用不当会引发内存泄漏，需要手动释放变量。3、原型和原型链的理解？答案：每个函数都有prototype（显式原型），每个实例对象都有__proto__（隐式原型），实例的__proto__指向构造函数的prototype。原型作用：存放公共方法和属性，实现方法复用，减少内存占用。所有实例可以共享原型上的属性和方法。原型链：对象查找属性/方法时，先在自身查找，找不到就顺着__proto__向上查找，直到找到Ototype，最终指向null，这条查找链路就是原型链。核心结论：万物皆对象，所有对象最终都继承自Object。4、this指向问题总结？答案：this指向由调用方式决定，和定义位置无关：1、普通函数直接调用：this指向window（浏览器）/global（node）；2、对象方法调用：this指向调用该方法的对象；3、构造函数调用：this指向new出来的实例对象；4、箭头函数：没有自己的this，继承外层作用域的this，且无法通过call/apply/bind修改；5、call/apply/bind：强制修改this指向第一个参数。5、call、apply、bind的区别？答案：三者作用一致：修改函数this指向。1、call：参数逐个传递，立即执行函数；2、apply：参数以数组形式传递，立即执行函数；3、bind：参数逐个传递，返回一个新函数，不会立即执行，需要手动调用。常用场景：数组最大值Math.max.apply(Math,arr)、改变定时器this指向用bind。6、异步JS宏任务和微任务的区别？事件循环机制？答案：事件循环核心：同步代码优先执行，执行完毕后清空所有微任务，再执行一次宏任务，循环往复。微任务（优先级高）：Promise.then/catch/finally、async/await、queueMicrotask。宏任务（优先级低）：setTimeout、setInterval、ajax、DOM事件。执行顺序：同步代码>所有微任务>第一个宏任务>新一轮微任务>下一个宏任务。7、async/await的原理和使用注意事项？答案：async/await是Promise的语法糖，让异步代码可以像同步代码一样书写，极大提升可读性。1、async修饰的函数，返回值一定是Promise对象；2、await只能在async函数内部使用，用于等待Promise执行完成，阻塞后续代码；3、异常处理：await报错会直接终止代码，必须配合try/catch捕获异常。8、JS垃圾回收机制？答案：JS自动进行垃圾回收，回收不再被引用的变量占用的内存，无需手动操作。1、栈内存：函数执行结束后，局部变量自动销毁回收；2、堆内存：采用标记清除算法，遍历所有对象，标记可达对象，清除无标记、无引用的对象。常见内存泄漏场景：全局变量过多、闭包滥用、定时器未清除、DOM事件监听未移除。四、Vue框架面试题（Vue2/Vue3通用高频）1、Vue双向绑定原理？Vue2和Vue3的区别？答案：Vue2原理：基于Object.defineProperty()劫持对象的getter/setter，数据读取时收集依赖，数据修改时触发视图更新。缺陷：无法监听对象新增、删除属性，无法监听数组下标修改、长度修改，需要借助Vue.set、$set处理。Vue3原理：基于Proxy代理整个对象，可监听对象新增、删除、数组所有修改操作，监听范围更广、性能更好。2、Vue生命周期及常用钩子？答案：生命周期是组件从创建、挂载、更新、销毁的完整过程，常用钩子：1、created：组件创建完成，可获取数据，DOM未生成，无法操作DOM；常用于请求接口、初始化数据；2、mounted：DOM挂载完成，页面渲染完毕；常用于操作DOM、初始化定时器、监听事件；3、updated：数据更新后视图重新渲染完成；4、unmounted（Vue2destroyed）：组件销毁，清空定时器、移除监听，防止内存泄漏。3、v-if和v-show的区别？使用场景？答案：1、v-if：真实销毁/创建DOM元素，切换开销大，初始渲染开销小；2、v-show：通过display:none控制显示隐藏，DOM始终存在，切换开销小，初始渲染开销大。使用场景：页面一次性显示/隐藏用v-if；频繁切换（弹窗、tab切换）用v-show。4、Vue组件通信方式？答案：项目常用全覆盖：1、父子通信：父传子props，子传父$emit；2、兄弟通信：全局事件总线（$bus）、Pinia/Vuex；3、跨层级通信：provide/inject、Pinia/Vuex；4、简单跨组件：全局变量、本地存储（少量数据）。中大型项目优先用Pinia/Vuex统一管理状态，维护性更好。5、Vue为什么需要虚拟DOM？Diff算法原理？答案：真实DOM操作开销极大，虚拟DOM是用JS对象模拟DOM结构，先通过JS对比数据变化，最小化更新DOM，减少真实DOM操作次数，提升页面性能。Diff算法核心：同层比较，不跨层级对比，通过key标识节点唯一性，对比新旧虚拟DOM树，找出差异节点，只更新差异部分DOM，实现高效渲染。key作用：精准匹配节点，避免节点复用错乱，提升diff对比效率。五、浏览器与网络面试题1、从输入网址到页面展示的完整流程？答案：1、DNS解析：将域名解析为服务器IP地址；2、TCP三次握手：建立客户端与服务器的可靠连接；3、发送HTTP请求：客户端携带请求头、参数请求服务器；4、服务器处理请求：后端接收参数、处理逻辑、返回响应数据；5、浏览器接收响应：获取HTML、CSS、JS、图片等资源；6、页面渲染：解析HTML生成DOM树、解析CSS生成CSSOM树，合成渲染树，布局、绘制页面；7、JS执行、页面加载完成，触发load事件。2、HTTP和HTTPS的区别？答案：1、HTTP明文传输，数据不安全，端口80；HTTPS加密传输，数据安全，端口443；2、HTTPS在HTTP基础上增加SSL/TLS加密层，通过证书验证服务器合法性；3、HTTP无开销、速度快；HTTPS需要握手加密，有轻微性能开销；4、HTTPS利于SEO，浏览器标记安全站点，HTTP会被标记不安全。3、GET和POST请求区别？答案：1、参数位置：GET参数拼接在URL地址栏，POST参数放在请求体；2、缓存机制：GET可被浏览器缓存，POST默认不缓存；3、参数长度：GET有URL长度限制，POST无长度限制；4、安全性：GET参数暴露在地址栏，安全性低；POST相对安全；5、使用场景：查询数据用GET，提交、修改、新增数据用POST。4、浏览器缓存机制？答案：浏览器缓存分为强缓存和协商缓存，优先走强缓存，失效后走协商缓存。强缓存：Cache-Control、Expires，资源未过期直接读取本地缓存，不请求服务器，状态码200(fromcache)；协商缓存：强缓存失效后，携带标识请求服务器（Last-Modified/ETag），资源未更新则返回304，继续用本地缓存；资源更新则返