前言大家好我是木斯佳。相信很多人都感受到了在AI浪潮的席卷之下前端领域的门槛在变高纯粹的“增删改查”岗位正在肉眼可见地减少。曾经热闹非凡的面经分享如今也沉寂了许多。但我们都知道市场的潮水退去留下的才是真正在踏实准备、努力沉淀的人。学习的需求从未消失只是变得更加务实和深入。这个专栏的初衷很简单拒绝过时的、流水线式的PDF引流贴专注于收集和整理当下最新、最真实的前端面试资料。我会在每一份面经和八股文的基础上尝试从面试官的角度去拆解问题背后的逻辑而不仅仅是提供一份静态的背诵答案。无论你是校招还是社招目标是中大厂还是新兴团队只要是真实发生、有价值的面试经历我都会在这个专栏里为你沉淀下来。专栏快速地址温馨提示市面上的面经鱼龙混杂甄别真伪、把握时效是我们对抗内卷最有效的武器。面经原文内容面试公司携程面试时间4月17日面试岗位前端暑期一面⏱️面试时长40分钟❓面试问题bfccss布局问题如何实现一个容器左边根据文字无限扩大右边不扩大只缩小flex布局float左边grow1auto右边flex0在引导下勉强做出数组的遍历方法如何实现数组乱序可以用randomfor遍历数组每次遍历用random生成一个随机数作为索引用这个索引代表的数和当前遍历的这个数交换重排重绘如何减少重排重绘只答了个transform闭包具体应用场景md这玩意有点忘了闭包可能引起的问题内存泄露引用的大对象没释放事件循环现在其实不局限于宏队列微队列了但一定要有微队列把这玩意说了react事件事件委托16之后的事件委托变化提了一嘴合成事件现在想想应该具体讲的AI相关为什么要有agent用户不能直接和大模型交互吗可以但有agent更方便讲了skill和mcp如何解决上下文膨胀agent要考虑哪些维度的问题来源牛客网绿糖滑稽木木有话说刷前先看携程这场一面是一份“基础AI”结合的面经。从BFC、CSS布局、数组乱序到重排重绘、事件循环、覆盖面很广 携程前端一面·深度解析面试整体画像维度特征面试风格基础考察型 AI前沿型 引导追问型难度评级⭐⭐⭐三星半布局题有细节AI概念较新考察重心CSS布局BFC/弹性布局、JS基础闭包/事件循环/数组、React事件机制、AI Agent特殊之处涉及Agent、MCP、Skill等较新的AI工程化概念逐题深度解析二、BFC块级格式化上下文回答思路BFC是独立的渲染区域内部元素与外部隔离。触发条件overflow: hidden/auto/scrollfloat不为noneposition: absolute/fixeddisplay: inline-block/flex/grid/table-celldisplay: flow-root解决的问题清除浮动父元素包裹浮动子元素防止margin重叠相邻块级元素上下margin合并自适应两栏布局左侧浮动右侧触发BFC三、CSS布局左边文字无限扩大右边只缩小题目理解左边容器根据文字内容自动撑开右边容器填满剩余空间当空间不足时右边缩小甚至溢出被裁剪左边保持原始宽度。解决方案/* 方案1Flex布局 */.container{display:flex;width:100%;}.left{flex:0 0 auto;/* 不放大不缩小根据内容确定宽度 */background:lightblue;}.right{flex:1;/* 占据剩余空间空间不足时缩小 */min-width:0;/* 允许缩小到0防止溢出 */background:lightcoral;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}/* 方案2浮动 overflow */.container{overflow:hidden;/* 触发BFC */}.left{float:left;background:lightblue;}.right{overflow:hidden;/* 触发BFC不环绕浮动元素 */background:lightcoral;}关键点flex: 0 0 autoflex-grow: 0; flex-shrink: 0; flex-basis: auto;min-width: 0允许flex子项缩小到小于内容宽度右边需要设置overflow: hidden或text-overflow: ellipsis处理溢出文本四、数组的遍历方法方法是否改变原数组是否有返回值能否中断forEach否undefined否map否新数组否filter否新数组否reduce否累积值否some否布尔值可返回true终止every否布尔值可返回false终止find否第一个匹配元素可找到即终止findIndex否索引可for循环可-可for...of可-可五、如何实现数组乱序Fisher-Yates洗牌算法用户描述的正确functionshuffle(arr){for(letiarr.length-1;i0;i--){constjMath.floor(Math.random()*(i1))[arr[i],arr[j]][arr[j],arr[i]]}returnarr}注意arr.sort(() Math.random() - 0.5)是不均匀的不推荐。六、重排Reflow与重绘Repaint维度重排Reflow重绘Repaint触发几何属性变化宽高、边距、位置视觉属性变化颜色、背景、可见性开销大影响后续元素小只影响自身必然性重排一定导致重绘重绘不一定导致重排触发重排的操作添加/删除DOM元素改变宽高、边距、位置改变窗口大小读取offsetHeight、getComputedStyle等强制同步重排七、如何减少重排重绘优化策略使用transform/opacity做动画只触发合成跳过重排重绘读写分离避免在循环中交替读写布局属性批量修改样式使用class或cssText一次性修改使用文档片段document.createDocumentFragment()批量插入脱离文档流用position: absolute使元素独立使用will-change提前告知浏览器元素会变化// ❌ 不好循环中交替读写for(leti0;i1000;i){constwidthdiv.offsetWidth// 读div.style.widthwidth1px// 写强制重排}// ✅ 好读写分离constwidthdiv.offsetWidth// 只读一次div.style.widthwidth1000px// 只写一次八、闭包及具体应用场景定义函数可以访问其外部作用域的变量即使外部函数已执行完毕。应用场景防抖/节流保存timer变量模块化封装私有变量事件监听循环中保存正确索引函数工厂根据参数生成特定功能的函数迭代器生成器函数// 模块化示例constcounter((){letcount0return{increment:()count,decrement:()--count,getCount:()count}})()九、闭包可能引起的问题主要问题内存泄漏原因闭包引用的外部变量不会被垃圾回收如果这些变量是大对象或DOM元素会造成内存占用。// 内存泄漏示例functionleak(){constlargeDatanewArray(1000000).fill(data)constelementdocument.getElementById(btn)element.onclick(){console.log(largeData.length)// 闭包引用largeData和element}}// largeData和element无法被回收即使btn被移除解决方案及时解除引用element.onclick null避免在闭包中引用不必要的大对象使用WeakMap/WeakSet存储弱引用十、事件循环回答思路用户提到“现在其实不局限于宏队列微队列了”说明对最新标准有了解。核心流程执行同步代码清空微任务队列Promise.then、MutationObserver执行一个宏任务setTimeout、I/O、UI渲染重复2-3注意HTML标准中事件循环每个“轮次”会执行多个宏任务不标准是一个宏任务后立即执行微任务队列。但不同任务源task source之间有优先级。用户提到的“不局限于宏队列微队列”实际上浏览器有多个任务队列定时器、I/O、用户交互等不同任务源的任务执行顺序有优先级但核心的“微任务优先于宏任务”原则不变。十一、React事件机制React事件系统核心合成事件SyntheticEvent跨浏览器统一的封装事件委托React 16及之前所有事件都委托到document上React 17变化事件委托从document改为root节点容器节点便于微前端和多版本共存事件流程React在根节点监听原生事件收集需要执行的事件回调构建合成事件对象按捕获→目标→冒泡顺序执行// 合成事件特点functionhandleClick(e){e.preventDefault()// 跨浏览器统一e.stopPropagation()// 事件池React 17已移除e.persist() 使事件异步可用}十二、为什么要有Agent回答思路Agent是能自主规划、调用工具、完成复杂任务的AI系统。为什么需要Agent工具调用大模型不能直接执行代码、搜索、发请求Agent负责调度工具任务规划复杂任务需要分解成多个步骤Agent管理执行顺序记忆管理Agent维护短期/长期记忆解决上下文窗口限制错误恢复工具调用失败时Agent可以尝试替代方案用户提到的Skill和MCPSkill预定义的能力单元封装特定任务的指令工具MCPModel Context Protocol标准化Agent与工具的交互协议十三、用户不能直接和大模型交互吗回答可以但Agent提供更好的体验和更强的能力。直接交互的局限无法调用工具搜索、计算、操作文件无法自主规划复杂任务每次需要用户完整描述需求Agent的价值自动调用工具获取信息记忆历史理解上下文主动推理和规划十四、如何解决上下文膨胀回答思路上下文膨胀指对话历史过长超过模型token限制。解决方案滑动窗口只保留最近N轮对话摘要压缩对历史对话生成摘要替代原始消息RAG检索不保留全量历史按需检索相关记忆分页/分段将长对话拆分成多个会话关键信息提取只保留关键事实和决策// 滑动窗口 摘要混合functionmanageContext(messages,maxTokens8000){lettokensestimateTokens(messages)if(tokensmaxTokens)returnmessagesconstsystemmessages[0]constrecentmessages.slice(-6)// 最近6条consttoCompressmessages.slice(1,-6)constsummarysummarize(toCompress)// 异步生成摘要return[system,{role:system,content:历史摘要${summary}},...recent]}十五、Agent要考虑哪些维度的问题回答思路设计Agent时的关键考量维度。核心维度推理能力如何让模型正确分解任务、选择工具记忆管理短期记忆对话上下文 长期记忆向量数据库工具调用工具定义、参数传递、结果解析、错误处理成本控制Token消耗、API调用次数安全性工具调用权限、敏感操作确认、防止滥用可观测性记录Agent的思考轨迹便于调试和优化效率并行执行、缓存优化、减少不必要的推理回答示例“设计Agent时我会考虑第一推理准确性——模型能否正确规划步骤第二记忆管理——如何处理长对话第三工具调用——如何安全地执行外部操作第四成本——控制Token和API调用第五可观测性——能追踪Agent的思考过程以便调试。”知识点速查表知识点核心要点BFC独立渲染区域清除浮动、防止margin重叠、自适应布局Flex布局左边flex:0 0 auto右边flex:1min-width:0数组遍历forEach/map/filter/reduce/some/every/find/for数组乱序Fisher-Yates洗牌避免sort随机重排重绘几何变化触发重排视觉变化触发重绘重排一定重绘优化重排transform、读写分离、批量样式、脱离文档流闭包函数外部作用域防抖/模块化/内存泄漏风险事件循环同步→微任务→宏任务多任务源有优先级React事件合成事件、事件委托root节点、事件池移除Agent工具调用、任务规划、记忆管理、错误恢复上下文膨胀滑动窗口、摘要压缩、RAG、关键信息提取Agent维度推理/记忆/工具/成本/安全/可观测性/效率 最后一句携程这场一面既考基础BFC、闭包、重排重绘、React事件又问前沿Agent、MCP、上下文膨胀。用户对左边flex布局的细节有些生疏但AI相关概念回答得不错。这提醒我们前端面试已不再局限于传统八股AI工程化能力正成为新的加分项。能紧跟技术潮流的人永远走在前面。