Web前端高频面试题及真实口语化答案（零基础-中级适用）

Web前端高频面试题及真实口语化答案（零基础-中级适用）一、HTML基础面试题1、HTML5新增了哪些常用标签？答：日常开发用得最多的结构标签有header、nav、main、section、aside、footer，替代了以前全用div的布局方式，语义性更强。另外还有媒体标签video、audio，画布canvas，存储标签localStorage、sessionStorage，还有表单新增的input类型，比如date、tel、email、number这些，提升了表单开发效率。2、div和span的区别？答：div是块级元素，独占一行，默认宽高可以设置，一般用来做页面布局、分块。span是行内元素，不独占行，宽高设置无效，只能用来包裹文字、行内样式修改，适合局部文本修饰。3、语义化标签的好处是什么？答：第一，代码结构清晰，自己和同事维护起来方便，一眼能看出哪部分是头部、导航、主体、底部；第二，对搜索引擎友好，SEO效果更好；第三，适配读屏器，对残障用户更友好，满足页面可访问性要求。二、CSS核心面试题1、CSS选择器优先级顺序？答：简单记：!important>行内样式>ID选择器>类/伪类/属性选择器>标签选择器>通配符>继承样式。平时开发尽量少用!important，会打乱样式权重，后期很难覆盖和维护。2、盒模型是什么？标准盒模型和怪异盒模型的区别？答：盒模型就是页面所有元素的布局基础，由内容区content、内边距padding、边框border、外边距margin四部分组成。标准盒模型（box-sizing:content-box）：元素设置的宽高只作用于content，padding和border会额外撑大元素整体尺寸。怪异盒模型（box-sizing:border-box）：设置的宽高是元素整体尺寸，padding、border会向内压缩内容区，不会撑大盒子，我们实际开发基本都用这个。3、如何实现垂直水平居中？常用三种方法答：日常最常用、兼容性最好的三种方式：1、flex居中（最常用）：给父元素设置display:flex;justify-content:center;align-items:center;简单高效，适配所有现代浏览器。2、绝对定位居中：父级相对定位，子级绝对定位，top、left设为50%，再transform:translate(-50%,-50%);适合需要定位的场景。3、margin居中：水平居中直接margin:0auto；垂直居中需要结合父级高度适配，单独用局限性比较大。4、BFC是什么？有什么作用？答：BFC就是块级格式化上下文，可以理解为一个独立的渲染区域，区域内部的元素样式、布局不会影响外部。常用作用：清除浮动、解决上下margin塌陷、阻止元素被浮动元素覆盖。触发方式：元素设置overflow:hidden、display:flex、position:absolute等都可以触发BFC。5、浮动的优缺点？为什么现在很少用浮动布局？答：优点是早期用来做页面横向布局，简单好用；缺点是浮动会脱离标准文档流，导致父级高度塌陷，需要手动清除浮动，代码冗余多，兼容性问题多。现在基本用Flex、Grid布局替代，布局更简单、适配性更强，不用处理浮动塌陷问题。三、JavaScript基础高频题1、var、let、const的区别？答：var是函数级作用域，存在变量提升，能重复声明，不推荐使用。let和const是块级作用域（大括号内有效），不存在变量提升，不能重复声明，有暂时性死区。let用来声明可修改的变量，const用来声明常量，声明后不能重新赋值，引用类型（数组、对象）可以修改内部属性。2、JS基本数据类型和引用数据类型？答：基本类型：String、Number、Boolean、Null、Undefined、Symbol、BigInt，值存在栈内存，赋值是拷贝原值，互不影响。引用类型：Object、Array、Function、Date等，值存在堆内存，变量存储的是内存地址，赋值是拷贝地址，修改一个会影响另一个。3、深浅拷贝的区别？如何实现？答：浅拷贝只拷贝一层属性，如果属性是引用类型，只会拷贝地址，修改新对象会影响原对象。深拷贝是完全拷贝所有层级的数据，新旧对象完全独立，互不干扰。实现方式：简单深拷贝用JSON.parse(JSON.stringify())，缺点是不能拷贝函数、undefined、正则；复杂场景用递归手写深拷贝，或者用Lodash的cloneDeep方法。4、闭包是什么？优缺点和使用场景？答：简单说，函数嵌套函数，内部函数访问外部函数的变量，就形成了闭包。优点：可以保留私有变量，变量不会被全局污染；缺点：变量会一直驻留内存，使用不当会造成内存泄漏。常用场景：封装私有方法、防抖节流、定时器保存变量、循环绑定事件存索引。5、原型和原型链的理解？答：每个函数都有prototype原型对象，每个实例对象都有__proto__指向构造函数的prototype。原型链就是对象逐级向上查找原型的链条，当访问对象的属性或方法时，自身没有就会顺着__proto__向上找，直到找到Object原型，找不到就返回undefined。作用：实现方法和属性的复用，节省内存，也是JS继承的核心原理。6、this指向问题？答：this指向核心看调用方式，和定义位置无关：1、普通函数调用：this指向window（浏览器）/global（node）；2、对象方法调用：this指向调用的对象；3、构造函数调用：this指向new出来的实例；4、箭头函数：没有自己的this，继承外层作用域的this；5、call、apply、bind：可以手动修改this指向。7、异步JS理解？宏任务和微任务区别？答：JS是单线程的，异步就是为了解决耗时任务阻塞代码的问题，比如定时器、接口请求。宏任务：耗时较长，比如setTimeout、setInterval、AJAX请求、DOM渲染。微任务：优先级更高，比如Promise.then、async/await、queueMicrotask。执行顺序：同步代码优先执行→清空所有微任务→执行一轮宏任务，循环往复（事件循环）。8、Promise是什么？三种状态？答：Promise是解决异步回调地狱的方案，让异步代码更规整，支持链式调用。三种状态：pending（等待）、fulfilled（成功）、rejected（失败），状态一旦改变就不会再变化。常用方法：then处理成功、catch处理失败、finally无论成败都会执行、all批量处理异步。四、Vue核心面试题（前端必问）1、Vue2和Vue3的核心区别？答：1、响应式原理不同：Vue2用Object.defineProperty劫持属性，无法监听新增、删除属性和数组下标修改；Vue3用Proxy代理整个对象，支持全量监听。2、语法不同：Vue2主要用选项式API；Vue3支持组合式API，代码聚合性更好，适合大型项目。3、性能：Vue3虚拟DOM重写，编译优化更好，打包体积更小、运行更快。4、新增特性：setup语法糖、ref/reactive、Teleport、Suspense等。2、Vue响应式原理？答：核心是数据劫持+依赖收集+视图更新。Vue2通过defineProperty劫持数据的读写，数据被读取时收集依赖（记录用到该数据的视图），数据修改时触发更新，重新渲染视图。Vue3通过Proxy代理对象，配合Reflect实现更全面的响应式监听。3、v-if和v-show的区别？答：v-if是真正的销毁和创建DOM，切换开销大，初始渲染开销小，适合切换频率低的场景。v-show只是控制CSS的display属性，DOM始终存在，切换开销小，初始渲染开销大，适合频繁切换显示隐藏的场景。4、组件传值的方式有哪些？答：常用的几种：1、父子传值：父传子props，子传父$emit；2、跨层级/全局传值：Vuex/Pinia、provide/inject；3、简单兄弟组件：事件总线（$bus，Vue3不推荐）、借助父组件中转；4、简单全局数据：全局变量挂载。5、Vue生命周期常用钩子？答：常用核心钩子：onBeforeMount/mounted：挂载前/挂载完成，一般在mounted发接口请求、操作DOM；onBeforeUpdate/updated：数据更新前后；onBeforeUnmount/unmounted：销毁前后，一般在这里清除定时器、监听事件，防止内存泄漏。五、浏览器与网络面试题1、从输入网址到页面显示完整过程？答：1、DNS解析：把域名解析成服务器IP地址；2、建立TCP连接，三次握手；3、发送HTTP请求，服务器处理并返回响应数据；4、关闭TCP连接，四次挥手；5、浏览器解析HTML生成DOM树，解析CSS生成CSSOM树；6、生成渲染树，布局、绘制页面，最终展示内容。2、HTTP和HTTPS的区别？答：HTTP是明文传输，端口80，不安全，数据容易被劫持、篡改。HTTPS是HTTP+SSL/TLS加密，端口443，传输数据加密，安全可靠，但是握手过程会稍微耗时，需要配置证书。3、GET和POST区别？答：1、参数位置：GET参数拼在URL上，POST参数放在请求体；2、安全性：GET明文可见，不安全；POST相对安全；3、缓存：GET会被浏览器缓存，POST默认不缓存；4、数据大小：GET有URL长度限制，POST无限制；5、用途：GET用于查询数据，POST用于提交、修改数据。4、浏览器缓存机制？答：分为强缓存和协商缓存。强缓存：优先级最高，命中后直接读本地缓存，不发请求，对应Cache-Control、Expires；协商缓存：强缓存失效后，发请求让服务器校验资源是否更新，没更新则返回304，读本地缓存，对应ETag、Last-Modified。六、性能优化面试题（必考）1、前端常用性能优化方式？答：我日常开发主要从这几个方面做：1、资源优化：图片压缩、使用webp格式、静态资源CDN加速、懒加载图片和路由；2、代码优化：减少DOM操作、避免冗余循环、合理使用防抖节流、销毁定时器和监听；3、打包优化：路由懒加载、组件按需引入、去除多余依赖、压缩打包代码；4、缓存优化：利用浏览器缓存、接口缓存、本地存储缓存常用数据；5、渲染优化：避免频繁重排重绘，使用CSS3硬件加速。2、重排和重绘的区别？如何减少？答：重绘是元素样式改变、布局不变，浏览器重新绘制页面，开销小；重排（回流）是元素宽高、位置、布局改变，浏览器重新计算页面布局，开销极大。优化方式：集中修改样式、使用class统一改样式、避免频繁获取DOM位置属性、使用文档碎片批量操作DOM。3、防抖和节流的区别和使用场景？答：防抖：触发事件后，延迟一段时间执行，期间再次触发会重置计时，只执行最后一次。场景：搜索框输入联想、窗口大小调整、表单输入校验。节流：固定时间内只执行一次，不管触发多少次。场景：滚动监听、页面拖拽、按钮频繁点击、resize监听。七、工程化与杂项面试题1、Vue路由懒加载原理？答：就是利用ES6的import动态导入，只有访问对应路由时，才会加载对应的组件代码，不是一次性打包所有页面，大幅减少首屏加载时间，提升页面初始