前言大家好我是木斯佳。相信很多人都感受到了在AI浪潮的席卷之下前端领域的门槛在变高纯粹的“增删改查”岗位正在肉眼可见地减少。曾经热闹非凡的面经分享如今也沉寂了许多。但我们都知道市场的潮水退去留下的才是真正在踏实准备、努力沉淀的人。学习的需求从未消失只是变得更加务实和深入。这个专栏的初衷很简单拒绝过时的、流水线式的PDF引流贴专注于收集和整理当下最新、最真实的前端面试资料。我会在每一份面经和八股文的基础上尝试从面试官的角度去拆解问题背后的逻辑而不仅仅是提供一份静态的背诵答案。无论你是校招还是社招目标是中大厂还是新兴团队只要是真实发生、有价值的面试经历我都会在这个专栏里为你沉淀下来。专栏快速地址温馨提示市面上的面经鱼龙混杂甄别真伪、把握时效是我们对抗内卷最有效的武器。面经原文内容面试公司字节跳动面试时间近期面试岗位前端一面⏱️面试时长45分钟面试体验面试官非常和善会复述你的回答double check❓面试问题实习项目穿插八股登录页面怎么做的后端传过来的jwt存在哪里为什么放在cookie里放在local storage里怎么携带的sessionStorage和localStorage有什么区别除了这种缓存还有其他的缓存手段答了协商缓存、强缓存协商缓存和强缓存下浏览器的请求行为协商缓存的相关字段状态码大文件上传怎么做的为什么要用ssesse连接断开怎么办接口降级方案具体是怎么实现的主要观测的性能指标有哪些LCP是怎么算的具体LCP数值是多少性能优化做了哪些内容vite和webpack的流程、区别技术选型问题为什么项目开发使用vue3不用reactvue3的响应式vue编译渲染是怎么做的coding3道限制数量的事件调度器Schedulerhot100中的括号生成问了一下时间复杂度两个版本序列号排序问题来源牛客网 盐酸不酸木木有话说刷前先看字节这场一面是典型的“项目深挖基础考察算法”组合。面试官非常友善会复述你的回答确认理解正确这种风格下更容易发挥真实水平。尤其值得关注的是“接口降级方案”和“LCP具体数值”考察的是生产环境的实战思维。最近的题多讲思路因为重复题比较多建议大家看汇总篇根据汇总篇的热点考点去进行专项复习 字节前端一面·深度解析面试整体画像维度特征面试风格项目驱动型 友善沟通型 实战追问型难度评级⭐⭐⭐⭐四星覆盖面广算法有区分度考察重心登录鉴权、缓存策略、大文件上传、SSE、性能优化、构建工具、Vue原理、算法特殊之处面试官会复述回答确认理解考察沟通确认能力逐题深度解析一、登录页面怎么做的回答思路从表单交互、数据提交、token处理、路由守卫等方面说明。要点表单校验手机号/邮箱、密码格式提交时禁用按钮防止重复提交调用登录API获取tokentoken存储cookie/localStorage登录成功跳转失败展示错误提示路由守卫未登录时重定向到登录页二、JWT存在哪里为什么放cookielocalStorage怎么携带回答思路对比存储方式的优劣。存储位置localStorage需手动在请求头Authorization: Bearer token携带cookie设置httpOnly防止XSS设置Secure和SameSite请求自动携带为什么放cookiehttpOnly防止XSS攻击窃取token自动携带无需手动处理请求头SameSite可防范CSRFlocalStorage携带方式// 存储在localStoragelocalStorage.setItem(token,token)// 请求拦截器添加axios.interceptors.request.use(config{consttokenlocalStorage.getItem(token)if(token){config.headers.AuthorizationBearer${token}}returnconfig})三、sessionStorage和localStorage区别维度localStoragesessionStorage生命周期永久手动清除标签页关闭即失效作用域同源同源同标签页容量5-10MB5-10MB四、除了本地存储还有其他缓存手段回答思路用户答了协商缓存、强缓存正确。HTTP缓存强缓存Cache-Control: max-age3600缓存期间不发请求协商缓存ETag/If-None-MatchLast-Modified/If-Modified-Since返回304则复用其他CDN缓存、Service Worker缓存、内存缓存Memory Cache。五、强缓存和协商缓存的请求行为、字段、状态码强缓存请求行为缓存有效期内不发请求直接从缓存读取状态码200 (from disk cache)或200 (from memory cache)字段Cache-Control优先级高、Expires协商缓存请求行为缓存过期后发请求验证资源是否变化状态码304 Not Modified资源未变化或200资源更新字段请求头If-None-Match对应响应头ETag、If-Modified-Since对应Last-Modified六、大文件上传怎么做的回答思路核心是分片上传、断点续传、并发控制。流程文件分片Blob.slice()将文件切分成多个chunk如每片1MB计算哈希用spark-md5计算文件哈希用于秒传判断上传分片并发上传控制并发数每个分片带序号断点续传服务端记录已上传分片前端跳过已上传的合并通知所有分片上传完成后通知服务端合并// 分片上传示例asyncfunctionuploadFile(file){constchunkSize1024*1024// 1MBconstchunksMath.ceil(file.size/chunkSize)for(leti0;ichunks;i){constchunkfile.slice(i*chunkSize,(i1)*chunkSize)constformDatanewFormData()formData.append(chunk,chunk)formData.append(index,i)formData.append(total,chunks)awaitfetch(/upload,{method:POST,body:formData})}// 通知合并awaitfetch(/merge,{method:POST,body:JSON.stringify({fileName:file.name})})}七、为什么要用SSE回答思路SSE适用于服务端向客户端单向推送的场景。AI对话场景LLM生成是服务端→客户端的单向流SSE基于HTTP实现简单自动重连比WebSocket轻量资源开销小八、SSE连接断开怎么办回答思路SSE原生支持自动重连但生产环境需做增强。处理方案原生重连SSE的EventSource会自动重连自定义重试监听onerror实现指数退避重连断点续传携带Last-Event-ID服务端从断点继续推送letretryCount0functionconnectSSE(){constsourcenewEventSource(/api/stream)source.onerror(){source.close()constdelayMath.min(1000*Math.pow(2,retryCount),30000)setTimeout((){retryCountconnectSSE()},delay)}source.onopen(){retryCount0}}九、接口降级方案具体是怎么实现的回答思路降级是高可用设计当主接口失败时使用备用方案。实现方式超时降级设置超时时间超时后走降级逻辑失败降级主接口报错后调用备用接口或返回缓存数据熔断降级连续失败N次后直接走降级不请求主接口限流降级超出QPS限制时返回默认数据或友好提示asyncfunctionfetchWithFallback(){try{constresponseawaitfetch(/api/main,{timeout:3000})returnawaitresponse.json()}catch(error){// 降级使用缓存或备用接口constcachedlocalStorage.getItem(cachedData)if(cached)returnJSON.parse(cached)constfallbackawaitfetch(/api/fallback)returnawaitfallback.json()}}十、主要观测的性能指标、LCP计算方式与数值回答思路核心Web Vitals包括LCP、FID、CLS。LCPLargest Contentful Paint最大内容绘制时间衡量加载性能。通过PerformanceObserver观测页面中最大的元素图片、视频、文本块渲染完成的时间。计算方式newPerformanceObserver((list){constentrieslist.getEntries()constlastEntryentries[entries.length-1]console.log(LCP:,lastEntry.renderTime||lastEntry.loadTime)}).observe({entryTypes:[largest-contentful-paint]})数值标准优秀≤ 2.5秒需改进2.5-4秒差 4秒十一、性能优化做了哪些内容回答思路从加载、渲染、网络多个维度展开。优化项代码分割路由懒加载、动态导入图片优化WebP格式、懒加载、响应式图片资源压缩JS/CSS压缩、Gzip/Brotli缓存策略强缓存、协商缓存、CDN虚拟滚动长列表优化减少重排重绘用transform/opacity做动画预加载preload关键资源、prefetch低优先级资源十二、Vite和Webpack的流程、区别维度WebpackVite开发环境打包所有模块启动慢利用ESM直接启动热更新重新打包相关模块只更新变更的模块生产打包统一打包成bundle使用Rollup预打包配置复杂度高低流程Webpack入口→依赖解析→loader转换→打包→输出Vite启动服务器→请求时编译→利用浏览器ESM加载十三、技术选型Vue3 vs React回答思路结合项目需求说明。Vue3优势上手简单模板语法直观响应式自动依赖收集开发效率高官方生态完善Vue Router、PiniaReact优势灵活度高适合复杂交互生态更丰富函数式编程范式选型原因团队熟悉度、项目复杂度、社区生态。十四、Vue3响应式回答思路基于Proxy实现懒递归。核心reactive用Proxy代理对象拦截get/set/deletePropertyref包装基本类型通过.value访问effect依赖收集触发更新懒递归只有访问嵌套对象时才代理十五、Vue编译渲染是怎么做的回答思路模板 → AST → 渲染函数 → VNode → 真实DOM。流程解析将模板字符串解析成AST抽象语法树转换对AST进行优化标记静态节点生成生成渲染函数render函数渲染执行渲染函数生成VNode更新VNode与旧VNode进行diff更新真实DOMCoding题一限制数量的事件调度器Scheduler题目实现一个并发限制的调度器最多同时执行2个任务。classScheduler{constructor(limit2){this.limitlimitthis.running0this.queue[]}add(promiseFactory){returnnewPromise((resolve,reject){this.queue.push((){promiseFactory().then(resolve,reject).finally((){this.running--this.next()})})this.next()})}next(){if(this.runningthis.limitthis.queue.length){consttaskthis.queue.shift()this.runningtask()}}}Coding题二括号生成题目给定n对括号生成所有有效的括号组合。functiongenerateParenthesis(n){constresult[]functionbacktrack(str,left,right){if(str.length2*n){result.push(str)return}if(leftn)backtrack(str(,left1,right)if(rightleft)backtrack(str),left,right1)}backtrack(,0,0)returnresult}时间复杂度卡特兰数O(4^n / √n)Coding题三版本序列号排序题目对版本号数组进行排序如[1.0.1, 1.0, 1.0.2, 2.0]。functioncompareVersion(v1,v2){constparts1v1.split(.).map(Number)constparts2v2.split(.).map(Number)constmaxLenMath.max(parts1.length,parts2.length)for(leti0;imaxLen;i){constnum1parts1[i]||0constnum2parts2[i]||0if(num1!num2)returnnum1-num2}return0}functionsortVersions(versions){returnversions.sort(compareVersion)}知识点速查表知识点核心要点登录鉴权JWT存储cookie/localStorage、请求拦截器携带存储区别localStorage永久/sessionStorage标签页/cookie自动携带HTTP缓存强缓存(Cache-Control/Expires)、协商缓存(ETag/Last-Modified)大文件上传分片(Blob.slice)、断点续传、秒传(文件哈希)SSE单向推送、自动重连、断线恢复(Last-Event-ID)接口降级超时降级、熔断、限流、缓存兜底LCP最大内容绘制≤2.5s优秀PerformanceObserver获取性能优化代码分割、图片优化、虚拟滚动、预加载Vite vs Webpack开发环境ESM/打包、热更新机制、生产构建Vue3响应式Proxy代理、懒递归、ref包装基本类型Vue编译模板→AST→渲染函数→VNode→DOM调度器并发限制、任务队列括号生成回溯、左右括号数量约束版本排序拆分解析、补0对齐 最后一句字节这场一面风格友善但内容硬核。从登录JWT存储、大文件上传到LCP性能指标、Vue编译原理再到三道算法题全面考察了项目实战能力和计算机基础。面试官会复述你的回答double check这种沟通方式值得学习——确认理解一致是高效协作的关键。能通过这样的面试说明你不仅会写代码更能清晰地表达技术决策。