Web前台面试题及详细答案（实战版）

Web前台面试题及详细答案（实战版）本次面试题贴合企业真实招聘场景，适配初级、中级前端岗位，内容无书面化套话，答案均为项目实操总结，涵盖HTML、CSS、JavaScript、工程化、性能优化、实战场景核心考点。一、HTML核心面试题1、HTML5新增了哪些常用语义化标签？实际项目中怎么用？参考答案：常用语义化标签：header、nav、main、section、article、aside、footer。实际使用规范：header：页面头部、模块头部，存放logo、导航标题nav：专属导航区域，页面主导航、侧边导航main：页面主体内容，一个页面仅出现一次section：内容分区块，用于主题相近的内容分组article：独立完整的内容模块，比如文章、商品卡片、资讯条目aside：侧边栏、附属内容，比如推荐列表、广告、备注footer：页面底部、模块底部，存放版权、备案、联系方式语义化的核心作用：提升代码可读性、方便团队协作、利于搜索引擎收录、适配屏幕阅读器（无障碍访问）。2、行内元素、块级元素、行内块元素的区别？参考答案：块级元素：独占一行，可设置宽高、内外边距，默认宽度100%父级宽度。常见：div、p、h1-h6、ul、li、section。行内元素：同行显示，无法设置宽高、上下内外边距，仅自适应内容宽度。常见：span、a、em、i、label。行内块元素：兼具两者特性，同行显示，同时可以设置宽高、内外边距。常见：img、input、button。实操常用：display:block/inline/inline-block相互转换，解决布局对齐、间距问题。3、iframe的优缺点？项目中什么时候用？参考答案：优点：可以嵌套独立页面、复用第三方页面模块、隔离页面样式和脚本互不干扰。缺点：加载慢、阻塞主页面渲染、占用大量资源、不利于SEO、嵌套层级过多会出现兼容性和布局错乱问题。适用场景：嵌入第三方地图、支付页面、后台系统内嵌独立功能页、预览文档。日常业务页面开发尽量少用。二、CSS核心面试题1、CSS选择器优先级排序？权重计算规则参考答案：优先级从高到低：!important>行内样式>ID选择器>类/伪类/属性选择器>标签选择器>通配符选择器>继承样式权重计算规则（不进位）：行内样式：1000ID选择器：0100类、伪类、属性选择器：0010标签、伪元素选择器：0001实操原则：尽量不用!important，会打乱层级权重，后期难以维护；统一用class管理样式。2、盒模型有几种？区别是什么？box-sizing作用参考答案：两种盒模型：标准盒模型、怪异盒模型。标准盒模型（content-box）：元素实际宽度=width+padding+border+margin，width仅代表内容区宽度。怪异盒模型（border-box）：元素实际宽度=width+margin，width包含内容、padding、border。项目通用配置：全局设置box-sizing:border-box，避免padding、border撑大盒子，减少布局错乱问题。3、Flex常用属性及居中方案参考答案：父容器常用属性：display:flex：开启弹性布局flex-direction：主轴方向（row/column）justify-content：主轴对齐（center居中、space-between两端对齐）align-items：侧轴对齐（center垂直居中）flex-wrap:wrap：自动换行子元素常用属性：flex、flex-grow、flex-shrink、align-self。Flex万能居中代码：父元素设置display:flex;justify-content:center;align-items:center;即可实现水平垂直居中，适配所有子元素，是项目最常用居中方案。4、BFC是什么？触发条件及作用参考答案：BFC即块级格式化上下文，是页面独立的渲染区域，内部元素不会影响外部布局，外部也不会影响内部。常见触发条件：元素设置overflow:hidden/auto/scroll浮动元素（float非none）绝对定位元素（fixed/absolute）display:inline-block、flex、grid实际作用：解决浮动塌陷、margin上下重叠问题、实现自适应两栏/三栏布局。5、CSS浮动的问题及解决方案参考答案：浮动问题：子元素浮动后脱离文档流，父元素高度塌陷；相邻浮动元素会出现布局错位。清除浮动常用方案（项目常用）：伪类清除浮动（最优）：给父元素添加clear-fix类，通过::after清除浮动，无副作用、可复用父元素设置overflow:hidden：简单快捷，适合简单布局现在开发优先使用Flex/Grid布局，尽量少用浮动布局。三、JavaScript核心面试题1、var、let、const的区别参考答案：var：函数级作用域，存在变量提升，可重复声明，容易污染全局变量，项目中基本不用let：块级作用域，无变量提升、存在暂时性死区，不可重复声明，用于声明可修改的变量const：块级作用域，无变量提升，声明后不可修改（引用类型可改属性），用于声明常量、固定引用的对象/数组开发规范：默认用const，需要修改变量再用let，完全摒弃var。2、JS数据类型有哪些？如何判断数据类型参考答案：基本数据类型（7种）：String、Number、Boolean、Null、Undefined、Symbol、BigInt引用数据类型：Object（包含数组、对象、函数、正则等）判断方式：typeof：适合判断基本类型（除null），判断引用类型统一返回objectinstanceof：判断引用类型具体实例Ototype.toString.call()：精准判断所有数据类型，项目通用3、闭包是什么？优缺点及使用场景参考答案：闭包：内层函数访问外层函数的变量，且外层函数执行结束后，内层函数依然可以保留外层变量的引用，这种组合就是闭包。优点：可以私有化变量、保留变量状态、避免全局变量污染。缺点：变量常驻内存，容易造成内存占用过高，滥用会导致内存泄漏。使用场景：防抖节流函数、封装私有方法、定时器回调、循环事件绑定。4、原型和原型链的理解参考答案：每个函数都有prototype原型对象，每个实例对象都有__proto__指向构造函数的prototype。原型链：对象查找属性/方法时，先在自身查找，找不到就顺着__proto__向上查找，直到找到Ototype，终点为null，这条查找链路就是原型链。作用：实现方法和属性的复用，节省内存，是JS继承的核心原理。5、防抖和节流的区别？实际业务场景参考答案：防抖：触发事件后，延迟一段时间执行，若期间再次触发，重新计时，只执行最后一次。场景：输入框搜索、窗口resize、表单输入校验。节流：固定时间内只执行一次，无论触发多少次，保证频率稳定。场景：滚动加载、鼠标移动、按钮频繁点击、轮播图切换。6、异步JS的发展历程？宏任务和微任务区别参考答案：异步发展：回调函数→Promise→async/await（目前主流）。宏任务：整体代码、setTimeout、setInterval、AJAX、DOM事件，执行优先级低。微任务：Promise.then/catch/finally、async/await、queueMicrotask，执行优先级高。执行顺序：先执行同步代码→清空所有微任务→执行一轮宏任务，循环往复（事件循环）。四、Vue核心面试题（主流框架）1、Vue2和Vue3的核心区别参考答案：响应式原理：Vue2基于Object.defineProperty（无法监听新增/删除属性、数组下标修改）；Vue3基于Proxy+Reflect，支持全量监听代码写法：Vue2选项式API；Vue3组合式API，代码更集中，适合大型项目打包体积：Vue3移除冗余代码，支持tree-shaking，体积更小生命周期：Vue3部分生命周期更名，新增setup钩子性能：Vue3虚拟DOM重写，渲染速度更快，支持碎片、Teleport2、Vue响应式原理是什么？参考答案：核心是数据劫持+发布订阅模式。通过劫持数据的读取和修改操作，数据变化时触发更新，通知视图重新渲染。流程：数据初始化劫持→视图渲染收集依赖→数据修改触发订阅更新→视图更新。3、v-for和v-if为什么不建议一起用？怎么优化？参考答案：因为v-for优先级高于v-if，一起使用时会先循环渲染所有数据，再判断条件隐藏，造成无效循环，浪费性能。优化方案：外层通过computed过滤数据，提前筛选出符合条件的数据，再循环渲染通过模板嵌套，v-if放在外层标签，v-for放在内层4、Vue组件传值的方式有哪些？参考答案：父子传值：父传子（props）、子传父（$emit）兄弟传值：事件总线（mitt）、pinia/vuex跨层级传值：provide/inject全局传值：pinia、vuex、全局属性五、前端工程化与性能优化1、Webpack的核心作用？常用配置参考答案：核心作用：模块化打包、代码编译、资源压缩、项目构建，将浏览器不识别的语法（ES6+、Vue、Less）编译为可运行代码。核心配置：入口entry、出口output、loader（处理各类文件）、plugin（插件扩展）、mode（开发/生产环境）。2、前端页面性能优化方案（面试高频）参考答案：加载优化静态资源压缩、图片懒加载、视频懒加载开启Gzip压缩、CDN加速静态资源路由懒加载、组件按需引入、第三方库按需导入渲染优化减少DOM操作，批量更新DOM避免频繁重排重绘，统一修改样式使用Flex/Grid布局，替代浮动布局代码优化清除无用代码、冗余依赖使用防抖节流优化高频事件合理使用缓存（本地缓存、接口缓存）3、跨域问题产生原因及解决方案参考答案：产生原因：浏览器同源策略限制，协议、域名、端口任意一个不同，即为跨域。常用解决方案（项目实战）：开发环境：配置本地代理（vue.config.js/vite.config）生产环境：后端配置CORS跨域允许简单场景：JSONP（仅支持get请求，现在很少用）六、实战场景面试题1、页面刷新后Vuex数据丢失怎么解决？参考答案：原因：Vuex数据存在内存中，页面刷新会重置内存数据，导致丢失。解决方案：将核心数据持久化，搭配localStorage/sessionStorage使用，页面刷新后从本地缓存读取数据赋值给仓库。项目常用vuex-persistedstate插件快速实现持久化。2、接口请求报错401、403、404、500分别代表什么？如何处理？参考答案：404：接口