前端八股文面经大全：腾讯前端一面（2026-04-04）·深度解析

前言大家好我是木斯佳。相信很多人都感受到了在AI浪潮的席卷之下前端领域的门槛在变高纯粹的“增删改查”岗位正在肉眼可见地减少。曾经热闹非凡的面经分享如今也沉寂了许多。但我们都知道市场的潮水退去留下的才是真正在踏实准备、努力沉淀的人。学习的需求从未消失只是变得更加务实和深入。这个专栏的初衷很简单拒绝过时的、流水线式的PDF引流贴专注于收集和整理当下最新、最真实的前端面试资料。我会在每一份面经和八股文的基础上尝试从面试官的角度去拆解问题背后的逻辑而不仅仅是提供一份静态的背诵答案。无论你是校招还是社招目标是中大厂还是新兴团队只要是真实发生、有价值的面试经历我都会在这个专栏里为你沉淀下来。专栏快速链接温馨提示市面上的面经鱼龙混杂甄别真伪、把握时效是我们对抗内卷最有效的武器。面经原文内容面试公司腾讯面试时间近期面试岗位前端一面❓面试问题自我介绍Monorepo 架构实现代码位置 配置AI 模块如何拆分放在哪里双 token 如何实现 自动续期 无感刷新无感刷新下请求队列问题分页错乱双token无感刷新下如果存储的历史请求队列中的请求再次请求会有什么问题比如分页请求数据原本请求page1此时access_token过期接着再次点击下一页导致在分页的情况下有两次请求(请求到不同的页下的数据)原本只希望出现一页的数据此时出现两页的数据如何解决这个bug问题项目与市面产品差异优点AI对话是否与项目有强关联的关系为什么这样AI对话下上下文记忆的实现详细介绍SSE以及为什么不用websocket他们两个有什么区别常见的chatgpt等对话模式中为什么要用SSE解决了什么问题为什么AI智能对话需要使用流式输出不用其他的介绍前端埋点SDK如何实现介绍埋点中的web性能指标(FP/FCP/LCP/INP/CLS)的每个的详细含义说明以上性能指标中你认为哪一个是最重要的为什么讲述如何优化spa应用白屏从哪几个方面可以优化这个问题说说对于你使用过的vuereactsvelte这三个框架更擅长喜欢使用哪一个框架为什么说说为什么在react框架中为什么需要使用单标签原理是什么详细说说缓存机制https 建立连接的原理如何建立连接说说http有哪几个版本以及他们的不同之处区别使用过哪些 AI 工具或者 AI 辅助开发的编辑器来源牛客网 寻觅流光木木有话说刷前先看腾讯这场一面是一份“深度广度”兼备的高质量面经。现在大厂对前端的要求好像越来越高了。从网络到项目基建到AI属于什么都问类型的。 腾讯前端一面·深度解析面试整体画像维度特征面试风格工程实战型 深度追问型 场景设计型难度评级⭐⭐⭐⭐四星涉及复杂业务场景和底层原理考察重心工程化Monorepo/模块拆分、鉴权双token/无感刷新、AI对话SSE/上下文、性能埋点/指标/白屏、框架原理、网络协议特殊之处第5题的分页错乱bug非常真实考察业务场景下的问题解决能力逐题深度解析二、Monorepo架构实现回答思路Monorepo是用一个仓库管理多个项目/包。常用工具pnpm workspace推荐节省磁盘空间严格依赖管理Nx智能构建缓存适合大型项目Turborepo增量构建缓存优化Lerna较老目录结构my-monorepo/ ├── packages/ │ ├── shared/ # 共享工具库 │ ├── components/ # 公共组件库 │ ├── ai-module/ # AI模块 │ └── web-app/ # 主应用 ├── pnpm-workspace.yaml └── package.jsonpnpm-workspace.yamlpackages:-packages/*三、AI模块如何拆分回答思路按职责拆分放在packages/ai-module。拆分原则核心层AI SDK封装调用API、SSE连接业务层提示词管理、对话上下文UI层对话组件、消息渲染工具层函数调用Tool Calling实现// 目录结构ai-module/├── core/│ ├── client.ts #API客户端 │ └── stream.ts #SSE处理 ├── prompts/│ └── templates.ts # 提示词模板 ├── hooks/│ └── useChat.ts # React/Vue Hook ├── components/│ └── ChatBox.tsx # 对话组件 └── index.ts四、双token实现 自动续期 无感刷新回答思路access_token短期 refresh_token长期。流程登录成功服务端返回access_token如2小时过期和refresh_token如7天过期前端存储token通常access_token在内存refresh_token在httpOnly cookie请求携带access_tokenaccess_token过期时接口返回401前端调用刷新接口携带refresh_token换取新access_token重试原请求无感刷新实现letisRefreshingfalseletpendingRequests[]axios.interceptors.response.use(responseresponse,asyncerror{if(error.response?.status401!error.config._retry){if(isRefreshing){// 等待刷新完成returnnewPromise(resolve{pendingRequests.push(()resolve(axios(error.config)))})}error.config._retrytrueisRefreshingtruetry{const{access_token}awaitrefreshToken()setAccessToken(access_token)// 重试所有等待的请求pendingRequests.forEach(cbcb())pendingRequests[]returnaxios(error.config)}catch{// 刷新失败跳转登录redirectToLogin()}finally{isRefreshingfalse}}returnPromise.reject(error)})五、无感刷新下的请求队列问题分页错乱问题场景用户请求第1页数据page1此时access_token过期请求进入等待队列用户继续点击下一页page2也进入等待队列token刷新成功后两个请求同时发出页面同时显示两页数据错乱解决方案方案1请求去重推荐// 为每个请求生成唯一key相同key的请求只保留最后一个constrequestMapnewMap()functiondedupeRequest(config){constkey${config.method}_${config.url}_${JSON.stringify(config.params)}if(requestMap.has(key)){// 取消上一个相同请求requestMap.get(key).cancel()}constcancelTokennewCancelToken(c{requestMap.set(key,{cancel:c})})return{...config,cancelToken}}方案2请求队列只保留最新letlatestRequestnullfunctionenqueueRequest(requestFn){latestRequestrequestFn}functionflushQueue(){if(latestRequest){latestRequest()latestRequestnull}}方案3禁用刷新期间的交互刷新时显示loading遮罩禁止用户操作。六~七项目差异与AI关联略八、AI对话上下文记忆的实现回答思路核心是将历史对话作为上下文传递给模型。实现方式前端维护消息数组messages [{ role: user, content: ... }, { role: assistant, content: ... }]每次请求携带历史消息POST /api/chat { messages: [...messages, newUserMessage] }限制上下文长度超出token限制时截断或压缩早期消息摘要压缩历史过长时调用模型生成摘要替代原始消息constMAX_TOKENS4000functionbuildContext(messages,newMessage){letcontext[...messages,newMessage]lettokensestimateTokens(context)while(tokensMAX_TOKENScontext.length1){// 移除最早的非系统消息constremovedcontext.shift()if(removed.role!system){tokensestimateTokens(context)}}returncontext}九、SSE详解与WebSocket区别回答思路参考之前面经。区别维度SSEWebSocket方向单向服务端→客户端双向协议HTTPWS/WSS自动重连内置手动实现数据格式文本UTF-8文本/二进制为什么ChatGPT用SSE对话是单向流模型生成→用户接收不需要双向实现简单基于HTTP自动重连网络波动时体验好十、为什么AI对话需要流式输出回答思路用户体验 实时反馈。原因减少等待焦虑逐字输出让用户感知到“模型在工作”提前展示结果用户可以提前阅读不必等全部生成可中断性用户发现回答不对时可以提前停止长文本友好生成1000字不需要等待10秒才看到内容十一、前端埋点SDK实现回答思路一个完整的埋点SDK需要包含数据采集、上报、配置等模块。核心功能classTracker{constructor(options){this.appIdoptions.appIdthis.reportUrloptions.reportUrlthis.queue[]this.timernull}// 初始化监听全局错误、路由变化init(){this.listenErrors()this.listenRoute()this.startBatchTimer()}// 手动埋点track(eventName,properties{}){this.queue.push({event:eventName,properties,timestamp:Date.now(),url:location.href,ua:navigator.userAgent})}// 批量上报batchReport(){if(this.queue.length0)returnconstdata[...this.queue]this.queue[]navigator.sendBeacon(this.reportUrl,JSON.stringify(data))}// 定时批量发送startBatchTimer(){this.timersetInterval(()this.batchReport(),3000)}// 页面关闭时立即发送beforeUnload(){this.batchReport()}// 监听性能指标reportPerformance(){constperfperformance.getEntriesByType(navigation)[0]this.track(page_performance,{dns:perf.domainLookupEnd-perf.domainLookupStart,tcp:perf.connectEnd-perf.connectStart,ttfb:perf.responseStart-perf.requestStart,domReady:perf.domContentLoadedEventEnd-perf.fetchStart,load:perf.loadEventEnd-perf.fetchStart})}}十二、Web性能指标详解指标全称含义标准FPFirst Paint第一个像素绘制到屏幕无硬性标准FCPFirst Contentful Paint第一个内容文本/图片绘制≤1.8sLCPLargest Contentful Paint最大内容绘制完成≤2.5sINPInteraction to Next Paint交互延迟点击/键盘响应≤200msCLSCumulative Layout Shift累计布局偏移≤0.1获取方式newPerformanceObserver((list){for(constentryoflist.getEntries()){console.log(entry.name,entry.startTime)}}).observe({entryTypes:[paint,largest-contentful-paint,layout-shift]})十三、最重要的性能指标回答思路取决于业务类型没有标准答案。示例回答“对于内容型网站新闻、博客我认为LCP最重要因为它直接影响用户看到主要内容的速度。对于交互型应用后台管理系统INP最重要因为用户需要频繁点击、输入响应延迟会严重影响操作体验。”十四、优化SPA应用白屏回答思路白屏是指从输入URL到看到内容的时间。优化方向减少首屏资源大小路由懒加载React.lazy()代码分割按页面拆分chunkTree shaking移除未使用代码优化加载顺序关键CSS内联非关键脚本异步加载async/defer预加载关键资源link relpreload骨架屏在内容加载前展示占位图减少用户感知等待服务端渲染SSR直出HTML无需等待JS执行使用缓存强缓存、Service Worker缓存静态资源CDN加速静态资源走CDN十五、Vue、React、Svelte框架对比主观回答思路根据实际使用情况回答展现思考。对比React生态最丰富适合大型应用需要手动优化memo/useMemoVue上手简单响应式自动依赖收集官方生态完善Svelte编译时框架无虚拟DOM打包体积小适合中小型项目十六、React中为什么需要单标签Fragment回答思路React组件必须返回单个根元素。原因React的虚拟DOM diff算法基于树结构每个组件返回的JSX必须是一个节点否则无法进行diff比较。解决方案使用div包裹会多一层DOM使用React.Fragment或 /不产生额外DOM节点// 错误相邻JSX元素 return ( h1Title/h1 pContent/p ) // 正确用Fragment包裹 return ( h1Title/h1 pContent/p / )十七、缓存机制回答思路从浏览器缓存、HTTP缓存、服务端缓存多维度说明。浏览器缓存localStorage/sessionStorage键值对存储IndexedDB大量结构化数据HTTP缓存强缓存Cache-Control: max-age3600缓存期间不发请求协商缓存ETag/If-None-MatchLast-Modified/If-Modified-Since返回304CDN缓存边缘节点缓存静态资源Service Worker缓存拦截请求返回缓存支持离线十八、HTTPS建立连接原理回答思路HTTPS HTTP TLS/SSL。TLS握手流程Client Hello客户端发送支持的加密套件、随机数Server Hello服务端选择套件、发送服务端随机数 证书验证证书客户端验证证书有效性密钥交换客户端生成Pre-Master Secret用公钥加密发送生成会话密钥双方用随机数 Pre-Master生成对称密钥加密通信后续数据用会话密钥加密传输关键点非对称加密用于交换密钥对称加密用于实际数据传输。十九、HTTP版本区别版本特点问题HTTP/1.0短连接每次请求建立TCP效率低HTTP/1.1长连接Keep-Alive、管道化队头阻塞HTTP/2多路复用、头部压缩、服务器推送仍受TCP队头阻塞影响HTTP/3基于UDPQUIC协议0-RTT连接较新兼容性待完善多路复用一个TCP连接上可以并发多个请求和响应。二十、AI工具使用回答思路诚实回答使用过的工具。常见工具Copilot/Cursor代码补全、生成ChatGPT/Claude调试问题、学习、代码审查通义灵码国内替代V0/bolt.newUI生成使用方式生成重复性代码、调试错误、优化建议、学习新技术。知识点速查表知识点核心要点Monorepopnpm workspace/Nx/Turborepo按功能拆分packages双tokenaccess_token短期 refresh_token长期401自动刷新分页错乱刷新期间多个请求堆积导致数据错乱解决方案请求去重、禁用交互上下文记忆维护messages数组超长时截断或摘要压缩SSE vs WS单向/双向、HTTP/WS协议、自动重连、AI场景选SSE流式输出减少焦虑、提前展示、可中断埋点SDK数据采集、批量上报、sendBeacon、性能监听性能指标FP/FCP/LCP/INP/CLSLCP内容型最重要、INP交互型最重要SPA白屏优化懒加载、内联CSS、骨架屏、SSR、缓存、CDNFragmentReact需单根节点Fragment不产生额外DOM缓存机制本地存储、HTTP缓存强缓存/协商缓存、CDN、Service WorkerHTTPS握手非对称交换密钥对称加密传输HTTP版本1.1长连接、2多路复用、3基于UDP 最后一句腾讯这场一面是一场“实战派”面试。从双token无感刷新的分页错乱bug到AI对话的上下文记忆从埋点SDK设计到HTTP版本演进每一题都在考察你是否具备解决真实业务问题的能力。面试官不是在考八股而是在看你的工程化思维和系统设计能力。能扛住这样的追问说明你离“生产级”前端工程师又近了一步。