前言大家好我是木斯佳。相信很多人都感受到了在AI浪潮的席卷之下前端领域的门槛在变高纯粹的“增删改查”岗位正在肉眼可见地减少。曾经热闹非凡的面经分享如今也沉寂了许多。但我们都知道市场的潮水退去留下的才是真正在踏实准备、努力沉淀的人。学习的需求从未消失只是变得更加务实和深入。这个专栏的初衷很简单拒绝过时的、流水线式的PDF引流贴专注于收集和整理当下最新、最真实的前端面试资料。我会在每一份面经和八股文的基础上尝试从面试官的角度去拆解问题背后的逻辑而不仅仅是提供一份静态的背诵答案。无论你是校招还是社招目标是中大厂还是新兴团队只要是真实发生、有价值的面试经历我都会在这个专栏里为你沉淀下来。专栏快速地址温馨提示市面上的面经鱼龙混杂甄别真伪、把握时效是我们对抗内卷最有效的武器。面经原文内容面试公司美团面试时间近期面试岗位前端暑期实习一面❓面试问题useEffect和useLayoutEffect的区别是什么useEffect依赖数组是什么作用依赖数组多个变量其中一个变化是否会执行副作用useEffect清理函数的作用是什么为何会产生内存泄漏React组件间通信有哪几种方式useState是同步还是异步执行对象函数与箭头函数this指向相关代码分别输出什么前端缓存相关区分协商缓存和强缓存、如何在浏览器查看资源是否命中缓存、什么缓存返回304、强缓存与协商缓存分别需要配置哪些HTTP字段从浏览器输入域名到页面渲染完整流程是什么HTML解析中遇到JS、CSS资源加载是否阻塞解析前端页面性能指标有哪些FCP如何计算、如何采集统计FCP数据、全页面渲染结束时间如何监听Promise.all、Promise.race、Promise.allSettled、Promise.any的区别与适用场景异步代码执行顺序相关代码输出结果仿微信聊天列表卡片布局如何实现CSS position有哪些取值及各自含义rem、em、vw单位含义编写函数查找字符串第一个不重复字符下标无则返回-1来源牛客网 不想打工的加菲猫很慵懒木木有话说刷前先看美团这场面试是一份“React原理网络缓存性能指标CSS布局”全面覆盖的经典面经。非常适合暑期实习面试前系统自查。 美团前端暑期实习一面·深度解析面试整体画像维度特征面试风格基础全面型 原理追问型 实战代码型难度评级⭐⭐⭐⭐四星覆盖面广原理细节多考察重心React Hooks原理、组件通信、前端缓存、浏览器渲染、性能指标、Promise并发、CSS布局特殊之处无项目深挖纯技术基础考察适合检验知识体系完整性逐题深度解析一、useEffect和useLayoutEffect的区别维度useEffectuseLayoutEffect执行时机浏览器绘制后异步浏览器绘制前同步阻塞渲染否是使用场景多数副作用数据获取、订阅、日志需要测量DOM、同步修改样式防止闪烁SSR支持完全支持有警告需跳过// useLayoutEffect典型场景测量DOM尺寸useLayoutEffect((){constheightdivRef.current.offsetHeightsetHeight(height)// 绘制前更新避免闪烁},[])二、useEffect依赖数组的作用作用控制副作用函数的执行时机。依赖数组执行时机无不传每次渲染后都执行[]空数组仅组件挂载时执行一次[a, b]首次挂载 a或b变化时执行三、依赖数组多个变量其中一个变化是否会执行副作用答案会。只要依赖数组中任意一个变量的值发生变化浅比较副作用函数就会重新执行。useEffect((){console.log(count或name变化了)},[count,name])// count变化 → 执行name变化 → 执行四、useEffect清理函数的作用及内存泄漏作用在组件卸载或下次执行副作用前清理上一次的副作用。常见清理场景清除定时器clearInterval/clearTimeout取消订阅eventBus.off取消请求AbortController.abort()内存泄漏原因未清理的定时器、订阅、DOM事件监听器在组件卸载后仍然存在导致无法被垃圾回收。useEffect((){consttimersetInterval((){},1000)return()clearInterval(timer)// 清理函数},[])五、React组件间通信方式方式适用场景props/emit父子组件直接通信Context跨多级组件祖先→后代状态管理Redux/Zustand/Pinia全局共享状态eventBus任意组件通信不推荐大型项目ref父组件调用子组件方法props.children/ 插槽内容分发六、useState是同步还是异步执行答案异步执行批量更新。原理React会将多个setState合并到一个更新批次中在事件循环末尾统一执行以优化性能。const[count,setCount]useState(0)setCount(1)console.log(count)// 输出0不是1获取最新值的方法使用函数式更新或useEffect监听变化。七、对象函数与箭头函数this指向箭头函数this静态绑定定义时继承外层作用域。普通函数this动态绑定调用时决定。constobj{name:Tom,normal:function(){console.log(this.name)},arrow:(){console.log(this.name)}}obj.normal()// Tomthis指向objobj.arrow()// undefinedthis指向外层通常是window八、前端缓存机制强缓存缓存有效期内直接使用本地缓存不发请求状态码200 (from disk cache)/200 (from memory cache)字段Cache-Control: max-age3600优先级高、Expires协商缓存缓存过期后向服务端验证返回304则使用缓存状态码304 Not Modified字段请求头If-None-Match对应ETag、If-Modified-Since对应Last-Modified浏览器查看Chrome DevTools → Network → 查看Size列(disk cache)/(memory cache)和Status304九、浏览器输入域名到页面渲染的完整流程DNS解析域名→IPTCP三次握手TLS握手HTTPS发送HTTP请求服务端处理并返回响应浏览器解析HTML → DOM树解析CSS → CSSOM树合成渲染树布局Layout/Reflow分层Layer绘制Paint分块Tiling光栅化Rasterize合成Composite页面显示十、HTML解析中JS、CSS资源加载是否阻塞解析资源阻塞情况CSS不阻塞HTML解析但阻塞后续JS执行和渲染同步JS阻塞HTML解析下载执行asyncJS异步下载不阻塞解析下载完立即执行deferJS异步下载不阻塞解析DOMContentLoaded前执行十一、前端页面性能指标与FCP采集核心指标FCPFirst Contentful Paint首次内容绘制≤1.8sLCPLargest Contentful Paint最大内容绘制≤2.5sINPInteraction to Next Paint交互延迟≤200msCLSCumulative Layout Shift累积布局偏移≤0.1TTFBTime To First Byte首字节时间≤800msFCP计算从开始加载到任意文本/图片/Canvas绘制完成的时间。采集方法newPerformanceObserver((list){for(constentryoflist.getEntries()){if(entry.namefirst-contentful-paint){console.log(FCP:,entry.startTime)}}}).observe({entryTypes:[paint]})全页面渲染结束时间load事件window.onload或LCP。十二、Promise并发方法区别方法返回时机适用场景Promise.all全部成功或任一失败所有请求都必要Promise.allSettled全部完成无论成功/失败需要知道每个结果Promise.race第一个完成超时控制Promise.any第一个成功多个备用服务Promise.all([p1,p2])// 全成功则成功一失败则失败Promise.allSettled([p1,p2])// 全部完成返回状态数组Promise.race([p1,p2])// 第一个完成的Promise.any([p1,p2])// 第一个成功的十三、异步代码执行顺序console.log(1)setTimeout(()console.log(2),0)Promise.resolve().then(()console.log(3))console.log(4)// 输出1,4,3,2十四、仿微信聊天列表卡片布局Flex实现.chat-item{display:flex;align-items:center;padding:12px;gap:12px;}.avatar{width:48px;height:48px;border-radius:50%;flex-shrink:0;}.content{flex:1;min-width:0;}.name{font-weight:bold;}.message{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.time{flex-shrink:0;font-size:12px;color:#999;}十五、CSS position取值取值含义static默认文档流relative相对自身偏移占位保留absolute绝对定位相对最近的非static祖先fixed相对视口固定sticky粘性定位滚动到阈值时固定十六、rem、em、vw单位单位参照物rem根元素html字体大小em当前元素字体大小vw视口宽度的1%html{font-size:16px;}.box{width:10rem;}/* 160px */.child{font-size:1.2em;}/* 1.2倍父元素字体 */.container{width:50vw;}/* 视口宽度的50% */十七、查找字符串第一个不重复字符下标functionfirstUniqChar(s){constmapnewMap()for(leti0;is.length;i){map.set(s[i],(map.get(s[i])||0)1)}for(leti0;is.length;i){if(map.get(s[i])1)returni}return-1}知识点速查表知识点核心要点useEffect vs useLayoutEffect绘制后/前测量DOM用LayoutEffect依赖数组控制执行时机空数组仅挂载执行清理函数清除定时器/订阅防止内存泄漏组件通信props、Context、状态管理、eventBus、refuseState异步批量更新函数式更新获取最新值箭头函数this静态绑定定义时继承外层缓存强缓存(Cache-Control)、协商缓存(ETag)、304浏览器渲染DNS→TCP→请求→解析→布局→绘制→合成性能指标FCP/LCP/INP/CLSPerformanceObserver采集Promise并发all/allSettled/race/any区别CSS布局Flex聊天卡片、position取值、rem/em/vw算法哈希表统计频率两次遍历 最后一句美团这场一面是一场“基础扎实度”的全面体检。从React Hooks原理到缓存机制从浏览器渲染到性能指标采集从Promise并发到CSS布局没有偏题怪题每一道都是必须掌握的核心知识。