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

Web前端高频面试题及详细答案（实战口语版）一、HTML基础面试题1、HTML5新增了哪些常用标签？语义化标签的好处是什么？参考答案：常用新增语义化标签分为结构类和功能类：结构类：header、nav、main、section、article、aside、footer；功能类：video、audio、canvas、input新增type（date、tel、email）等。语义化标签的好处主要有三点：第一，代码结构清晰，可读性强，团队协作时其他人能快速看懂页面模块分工，不用靠注释区分区域；第二，利于搜索引擎优化，爬虫可以精准识别页面头部、导航、正文、侧边栏等核心内容，提升页面收录和权重；第三，适配无障碍访问，屏幕阅读器可以精准解析页面结构，方便特殊用户使用。2、行内元素、块级元素、行内块元素的区别？参考答案：块级元素：独占一行，默认宽度100%父级宽度，可以设置宽、高、内外边距。常见的有div、p、h1-h6、ul、li、section。行内元素：同行显示，不独占一行，宽高由内容撑开，无法设置宽高，上下内外边距无效，只有左右边距生效。常见的有span、a、em、i。行内块元素：结合两者优点，同行显示，同时可以设置宽高、内外边距。常见的有img、input、button。3、href和src的区别？参考答案：核心区别是加载逻辑和用途不同：src是资源引入，用来加载外部资源，会阻塞当前页面渲染，加载完成后替换当前标签内容。常用于img、script、iframe，是页面必需的资源加载。href是资源链接，用来建立和外部资源的关联，不会阻塞页面渲染，只是声明关联关系。常用于a超链接、link引入css。二、CSS核心面试题1、CSS选择器优先级顺序？权重怎么计算？参考答案：优先级从高到低：!important>行内样式>ID选择器>类/伪类/属性选择器>标签选择器>通配符>继承样式。权重计算规则（不进位）：1、!important：权重无穷大；2、行内样式：1000；3、ID选择器：100；4、类、伪类、属性选择器：10；5、标签、伪元素选择器：1；6、通配符、继承：0。多个选择器组合时权重相加，数值大的优先级更高，同级权重后面样式覆盖前面样式。2、盒模型有几种？区别是什么？如何切换？参考答案：盒模型分为标准盒模型和怪异盒模型（IE盒模型）。标准盒模型（content-box）：元素实际宽度=width+padding+border+margin，width仅代表内容区宽度；怪异盒模型（border-box）：元素实际宽度=width+margin，width包含内容、内边距、边框，日常开发基本都用这个模型，适配布局更方便。切换方式：通过box-sizing属性设置，box-sizing:content-box（标准）、box-sizing:border-box（怪异）。3、Flex布局常用属性及居中方案参考答案：Flex是弹性布局，分为容器属性和子项属性，是现在最常用的布局方式。容器常用属性：display:flex：开启弹性布局；flex-direction：设置主轴方向（row横向、column纵向）；justify-content：主轴对齐方式（center居中、space-between两端对齐等）；align-items：侧轴对齐方式；flex-wrap：是否自动换行。子项常用属性：flex、flex-grow、flex-shrink、align-self。万能居中方案：父容器设置display:flex;justify-content:center;align-items:center;即可实现子元素水平垂直居中，适配所有常规场景。4、CSS浮动的原理、问题及清除浮动方法参考答案：浮动原理：让元素脱离标准文档流，向左或向右停靠，实现同行排列效果，早期用来做页面布局。浮动带来的问题：父元素高度塌陷、浮动元素覆盖普通文档流元素、页面布局错乱。常用清除浮动方法：1、伪类清除（最常用）：给父元素添加clearfix伪类，兼容性好、无副作用；2、额外标签法：在浮动元素末尾加空div，设置clear:both，简单但会增加冗余标签；3、父元素设置overflow:hidden，简单便捷，但会隐藏溢出元素，有局限性。三、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、JS数据类型有哪些？如何判断数据类型？参考答案：分为基本数据类型和引用数据类型。基本类型（7种）：String、Number、Boolean、Undefined、Null、Symbol、BigInt；引用类型：Object、Array、Function、Date、RegExp等。判断方式：1、typeof：适合判断基本类型，无法区分null、数组、对象，都会返回object；2、instanceof：专门判断引用类型，检测构造函数的prototype是否出现在实例原型链上；3、Ototype.toString.call()：最精准的判断方式，可以精准区分所有数据类型。3、闭包是什么？优缺点及使用场景参考答案：闭包就是内层函数访问外层函数的变量，且外层函数执行结束后，内层函数依然可以保留外层变量的作用域，不会被销毁。简单说：函数嵌套，内层引用外层变量，就是闭包。优点：可以保留私有变量、延长变量生命周期、避免全局变量污染；缺点：变量常驻内存，容易造成内存堆积，使用不当会导致内存占用过高；常用场景：防抖节流函数、模块化封装、定时器回调、私有方法封装。4、原型和原型链的理解参考答案：每个函数都有prototype（显式原型），每个实例对象都有__proto__（隐式原型），实例的__proto__指向构造函数的prototype。原型链就是对象查找属性和方法的机制：当访问对象的属性或方法时，先在自身查找，找不到就顺着__proto__向上查找，直到找到Ototype，终点是null，这条查找链路就是原型链。作用：实现属性和方法的共享、继承，减少内存占用，所有实例可以共用原型上的方法，不用每个实例都单独创建。5、异步JS理解？宏任务和微任务的区别与执行顺序参考答案：JS是单线程语言，异步是为了解决同步代码阻塞问题，耗时任务交给浏览器后台执行，完成后再放入任务队列，不阻塞主线程代码执行。任务分为宏任务和微任务：宏任务：整体script代码、setTimeout、setInterval、AJAX请求、DOM事件；微任务：Promise.then/catch/finally、async/await、queueMicrotask。执行顺序：主线程同步代码执行完毕→清空所有微任务→执行一轮宏任务→再次清空微任务，循环往复（事件循环机制）。四、Vue框架核心面试题（Vue2/Vue3通用高频）1、Vue双向绑定原理？Vue2和Vue3区别参考答案：双向绑定核心是数据劫持+视图更新：数据变化更新视图，视图变化更新数据。Vue2原理：通过Object.defineProperty劫持对象的getter、setter，监听数据变化，缺点是无法监听新增、删除属性，也无法监听数组下标修改。Vue3原理：通过Proxy代理整个对象，可以监听对象新增、删除属性、数组所有变化，监听范围更广，性能更好。2、Vue生命周期及常用钩子函数参考答案：生命周期是组件从创建、挂载、更新到销毁的完整过程，每个阶段对应钩子函数，方便我们在对应阶段执行自定义逻辑。常用核心钩子：created：组件创建完成，可获取数据，无法操作DOM，一般用来请求接口数据；mounted：组件DOM挂载完成，可操作DOM、初始化定时器、监听事件；updated：数据更新后DOM更新完成，可操作最新DOM；unmounted：组件销毁，清空定时器、解绑事件，防止内存占用。3、computed和watch的区别和使用场景参考答案：1、缓存机制：computed有缓存，依赖值不变时多次调用不会重复计算；watch无缓存，数据变化就执行；2、适用场景：computed适合简单数据计算、多数据联动、派生数据；watch适合复杂异步操作、数据变化后的自定义逻辑（如接口请求、定时器）；3、返回值：computed必须有返回值；watch不需要返回值。4、Vue组件通信方式有哪些？参考答案：1、父子通信：父传子props，子传父$emit；2、跨级通信：provide/inject，适合多层嵌套组件传值；3、兄弟/任意组件通信：全局事件总线、Vuex/Pinia状态管理；4、简单跨组件：$parent/$children、$refs。五、网络与浏览器面试题1、HTTP和HTTPS区别？参考答案：1、安全性：HTTP明文传输，无加密，数据容易被窃取、篡改；HTTPS基于SSL/TLS加密传输，数据安全可靠；2、端口不同：HTTP默认80端口，HTTPS默认443端口；3、证书要求：HTTPS需要CA证书认证，HTTP不需要；4、速度性能：HTTP传输更快，HTTPS多了加密、握手流程，速度稍慢；现在线上项目基本都强制使用HTTPS。2、GET和POST请求区别参考答案：1、参数位置：GET参数拼接在URL上，POST参数放在请求体中；2、安全性：GET参数暴露在地址栏，安全性低；POST参数隐藏，相对安全；3、缓存：GET会被浏览器缓存，POST默认不缓存；4、数据限制：GET有URL长度限制，传参数据量小；POST无长度限制，可传大量数据、文件；5、语义：GET用于获取数据，POST用于提交、修改数据。3、浏览器缓存机制？强缓存和协商缓存参考答案：浏览器缓存是为了减少重复请求、提升页面加载速度，分为强缓存和协商缓存。强缓存：优先级最高，命中后直接读取本地缓存，不发送请求到服务器。通过Cache-Control、Expires控制；协商缓存：强缓存失效后触发，发送请求携带缓存标识，服务器对比标识，资源未更新则返回304，使用本地缓存；资源更新则返回新资源。通过Last-Modified/If-Modified-Since、ETag/If-None-Match控制。六、性能优化实战面试题1、日常前端性能优化手段有哪些？参考答案：我日常开发中主要从加载、渲染、代码、网络四个维度做优化：1、加载优化：静态资源压缩、图片懒加载、路由懒加载、打包压缩去除冗余代码、使用CDN加载静态资源；2、渲染优化：减少DOM操作、避免频繁重排重绘、使用Flex/Grid布局、开启硬件加速；3、代码优化：使用防抖节流减少高频触发事件、合理使用缓存、避免全局变量泛滥、及时清空定时器和监听；4、网络优化：接口请求合并、避免重复请求、启用浏览器缓存、HTTPS缓存策略优