2026全栈开发面试题

一、HTML/CSS1.请解释css盒模型类别标准盒模型、IE盒模型css盒模型由以下几部分组成从内到外content内容区padding内边距border边框margin外边距两种盒模型的区别盒模型类型width/height包含的内容标准盒模型content-box只包含contentIE盒模型border-box包含contentpaddingborder.box { box-sizing: content-box; /* 默认值 */ } .box { box-sizing: border-box; /* 推荐使用 */ }面试加分点border-box更容易做布局计算现代项目几乎都使用它。可通过通配选择器全局设置* { box-sizing: border-box; }2.什么是BFC如何触发有什么作用BFCBlock Formatting Context块级格式化上下文是一个独立的渲染区域内部元素的渲染不会影响到外部元素。常见触发方式floatleft/rightoverflowhidden/auto/scrolldisplay:inline-block/flex/gridposition:absolute/fixed主要作用①清除浮动②防止margin重叠③包含内部浮动元素避免高度塌陷示例.container { overflow: hidden; /* 触发 BFC */ }二、JavaScript核心1.解释JS的原型链及继承原理每个对象都有一个_proto_属性指向其构造函数的prototype构造函数的prototype也是一个对象通过_proto_形成的链式结构称为原型链function Person() {} Person.prototype.say function () {} const p new Person(); p.say(); // 通过原型链查找继承实现方式ES5function Parent() {} function Child() {} Child.prototype Object.create(Parent.prototype); Child.prototype.constructor Child;ES6 class继承class Parent {} class Child extends Parent {}2.JS事件循环Event Loop机制是怎样的①执行同步代码主线程②遇到异步任务宏任务setTimeoutsetIntervalDOM事件微任务Promise.then,async返回值③每执行完一个宏任务会清空当前所有微任务队列示例console.log(1); setTimeout(() console.log(2), 0); Promise.resolve().then(() console.log(3)); console.log(4); // 输出1 4 3 2三、前端框架以Vue为例1.vue2和vue3的主要区别是什么对比项Vue2Vue3响应式原理Object.definePropertyProxyAPI风格Options APIComposition API性能较好更快、包体更小TypeScript支持一般原生友好Fragment不支持支持多个根节点Teleport无新增Suspense无新增2.Vue生命周期创建阶段beforeCreatecreated挂载阶段beforeMountmounted更新阶段beforeUpdateupdated销毁阶段beforeDestroydestroyedbeforeCreate获取不到数据真实DOM未渲染出来created可以访问数据真实DOM未渲染可进行初始化事件绑定发送请求beforeMountDOM未渲染与created用法一致可初始化事件绑定发送ajaxmounted数据加载完毕DOM已渲染可做实例化操作beforeUpdate不执行函数初始化获取更新之前的DOM内容updated更新之后的虚拟DOM新旧DOM对比后真实DOM渲染diff算法beforeDestroy清除一些初始化事件定时器destroyed指令解绑事件监听器对移除子实例被销毁3.Vue中组件通信有哪些方式场景方式父子组件props/emit跨层级provide/inject全局共享Pinia/Vuex兄弟组件状态管理/事件总线不推荐父访问子ref4.Pinia相比Vuex的优势去除了mutations更好的TS支持更简洁的API支持多store拆分天然支持SSRexport const useUserStore defineStore(user, { state: () ({ name: }), actions: { setName(name) { this.name name } } })四、Node.js1.Node.js为什么适合高并发I/O场景单线程事件循环非阻塞I/O大量I/O操作不会阻塞主线程适合API服务、中间层、实时应用不适合CPU密集型任务如大计算2.JWT的工作原理是什么JWTJSON Web Token由三部分组成Header头部Payload载荷Signature签名流程①用户登录成功后服务器生成JWT②客户端保存tokenlocalStorage/cookie③每次请求携带token④服务器验证token合法性优点无状态适合分布式系统五、Spring核心1.Spring IOC是什么有什么好处IOCInversion of Control控制反转将对象的创建、依赖注入交由Spring容器管理。好处降低耦合便于测试方便扩展和维护Service public class UserService { Autowired private UserRepository userRepository; }2.Spring AOP的实现原理基于动态代理JDK动态代理接口CGLib类通过代理对象增强方法常见应用事务日志权限控制3.Spring Boot启动流程创建SpringApplication加载配置文件初始化上下文扫描Bean执行Runner六、数据库1.MySQL索引失效的常见情况有哪些对索引字段使用函数隐式类型转换LIKE以%开头OR条件未全部命中索引联合索引未遵循最左前缀原则2.Redis三大问题如何解决问题描述解决方案穿透查询不存在的数据布隆过滤器/空值缓存击穿热点key失效瞬间大量请求互斥锁/逻辑过期雪崩大量key同时失效随机过期时间/高可用七、软技能场景题1.你在项目中遇到的最难的技术问题是什么怎么解决的解题思路STAR法则:Situation背景Task任务Action行动Result结果示例某次接口在高并发下超时严重通过日志定位到慢SQL添加复合索引Redis缓存响应时间从2s降到200ms