Web前端经典面试题及答案（真实面试版）

Web前端经典面试题及答案（真实面试版）说明：本题库贴合企业真实面试场景，剔除书面化套话，答案简洁实用、适配面试口述/笔试答题，覆盖前端基础、HTML、CSS、JavaScript、网络、工程化、实战场景核心考点，适合初中级前端求职使用。一、HTML核心面试题1.说说HTML5新增的常用语义化标签，以及语义化的好处参考答案：常用语义化标签：header、nav、main、section、article、aside、footer、figure、figcaption。语义化好处：1.结构清晰，代码可读性强，团队协作维护更方便；2.利于搜索引擎抓取页面结构，提升SEO效果；3.适配屏幕阅读器，提升网站无障碍访问性；4.标签各司其职，替代了大量无意义的div，代码更简洁。2.行内元素、块级元素、行内块元素的区别参考答案：1.块级元素：独占一行，宽高、内外边距都可设置，默认宽度100%父级宽度。常见：div、p、h1-h6、ul、li。2.行内元素：不独占一行，同行排列，无法设置宽高、上下边距，只能设置左右内外边距。常见：span、a、em、i。3.行内块元素：兼具两者特点，同行排列，同时可以设置宽高、内外边距。常见：img、input、button。3.什么是DOCTYPE？作用是什么？参考答案：DOCTYPE是文档类型声明，放在HTML文档最顶部，用来告诉浏览器当前页面的文档版本和规范。核心作用：避免浏览器进入怪异模式，让浏览器按照标准模式解析渲染页面，保证页面样式、布局在各浏览器统一，避免出现兼容错乱。二、CSS核心面试题1.CSS选择器优先级顺序是什么？参考答案：优先级从高到低：!important>行内样式>ID选择器>类、伪类、属性选择器>标签选择器>通配符选择器>继承样式。补充：优先级不可叠加，只会比较最高级权重；!important优先级最高，开发中尽量少用，会打乱样式层级，难以维护。2.说说浮动的原理、作用以及清除浮动的方法参考答案：浮动原理：让元素脱离普通文档流，向左/向右浮动排列，原本用于实现文字环绕图片，现在多用于传统布局排版。浮动问题：子元素浮动后脱离文档流，父元素高度塌陷，导致后续布局错乱。常用清除浮动方法：1.给父元素设置overflow:hidden，简单高效，适合大部分场景；2.伪元素清除浮动（最常用、推荐）：给父类添加clearfix类，通过:after伪元素设置clear:both；3.新增空标签，设置clear:both，缺点是增加冗余DOM结构。3.弹性布局Flex常用属性及适配场景参考答案：Flex是现代主流布局方案，兼容性良好，适合一维布局，解决了浮动布局的高度塌陷、对齐麻烦等问题。父容器常用属性：display:flex：开启弹性布局；flex-direction：设置主轴方向；justify-content：主轴对齐方式；align-items：侧轴对齐方式；flex-wrap：是否自动换行。子元素常用属性：flex-grow：放大比例；flex-shrink：缩小比例；flex-basis：基础宽度；align-self：单独设置自身对齐方式。适用场景：居中布局、等分布局、自适应列表、导航栏布局等。4.水平垂直居中的常用方法参考答案：1.Flex居中（最常用）：父元素设置display:flex;justify-content:center;align-items:center;适配所有场景，简单简洁。2.定位居中：父级相对定位，子级绝对定位，top/left设为50%，transform:translate(-50%,-50%)，适配未知宽高元素。3.固定宽高居中：子级设置margin:0auto水平居中，通过定位margin负值实现垂直居中，仅适配固定宽高场景。5.什么是BFC？触发条件和作用参考答案：BFC即块级格式化上下文，是浏览器的独立渲染区域，内部元素布局不会影响外部元素。触发条件：1.根元素html；2.浮动元素；3.overflow不为visible；4.绝对定位、固定定位元素；5.display为inline-block、flex等。主要作用：清除浮动、解决上下margin重叠问题、实现自适应两栏/三栏布局。三、JavaScript核心面试题1.var、let、const的区别参考答案：1.作用域：var是函数作用域，let、const是块级作用域（{}内部生效）；2.变量提升：var存在变量提升，声明前可访问，值为undefined；let、const存在暂时性死区，声明前无法访问；3.重复声明：var允许重复声明；let、const不允许重复声明；4.赋值规则：let可修改值；const声明常量，基础类型不可修改，引用类型可修改内部属性，不可重新赋值。开发规范：优先使用const，需要修改变量用let，禁止使用var。2.说说JS的数据类型参考答案：一共8种数据类型，分为基础类型和引用类型：基础类型（7种）：String、Number、Boolean、Null、Undefined、Symbol、BigInt；引用类型（1种）：Object，包含普通对象、数组、函数、正则等。区别：基础类型存储在栈内存，赋值是值拷贝；引用类型存储在堆内存，栈内存储地址，赋值是地址拷贝。3.闭包是什么？优缺点及使用场景参考答案：闭包就是内层函数访问外层函数的变量，且外层函数执行结束后，内层函数依然可以保留外层变量的作用域，形成闭包。优点：实现变量私有化、延长变量生命周期、缓存数据。缺点：变量常驻内存，容易造成内存堆积，使用不当会导致内存泄漏。常用场景：防抖节流、封装私有方法、定时器回调、模块化开发。4.原型和原型链的理解参考答案：每个函数都有prototype原型对象，每个实例对象都有__proto__属性，指向构造函数的prototype。原型链：当访问对象的属性或方法时，自身没有就会顺着__proto__向上查找，直到找到Ototype，最终指向null，这条查找链路就是原型链。作用：实现属性和方法的共享、继承，减少全局变量污染，节省内存。5.异步JS的发展历程，宏任务和微任务的区别参考答案：异步发展：回调函数=>Promise=>async/await，解决了回调地狱、代码可读性差的问题。宏任务：整体代码、setTimeout、setInterval、AJAX请求、DOM事件，执行优先级低。微任务：Promise.then/catch/finally、async/await、queueMicrotask，执行优先级高。执行顺序：先执行同步代码=>清空所有微任务=>执行一轮宏任务，循环往复（事件循环机制）。6.防抖和节流的区别及使用场景参考答案：防抖：触发事件后，延迟一段时间执行，如果期间再次触发，重新计时，只执行最后一次。场景：搜索框输入联想、窗口resize、表单输入验证。节流：固定时间内只执行一次，不管触发多少次，按频率执行。场景：滚动加载、鼠标移动、按钮频繁点击、页面拖拽。四、浏览器与网络面试题1.从输入网址到页面渲染完成的全过程参考答案：1.DNS解析：将域名解析为服务器IP地址；2.TCP三次握手，建立客户端与服务器的连接；3.发送HTTP请求，服务器接收并处理请求，返回响应数据；4.浏览器接收HTML、CSS、JS资源，解析HTML生成DOM树，解析CSS生成CSSOM树；5.DOM树和CSSOM树合并生成渲染树；6.布局（回流）：计算元素位置和大小；7.绘制（重绘）：将页面像素绘制到屏幕；8.执行JS代码，完成页面交互绑定，最终页面展示完成。2.重绘和回流的区别，如何优化参考答案：回流（重排）：元素的布局、宽高、位置发生变化，浏览器重新计算页面布局，开销极大。重绘：元素样式、颜色、透明度变化，不改变布局，只重新绘制页面，开销较小。优化方式：1.避免频繁操作DOM，批量修改样式；2.使用transform、opacity做动画，不触发回流；3.离线操作DOM，使用文档碎片；4.避免频繁读取DOM属性，减少浏览器强制同步布局。3.HTTP1.1、HTTP2、HTTP3的区别参考答案：HTTP1.1：默认长连接，支持缓存，但单域名同一时间只能6个请求并行，存在队头阻塞，文本传输无压缩。HTTP2：支持多路复用，一个连接可并行多个请求，解决队头阻塞；支持头部压缩、二进制传输、服务器推送，加载速度更快。HTTP3：基于UDP协议，摒弃TCP，握手速度更快，彻底解决队头阻塞，弱网环境下表现更好，稳定性更高。4.跨域问题产生原因及常用解决方案参考答案：跨域原因：浏览器同源策略限制，协议、域名、端口任意一个不同，即为跨域，禁止页面跨域请求资源，保障安全。常用解决方案：1.CORS跨域资源共享（主流）：后端配置响应头，允许前端域名访问；2.本地代理转发：vue/react项目配置proxy代理，前端请求本地服务，由本地服务转发请求；3.JSONP：仅支持get请求，兼容性好，现在使用较少；4.Nginx反向代理：线上部署通过Nginx配置转发，解决跨域。五、前端工程化与框架面试题（Vue为主）1.Vue2和Vue3的核心区别参考答案：1.响应式原理：Vue2基于Object.defineProperty，无法监听新增、删除属性和数组下标变化；Vue3基于Proxy，完美解决上述问题，监听更全面；2.编程方式：Vue2选项式API，代码分散；Vue3组合式API，逻辑聚合，适合大型项目；3.性能：Vue3体积更小、渲染更快，优化了虚拟DOM和diff算法，支持碎片、异步组件；4.类型支持：Vue3原生支持TS，类型校验更完善；Vue2对TS支持较弱；5.生命周期：Vue3移除部分废弃钩子，新增setup入口函数。2.Vue双向绑定原理参考答案：Vue双向绑定核心是：数据劫持+发布订阅模式。通过劫持data中数据的getter和setter，数据发生变化时，触发更新通知，订阅视图更新；视图输入内容变化时，同步更新数据，实现数据和视图双向同步。Vue3则通过Proxy代理整个对象，拦截数据读写、删除、新增等所有操作，实现响应式。3.Vue虚拟DOM和diff算法原理参考答案：虚拟DOM是真实DOM的JS对象描述，用来模拟DOM结构，避免频繁操作真实DOM，提升性能。diff算法是新旧虚拟DOM的对比更新算法，核心是同层比较、不跨层级比对，通过key标识唯一节点，快速判断节点新增、删除、更新，最小化更新真实DOM，减少页面回流重绘。4.说说Vue组件通信方式参考答案：1.父子通信：父传子props，子传父$emit；2.跨层级通信：provide/inject、$attrs/$listeners；3.兄弟/任意组件通信：全局事件总线、Vuex/Pinia状态管理；4.简单场景：$parent/$children、ref获取组件实例。六、实战场景面试题1.页面加载速度慢，你会从哪些方面优化？参考答案：1.资源优化：图片压缩、使用webp格式、懒加载图片和路由；JS/CSS压缩、合并、开启Gzip压缩；2.代码优化：减少冗余代码、避免频繁DOM操作、优化渲染性能；3.工程化优化：路由懒加载、组件按需引入、移除无用依赖、开启打包优化；4.网络优