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

Web前端高频面试题及详细答案（实战版）一、HTML基础面试题1、HTML5新增了哪些常用标签？实际项目中用过哪些？参考答案：HTML5新增了大量语义化标签、媒体标签、表单标签，日常开发高频使用的分为三类：1）语义化结构标签：解决旧版div无含义的问题，提升可读性和SEO优化效果，包括header、nav、main、section、article、aside、footer。2）媒体标签：无需插件即可播放音视频，包括video（视频）、audio（音频）、canvas（画布绘图）。3）表单新增标签与属性：提升表单交互效率，包括input的email、number、tel、date类型，以及required、placeholder、autofocus、readonly等属性。项目实战场景：日常页面布局全部使用语义化标签替代纯div布局，表单页面使用新增input类型做基础校验，canvas用于简单的海报生成、数据可视化小图表。2、什么是语义化标签？为什么要使用？参考答案：语义化标签就是标签自带明确的业务含义，不是单纯用来承载样式的空标签。比如header代表页头、nav代表导航、footer代表页脚，一眼就能看懂模块作用。使用优势：1）代码可读性高：团队协作时，新人能快速看懂页面结构，不用逐行注释理解模块用途；2）利于SEO：搜索引擎爬虫可以精准识别页面模块，区分导航、正文、侧边栏、页脚，提升网页收录和排名；3）适配无障碍访问：屏幕阅读器可以识别语义标签，帮助视力障碍用户正常浏览网页；4）结构清晰：样式失效时，页面结构依然规整，不会完全错乱。3、行内元素、块级元素、行内块元素的区别？参考答案：1）块级元素（div、p、h1-h6、ul、li）独占一行，默认宽度100%父级宽度，支持宽高、内外边距、上下左右margin，可嵌套行内、行内块、其他块级元素。2）行内元素（span、a、em、i、strong）不独占一行，同行排列，宽度由内容撑开，不支持宽高、上下margin，仅支持左右margin和全部padding，只能嵌套行内元素。3）行内块元素（img、input、button）结合两者优点，同行排列，同时支持宽高、内外边距，日常开发常通过display:inline-block手动设置元素为该类型。二、CSS核心面试题1、CSS选择器优先级排序？权重计算规则参考答案：优先级从高到低：!important>行内样式>ID选择器>类/伪类/属性选择器>标签选择器>通配符选择器>继承样式权重计算规则（不进位）：1）!important：权重无穷大，强制覆盖所有样式，项目中尽量少用，难以维护；2）行内样式：1000；3）ID选择器：100；4）类、伪类、属性选择器：10；5）标签、伪元素选择器：1；6）通配符、继承样式：0。权重数值相加比较大小，高位优先，永不进位，11个类选择器（110）权重也小于1个ID选择器（100）。2、盒子模型有几种？区别是什么？参考答案：CSS盒子模型分为标准盒模型（W3C）和怪异盒模型（IE），由box-sizing属性控制。1）标准盒模型：box-sizing:content-box（默认）元素设置的width/height仅为内容区大小，实际元素宽高=width/height+padding+border+margin。设置内边距和边框会撑大盒子，容易导致布局错乱。2）怪异盒模型：box-sizing:border-box元素设置的width/height是整体可视宽高，包含内容区、padding、border，实际宽高等于设置的宽高，padding和border只会挤压内容区，不会撑大盒子。项目习惯：全局统一设置box-sizing:border-box，规避布局错位问题，是前端通用规范。3、Flex布局常用属性？怎么实现水平垂直居中？参考答案：Flex是弹性布局，分为父容器属性和子元素属性，是目前移动端、自适应布局的主流方案。父容器常用属性：display:flex：开启弹性布局；flex-direction：主轴方向（row横向、column纵向）；justify-content：主轴对齐（center居中、space-between两端对齐）；align-items：交叉轴对齐（center居中）；flex-wrap：是否自动换行。子元素常用属性：flex、flex-grow、flex-shrink、align-self。Flex最简水平垂直居中方案：PlainText

.box{

display:flex;

justify-content:center;/*主轴居中*/

align-items:center;/*交叉轴居中*/

}该方法兼容性好、代码简洁，支持不定宽高元素居中，项目中优先使用。4、CSS定位方式及区别参考答案：position五种定位方式：static、relative、absolute、fixed、sticky。1）static（默认）：正常文档流定位，top/left等定位属性无效；2）relative（相对定位）：相对于自身默认位置偏移，不脱离文档流，原有位置保留，不影响其他元素布局；3）absolute（绝对定位）：脱离文档流，相对于最近的已定位父级偏移，若无已定位父级，相对于根元素html；4）fixed（固定定位）：脱离文档流，相对于浏览器视口固定，页面滚动位置不变，常用于悬浮按钮、顶部导航；5）sticky（粘性定位）：relative+fixed结合，滚动到阈值前相对定位，超过阈值后固定定位，常用于列表吸顶。三、JavaScript基础高频题1、var、let、const的区别？参考答案：1）变量提升：var存在变量提升，声明前访问会返回undefined；let、const无变量提升，存在暂时性死区，声明前访问直接报错。2）作用域：var仅支持全局、函数作用域，不支持块级作用域；let、const支持块级作用域（{}包裹的区域）。3）重复声明：var允许重复声明变量；let、const禁止重复声明，同一作用域内报错。4）赋值规则：var、let是变量，可重复修改值；const是常量，声明时必须赋值，且不能直接修改基础类型值，引用类型（对象、数组）可修改内部属性。项目规范：彻底弃用var，普通变量用let，固定不变的值用const。2、什么是闭包？闭包的用途和弊端参考答案：闭包定义：一个内层函数访问并使用了外层函数的变量，且外层函数执行结束后，内层函数依然可以持有外层变量，这种组合就是闭包。简单说：函数嵌套，内层引用外层变量，外层执行完毕变量不销毁。常用用途：1）保存私有变量：实现变量私有化，避免全局变量污染；2）缓存数据：变量常驻内存，可做简单数据缓存；3）实现防抖、节流、定时器回调等常用功能。弊端：闭包会让变量长期常驻内存，无法被垃圾回收机制回收，容易造成内存泄漏。解决方案：使用完毕后手动置空变量，解除引用。3、原型和原型链的理解参考答案：1）原型：每个函数都有prototype（显式原型），是一个公共对象，存放所有实例共享的方法和属性，避免重复创建方法，节省内存；每个实例对象都有__proto__（隐式原型），指向构造函数的prototype。2）原型链：当访问一个对象的属性/方法时，自身没有就会顺着__proto__向上查找，直到找到Ototype，最终指向null，这条查找链路就是原型链。核心作用：实现属性和方法的继承，所有JS对象都继承自Object，拥有toString、hasOwnProperty等通用方法。4、JS垃圾回收机制参考答案：JS是自动垃圾回收语言，无需手动管理内存，核心原理是标记清除法。1）浏览器会定期扫描所有变量，标记正在使用的变量；2）扫描结束后，清除所有未被标记、无引用的变量，释放内存；3）常见内存泄漏场景：全局变量过多、闭包未释放、定时器未清除、事件监听未移除。日常开发中，定时器、监听事件在组件销毁/页面卸载时必须手动清除，避免内存堆积。四、JS进阶面试题1、异步和同步的区别？JS为什么是单线程？参考答案：1）同步：代码从上到下依次执行，上一行代码执行完毕，才会执行下一行，阻塞后续代码；2）异步：耗时操作（定时器、接口请求、文件读取）放入异步队列，不阻塞主线程，主线程继续执行同步代码，等待同步代码执行完毕后，再执行异步任务。JS单线程原因：JS最初是为浏览器交互设计的，主要操作DOM。如果是多线程，多个线程同时操作同一个DOM节点（同时修改、删除），会出现冲突，无法统一页面结果。所以采用单线程机制，保证DOM操作的唯一性、有序性。2、宏任务和微任务的区别？事件循环执行顺序参考答案：宏任务：耗时较长的任务，包括script整体代码、setTimeout、setInterval、AJAX请求、DOM渲染。微任务：优先级更高、耗时更短的任务，包括Promise.then/catch/finally、async/await、queueMicrotask。事件循环完整执行顺序：1）先执行所有同步代码；2）清空所有微任务队列（微任务优先级高于宏任务）；3）执行一次宏任务；4）重复上述流程，循环往复。3、Promise的理解？三种状态及特点参考答案：Promise是解决JS异步回调地狱的方案，用于统一管理异步操作，让异步代码更规整、可维护。三种状态（不可逆）：1）pending等待态：初始状态，异步操作未完成；2）fulfilled成功态：异步执行成功，调用resolve，状态固定；3）rejected失败态：异步执行失败，调用reject，状态固定。核心特点：状态一旦从pending变为成功/失败，就永久固定，无法再次修改。常用方法：then（成功回调）、catch（异常捕获）、finally（无论成败都会执行）、all（所有请求成功才返回）、race（谁先执行完返回谁）。五、浏览器与网络面试题1、页面从输入网址到渲染完成的全过程参考答案：1）DNS解析：将域名解析为服务器IP地址；2）TCP三次握手：建立客户端与服务器的安全连接；3）发送HTTP/HTTPS请求：客户端向服务器请求页面资源；4）服务器响应：服务器返回HTML、CSS、JS、图片等资源；5）解析HTML：生成DOM树；6）解析CSS：生成CSSOM样式树；7）生成渲染树：结合DOM树和CSSOM树，只包含可见元素；8）布局（回流）：计算每个元素的位置、大小；9）绘制（重绘）：根据布局结果渲染页面像素；10）TCP四次挥手：关闭连接。2、回流和重绘的区别？如何优化？参考答案：1）重绘：元素样式改变、宽高位置不变，仅重新绘制视觉效果（如颜色、透明度），开销较小；2）回流（重布局）：元素宽高、位置、布局改变，需要重新计算整个页面布局，触发连带元素重新渲染，开销极大；关系：一定会重绘，重绘不一定回流。优化方案：1）批量修改样式，不要频繁单次修改；2）使用class统一替换样式，不直接操作style；3）频繁动画使用transform、opacity，仅触发重绘，不触发回流；4）离线修改DOM，修改完成后再插入页面。3、HTTP和HTTPS的区别参考答案：1）安全性：HTTP明文传输，无加密，数据容易被窃取、篡改；HTTPS通过SSL/TLS加密传输，数据安全可靠；2）端口不同：HTTP默认80端口，HTTPS默认443端口；3）证书要求：HTTPS需要CA机构颁发的安全证书，HTTP无需证书；4）性能：HTTPS需要加密、解密、证书校验，速度比HTTP稍慢；5）搜索引擎：HTTPS网站更受搜索引擎青睐，利于SEO收录。六、Vue2高频面试题（主流框架基础）1、Vue双向绑定原理参考答案：Vue2双向数据绑定核心：数据劫持+发布订阅模式，通过Object.defineProperty()劫持对象的getter/setter。1）初始化数据时，遍历data中的所有属性，通过defineProperty为每个属性添加getter、setter；2）页面读取数据时，触发getter，收集当前组件的依赖（Watcher）；3）数据修改时，触发setter，通知订阅器Dep，Dep通知所有Watcher更新视图；4）最终实现：数据变视图自动更新，视图输入修改自动同步数据（v-model）。缺陷：无法监听对象新增/删除属性、数组下标修改、数组长度修改，需要用Vue.set或this.$set解决。2、Vue生命周期及常用钩子参考答案：生命周期是组件从创建、挂载、更新、销毁的完整过程，常用核心钩子：1）created：组件创建完成，数据已初始化，无法操作DOM，常用于接口请求、初始化数据；2）mounted：组件DOM挂载完成，页面节点已渲染，可操作DOM、初始化定时器、监听事件；3）updated：数据更新后，DOM重新渲染完成触发；4）before