1. 腾讯面试不考偏题考的是背八股背后的因果链1.1 一场典型的腾讯前端面试长什么样先说个容易误解的点很多人把前端面试题理解成背八股文但腾讯这类大厂面试官其实对背诵式回答非常敏感。我参与过不少前端岗位的面试评审也经常帮团队出笔试题一个很直观的感受是面试官真正想考察的不是你知道多少个名词而是你能不能用一条因果链把知识点串起来。以最常见的闭包问题为例。低分段回答是闭包就是函数嵌套函数内部函数能访问外部函数的变量中分段回答是函数执行时会创建执行上下文闭包会让外部函数的作用域被内部函数引用导致外层作用域不销毁高分段回答则会在这个基础上立刻把它和实际场景挂钩——比如循环里用 var 绑定事件最后打印的都是同一个值本质就是所有事件处理函数共享了同一个词法环境用 let 能解决是因为 let 的每一次迭代会创建新的块级作用域。你看这就是三个层次的差别。腾讯的面试官尤其是二面、三面的技术 Leader非常喜欢沿着一条链路往下追先给一个基础题你答完他追问为什么你解释完他再追问有没有踩到过相关坑最后落到项目里去验证。整个面试过程与其说是在打分不如说是在探测你的知识边界和思维习惯。所以准备腾讯前端面试题时我建议你把重心从记住答案挪到建立因果链上。1.2 面试官在简历上划线的顺序如果把一场腾讯前端面试拆开来看面试官脑子里其实有一套默认的筛选顺序。下面是我根据实际经验总结出来的关注层级也对应着你准备时的优先级层级考察内容常见问法判断依据第一层JS 语言功底手写 call/apply/bind、深拷贝、防抖节流写不写得出来能否处理边界第二层异步与事件循环Promise.all 的实现、宏任务微任务输出顺序能否手推代码执行顺序第三层浏览器/网络原理URL 输入到页面展示、缓存优先级、跨域是否能讲清链路而不是背名词第四层框架理解深度Vue 响应式原理、React diff 与 fiber能否解释为什么这样设计第五层性能/安全/工程化首屏优化、XSS 防护、构建提速、微前端是否有实战数据而非理论复述第六层场景与项目权限设计、大表格卡顿、线上故障排查能否给出可落地的完整方案注意这份顺序不是固定的。应届生和 1-3 年经验的人面试官会比较集中在第一到第四层3-5 年及以上的人第五、第六层权重会明显增大。尤其是社招腾讯的面试官非常看重你过去做过的项目到底是不是你主导的所以简历里不要只写参与了 XX 系统开发而要写清楚解决了什么问题、用了什么方案、取得了什么可量化的收益。面试时项目被深挖的概率远大于你觉得的这也是后面第六部分我会重点讲的原因。2. JS 基础被问成准手写题的三种形态2.1 闭包和 this别只背定义要说清执行上下文在腾讯前端面试题里闭包和 this 基本是绑定出现的而且大概率会以手写题或代码输出题的形式出现。常见的题目有请手写一个 call 函数说说下面代码 this 指向谁用闭包实现一个只执行一次的函数。先说两个高频误区。误区一以为闭包只是函数嵌套。这个看法太表面。闭包的本质是函数在定义时记住了它所在词法作用域中的变量引用即使外层函数已经返回这些变量也不会被垃圾回收因为内部函数的环境里还持有对它们的引用。面试官想听的是这一层记忆机制。误区二以为 this 是定义时确定的。很多人背口诀谁调用就指向谁这在大多数情况下没错但面试官一旦追问那箭头函数呢就要说到 execute context 的差异。普通函数的 this 是在调用时根据调用方式动态绑定的而箭头函数没有自己的 this它继承外层词法作用域的 this。手写 bind 的时候背后原理也用到了 this 绑定规则的组合bind 返回一个新函数这个函数内部通过 apply 绑定指定的 this并且支持预设参数。我整理一个很经典的输出题你可以自己测一下var name global; const obj { name: obj, say: function () { console.log(this.name); }, sayArrow: () { console.log(this.name); }, }; obj.say(); // 输出什么 obj.sayArrow(); // 输出什么 const fn obj.say; fn(); // 输出什么答案是obj、global、global。我在面试中见过很多人第一题都能答对但第二、第三题开始崩。第二题的关键在于箭头函数定义在对象字面量中它的外层作用域是全局所以 this 指向全局第三题是因为把函数引用赋给 fn 后调用方式变成了普通函数调用this 重新指向全局。一道题能把作用域链、调用方式、箭头函数特性全部串起来这就是腾讯面试官喜欢的考法。2.2 异步链路手写 Promise 的典型追问路线JS 异步这块是前端面试题中最容易拉开差距的地方。腾讯面试中有一个出镜率极高的组合拳先让你实现一个简易 Promise再让你手写 Promise.all最后让你分析一段混合了 setTimeout、Promise、async/await 代码的输出顺序。为什么这么考因为 Promise 的实现几乎涵盖了一个工程师对 JS 核心机制的综合理解回调如何存储、状态如何流转、微任务如何调度、then 如何链式返回。我建议你至少能手写一个简化版 Promise核心思路是构造函数接收一个 executor立即执行内部维护 pending/fulfilled/rejected 三种状态和 value/reasonresolve 和 reject 只能触发一次状态一旦变更不可逆then 中的回调被 push 进回调数组等待状态变更后逐个执行每次 then 返回一个新 Promise实现链式调用。这里面状态不可逆和返回新 Promise是两个最容易被问到的点。很多人写到最后会把 then 里创建的新 Promise 和原来的 Promise 搞混导致链式调用完全失效。面试官看到你能把这两点讲明白基本就会认为你真正理解了 Promise 而不是背了一版答案。Promise.all 的考察点也很统一输入一个 Promise 数组要求全部成功返回结果数组只要有一个失败就立即失败。边界条件是参数可能不是 Promise、数组为空时返回已解决的 Promise、要保留结果顺序。我建议你写的时候用索引存储结果而不是 push这样顺序不会乱。2.3 事件循环宏任务与微任务的执行预判事件循环是异步链路的底层支撑几乎每个前端面试题合集里都会出现。腾讯面试官偏好给一段输出题考察你对执行顺序的预判能力。判断顺序时记住三个核心规则同步代码先执行遇到异步任务就挂起微任务Promise.then、queueMicrotask、MutationObserver优先级高于宏任务setTimeout、setInterval、I/O、UI 渲染每一轮事件循环先清空整个微任务队列再执行一个宏任务如果在执行宏任务过程中又产生了微任务这些微任务会在本轮循环结束前执行而不是推到下一轮。这里有一个很反直觉的点我建议你专门记一下async/await 本质也是 Promise 语法糖。await后面的代码相当于被包进了 Promise.then 的回调里因此也是微任务。很多人看着 async 函数就以为它是同步的一分析输出顺序就错问题就出在这。给你一道我常用的考察题console.log(a); setTimeout(() console.log(b), 0); Promise.resolve().then(() { console.log(c); Promise.resolve().then(() console.log(d)); }); console.log(e);输出顺序是 a - e - c - d - b。关键是 c 和 d 虽然都是微任务但 d 是在 c 执行后才注册的所以排在 c 之后而 b 作为宏任务即使 setTimeout 是 0 毫秒也要等当前这一轮微任务队列清空后才执行。面试官通过这类题目其实是在验证你对队列和执行时机的微观理解。3. 浏览器与网络层地址栏输入 URL 到页面展示的完整回答怎么组织3.1 渲染链路从字节流到像素从输入 URL 到页面展示发生了什么是前端面试题里的经典开胃菜但不同的人答出来的质量天差地别。低质量回答大概能说到 DNS 解析、请求响应、浏览器渲染高质量回答需要把浏览器内核的流水线讲清楚。我建议按这样的链路组织用户在地址栏输入 URL - 浏览器进程判断是搜索词还是 URL - 如果是合法 URL进行 DNS 解析涉及本地缓存、系统缓存、DNS 服务器递归查询- 拿到服务器 IP 后与服务器建立 TCP 连接三次握手- 如果是 HTTPS 还会多一次 TLS 握手协商密钥 - 浏览器发送 HTTP 请求 - 服务器返回 HTML 响应 - 浏览器拿到字节流后进行解码 - HTML 解析器将字节流转换成 Token再构建 DOM 树 - 同时 CSS 解析器构建 CSSOM 树 - DOM 树和 CSSOM 树合并成渲染树Render Tree- layout 阶段计算每个节点的几何位置 - paint 阶段绘制像素 - composite 阶段合成图层最终显示在屏幕上。这中间有几个细节面试官非常喜欢追问。第一个是CSS 是否会阻塞 DOM 解析。答案是 CSS 不会阻塞 DOM 解析但会阻塞渲染因为渲染树需要 CSSOM所以 CSS 通常放在 head 里尽早加载避免页面长时间白屏。第二个是JavaScript 是否会阻塞 DOM 解析。答案是会普通 script 脚本在解析到时会暂停 DOM 的继续解析所以要把 script 放在 body 末尾或者用 defer、async 属性。第三个是回流和重绘的区别。回流reflow是几何属性变化导致的重新布局代价极大重绘repaint只涉及外观属性变化不需要重新计算布局。动画性能优化中频繁提到的用 transform 代替 left/top就是因为 transform 可以走合成器compositor线程不需要触发回流动画直接在 GPU 上合成这也是浏览器渲染层里很关键的优化依据。3.2 缓存与协议HTTP 缓存优先级、HTTP/2 多路复用与队头阻塞网络这块的出题重点第一梯队是 HTTP 缓存第二梯队是跨域第三梯队是 HTTP 协议对比。HTTP 缓存题有一个高频考点各缓存字段的优先级排序。我给一张最简洁的对照表缓存场景优先级关键 Header强制缓存与协商缓存强制缓存优先Cache-Control强 Expires协商缓存内部基于文件内容优先ETag/If-None-Match Last-Modified/If-Modified-Since强制缓存内部的优先级精确指令优先no-cache max-age Expires这里的细节要理顺Cache-Control 和 Expires 都是强制缓存的头但 Cache-Control 优先级更高。强制缓存生效时浏览器根本不会发请求直接读本地缓存状态码显示 200 from disk cache/memory cache。当强制缓存过期后浏览器携带 If-None-Match 或 If-Modified-Since 发起请求服务器判断资源未变时返回 304这就是协商缓存。还有一个常见疑惑no-cache 并不是不缓存而是缓存前必须先向服务器验证这一点很多面试者会答错。关于 HTTP/2面试官会问多路复用怎么解决 HTTP/1.1 的队头阻塞问题。HTTP/1.1 在一个 TCP 连接上只能串行处理请求虽然浏览器会开多个连接并行但仍然受限于 6 个左右的连接数HTTP/2 引入了二进制分帧层多个请求并行地在同一个连接上传输每个请求被拆分成帧允许交错发送。但 HTTP/2 也有缺陷就是底层 TCP 丢包时所有复用流都会受影响这叫 TCP 层队头阻塞。所以 HTTP/3 改用基于 UDP 的 QUIC从根源上规避了这个问题。你能把版本演进的原因链讲到这个深度面试官一般就很满意了。3.3 跨域问题CORS 预检请求背后的安全动机跨域在前端日常开发中几乎避不开腾讯面试题也非常爱考。但面试官真正期待的不是JSONP 可以解决跨域这种几句话就答完的答案而是希望你能把浏览器的同源策略和 CORS 机制讲清楚。建议从为什么要有同源策略切入浏览器限制不同源的文档或脚本读写彼此的资源是为了防止恶意网站访问你在其他网站上的数据这是一道安全屏障。然后引出 CORS跨域资源共享是服务端主动放开限制的机制。需要区分简单请求与预检请求当请求方法是 GET/POST/HEAD且 content-type 是 text/plain、multipart/form-data、application/x-www-form-urlencoded 之一并且没有自定义头时属于简单请求直接发请求并在响应头里带 Access-Control-Allow-Origin否则浏览器会先发一个 OPTIONS 预检请求询问服务器是否允许这次跨域请求。实战中还常遇到两个相关点。第一是开发环境下的代理转发原理是让同源的开发服务器去请求跨域接口把跨域问题揽到服务端这跟生产环境用 Nginx 配置反向代理是一套思路。第二是跨域情况下携带 Cookie需要前端设置 withCredentials 为 true同时服务端返回 Access-Control-Allow-Credentials: true并且 Access-Control-Allow-Origin 不能设置为 *必须明确指定来源。这两个点都是项目里真正踩过的坑能举出实际例子比空谈概念有说服力得多。4. 框架必考题Vue 和 React 的为什么会这样设计4.1 Vue 响应式从 Object.defineProperty 到 Proxy 的变化逻辑Vue 相关的前端面试题里问得最多的一定是Vue 2 和 Vue 3 的响应式原理有什么区别。这个问题不需要我多说但很多人的回答停留在Vue 2 用 Object.definePropertyVue 3 用 Proxy这一句明显不够。面试官想听的是三层递进第一层实现机制。Vue 2 在初始化时遍历 data 的属性用 Object.defineProperty 把它们转为 getter/setter同时每个属性对应一个依赖收集器Depgetter 中收集依赖也就是 watchersetter 触发时通知 watcher 更新视图。但这种方式有天然局限对象新增属性、删除属性无法被拦截数组索引变更和数组长度变更也无法自动检测所以 Vue 2 提供了 Vue.set / this.$set 来弥补。第二层Vue 3 为什么改用 Proxy。因为 Proxy 可以代理整个对象对对象的读取、写入、删除、in 操作符、Object.keys 等都能拦截所以不管是新增属性、删除属性还是数组操作都不再有检测不到的问题。同时 Vue 3 的依赖收集粒度从属性级细化到了副作用函数级配合 effect 和 track/trigger 机制实现了更精确的更新。第三层也是比较拉的层次为什么 Proxy 不能直接用 polyfill 替代。因为 Proxy 是 ES6 提供的原生能力它拦截底层操作这是 defineProperty 做不到的。面试官可能顺着问那 Vue 3 会不会因为 Proxy 导致兼容性问题答案是它只支持支持 Proxy 的环境不再兼容 IE11。你如果能主动说出这个结论面试官会认为你真的去了解过这个 API 而非只看过总结笔记。4.2 React 的渲染机制虚拟 DOM 和 fiber 解决什么问题React 相关的高频题目绕不开虚拟 DOM、diff 算法、fiber、setState。先说虚拟 DOM。很多人解释为用 JS 对象模拟真实 DOM减少直接操作 DOM 的性能开销。这个说法不完全错但面试官心里其实更看重跨平台和可编程这一层虚拟 DOM 是真实 UI 的一种抽象描述它让框架可以在任意宿主环境中渲染浏览器、Native、Canvas同时让更新逻辑变成了比较新旧虚拟 DOM 的差异来最小化真实 DOM 操作。diff 算法这块不需要背整个复杂度较高的算法细节但三条核心策略一定要说清同层比较不同层级的节点不跨层复用这极大降低了算法复杂度key 的作用列表 diff 时通过 key 识别节点身份保证复用和正确重排不写 key 或滥用 index 作为 key容易造成组件状态错乱和性能浪费双端对比React 在遍历子节点时从两端同时进行对比减少移动次数。Vue 2 的 diff 也有类似的特性但实现细节不同细节差异也是面试官喜欢问的。fiber 是一个容易让很多人卡住的知识点。它的出现本质上要解决页面更新时不能打断、长时间占用主线程会掉帧的问题。React 把整棵虚拟 DOM 树的协调reconciliation拆成可打断的可执行单元每个 fiber 节点就是一个工作单元配合 requestIdleCallback 或 React 自己调度的任务优先级机制把破碎的工作切分到浏览器空闲时间去执行从而保证高优先级的交互响应不被长任务阻塞。至于 setState 到底是同步还是异步我在腾讯技术社区看到过很多版本。正常 React 事件处理函数中 setState 是异步批量更新的因为 React 会把它放进更新队列统一批处理提升性能但在 setTimeout、原生事件或 Promise 回调里React 控制不了执行时机更新会变成同步的。React 18 的自动批处理进一步把更多场景下的更新都批量化了这也是版本演进里很关键的变化。回答的时候最好点出批处理是为了减少不必要的渲染次数这一核心动机。4.3 站在源码之外对比 Vue 与 React 的核心差异当被问到 Vue 和 React 怎么选、你更熟悉哪个时很多人的回答是我更熟 VueReact 我了解过。这句话太浪费展现自己的机会。一个更好的策略是讲清楚两者设计哲学上最本质的差异。我可以给你一个很直接的角度响应式追踪的差异决定了编程心智的差异。Vue 采用响应式系统数据变更后框架能够精准知道哪些组件依赖了这份数据自动更新开发门槛低代码更像声明式描述状态与视图关系React 引入不可变数据概念状态更新必须通过 setState 提供一个新的状态值然后从根节点开始重新协调这让数据流更可控配合函数式组件和 Hook更容易做状态管理和性能优化。Vue 对开发友好、内置指令多、模板灵活React 对纯函数可预测有更严格的追求由此衍生出了 useEffect、useMemo、useCallback 这些手动控制副作用的 Hook。面试官真正想听的是你能不能跳出哪个好用的主观感受站在架构层面说出本质区别。我建议你准备一个相对完整的口头表达Vue 通过依赖收集做到按需更新React 通过虚拟 DOM 协调和 diff 达到 UI 同步Vue 的优化更多由框架自动完成React 的优化则更多依赖开发者对渲染时机和 memoization 机制的理解。两者在大型项目中都能胜任选型往往取决于团队技术栈和工程现状而不是单纯比较性能数值。5. 性能优化、前端安全、大型项目场景能不能进 H2 的关卡5.1 性能指标与优化优先级先解决 80% 的体感问题前端性能优化是一个面试中百问不厌的话题但很多人的答案停留在减少请求、压缩图片、用 CDN这种泛泛而谈。腾讯面试官尤其是二面技术面往往希望听到你有指标意识和优先级判断。先说指标。核心 Web 指标里四个最具代表性的FCPFirst Contentful Paint表示页面首次绘制出内容的时间LCPLargest Contentful Paint表示最大内容绘制时间直接反映用户看到主体内容的速度FID/INP 表示从用户交互到浏览器响应的延迟CLS 表示视觉稳定性也就是页面元素跳动的程度。优化前要先明确指标因为没有指标的优化无法评估效果。再按优先级说优化手段。加载侧首屏先拆包把首屏不需要的组件、图表库、第三方 SDK 放到动态导入里利用 code splitting 避免一个巨大的 bundle 拖垮加载速度静态资源上 CDN开启 Gzip/Brotli 压缩图片用 WebP/AVIF 并做响应式尺寸关键 CSS 内联非关键 CSS 异步加载。渲染侧减少 DOM 层级、避免强制同步布局layout thrashing、长列表用虚拟滚动、事件委托、防抖节流。运行侧动画采用 transform/opacity 而不是 top/left减少大图内存占用批量操作 DOM。做优化题时加分项是提供一个真实案例。比如我在项目中做过的一个优化某管理后台首页首屏 LCP 从 4.2 秒降到 1.8 秒做的事不过是把 echarts 从首屏 bundle 中拆出来按需加载、把路由级的组件懒加载、去掉了一个阻塞渲染的大字体文件。这个故事比说十个理论概念都有用。5.2 前端安全XSS 与 CSRF 的防护闭环安全类题目在高频面试题中出现概率很高尤其是一面笔试之后。最常考的就是 XSS 和 CSRF。XSS跨站脚本攻击的核心是恶意脚本被注入并执行。常见分三类存储型恶意脚本存在数据库用户访问页面时被加载比如论坛评论、反射型恶意脚本拼到 URL 参数里服务端原样返回执行、DOM 型前端 DOM 操作导致脚本执行不经过服务端。防护思路是一条闭环不要信任任何外部输入渲染文本内容时做 HTML 转义富文本场景用白名单机制过滤标签和属性设置 CSPContent Security Policy限制脚本来源对敏感 Cookie 设置 HttpOnly 和 SameSite重要操作增加验证码或二次确认缩小被脚本操控的破坏面。CSRF跨站请求伪造的核心是借用用户身份发起非本意的请求。攻击者让用户在不知情的情况下向已登录的网站发起请求浏览器会自动携带 Cookie所以请求看起来是合法的。防护手段主要有三请求头校验检查 Origin 和 RefererCSRF Token服务端把随机 token 种到页面里客户端提交请求时带上服务端校验SameSite 属性限制第三方 Cookie 的携带。还有一个策略是现在很多项目用 token 而不是 Cookie 做身份认证天然降低 CSRF 风险。面试时能区分清楚XSS 利用的是对用户输入不信任CSRF 利用的是对浏览器自动携带凭证的信任就已经达到比较深的层次了。5.3 大型项目场景题权限、字典、表格性能这种题怎么答2025 年的腾讯前端面试题里场景题的占比越来越高。这类题目的特点是不存在标准答案面试官看的是你的方案完整度。拿权限设计来说这是一个非常典型的高频场景题。完整的权限方案一般分三层路由级权限登录后根据用户角色或权限码动态生成可访问的路由表再通过路由守卫或 render 逻辑控制页面级权限在菜单渲染时根据权限集过滤菜单项按钮级权限封装一个权限指令如 Vue 的 v-permission 或 React 的高阶组件组件渲染前检查当前用户是否有该按钮的权限码没有则移除。字典管理的场景我见得也不少很多团队在后台管理系统里维护性别、状态、类型这类固定枚举值。字典管理的作用是把枚举值从代码里抽离出来存到后端配置表或前端全局配置中同时提供缓存和懒加载机制。面试官会顺着问字典变了怎么通知前端答案是轮询、WebSocket 推送、接口版本号比对。这个问题本质上是在考察你对配置化和稳定性的理解。大表格性能优化也是高频场景题。回答可以从两个方向展开数据量小但渲染卡是渲染次数过多用 useMemo/memo 或 Vue 的计算属性减少重复计算数据量大是渲染节点太多用虚拟滚动只渲染可视区域。配合节流、防抖、事件委托、immutable 数据比对等细节一套完整方案就出来了。6. 工程化与微前端2025 年面试中的可选项变必选项6.1 webpack 原理和构建提速工程化题在腾讯的前端面试题里已经是社招的必考区域。webpack 相关的几个问题出现率极高构建流程是怎样的、Loader 和 Plugin 的区别、如何优化构建速度。构建流程可以概括为初始化参数 - 编译入口 - 从入口出发递归解析模块依赖 - 对每个模块调用对应的 Loader 进行转换 - 在转换过程中 Plugin 可以根据事件钩子做各种扩展比如生成 HTML、压缩代码、提取公共模块- 根据依赖关系生成 chunk - 输出 bundle。Loader 的本质是一个转换器把非 JS 资源转成 webpack 能处理的模块Plugin 的本质是一个基于事件流的扩展器在 webpack 生命周期里注入自定义逻辑。构建提速的常见手段包括用 thread-loader / worker 多进程处理耗时的模块编译用 HappyPack旧项目/ esbuild-loader 取代 babel-loader 做转译配置 module.noParse 跳过不需要解析的库优化 resolve.alias 和处理 ext 后缀列表开发环境下开缓存持久化。如果面试官继续往下聊 Vite要能接住Vite 为什么快这个问题Vite 在开发环境下利用浏览器原生 ES Module按需加载启动和热更新都不需要预先打包全部模块这才是它比 webpack-dev-server 快的核心原因。6.2 Vite、微前端与全栈化倾向微前端是近两年大厂面试题里非常喜欢考的方向。核心问题通常是微前端的价值是什么、qiankun 的实现思路是什么、application 之间怎么共享依赖。微前端解决的最直接问题是多个团队、多个技术栈、多个版本的系统要在一个容器里长期共存。很多中后台系统演进了三五年老系统是 Vue 2新团队想用 React 或 Vue 3整体迁移风险太大所以用微前端将系统拆成若干独立应用各自开发部署再由主应用统一加载。qiankun 的实现思路一句话可以概括基于 single-spa 做应用加载和生命周期管理通过 import-html-entry 动态加载子应用的 HTML再利用 JS 沙箱Proxy 或快照隔离全局变量CSS 沙箱做样式隔离。和 iframe 相比微前端体验更好、通信更灵活但引入的沙箱、路由、公共依赖管理的复杂度也更高。全栈化趋势也值得在面试中提一嘴。腾讯这边很多前端团队会要求工程师能写 Node.js 中间层甚至服务端功能你在简历中如果写过 NestJS 或 Koa 项目面试官往往非常感兴趣。因为前端不再是单纯调接口的页面工程师而是要能处理 BFF 层、SSR、甚至参与到服务端的一部分逻辑。所以不要把自己局限在纯浏览器端前端工程化 Node.js 中间层 数据串讲这一套组合拳在 2026 年会更有竞争力。6.3 项目难点叙述如何把可复现和数据收益写进去我每次模拟面试时都会强调项目介绍的叙述结构决定了面试官能追问你多深。建议的叙事框架是背景 - 目标 - 方案 - 数据收益 - 复盘。比如背景运营后台有 20 万条数据的表格每次切换筛选都要卡顿两三秒用户投诉多目标将交互响应时间降到 1 秒内减少组件卡顿率方案引入虚拟滚动渲染节点从几千个降到可视区的 30 个左右优化筛选逻辑把后端过滤改成前端索引 分页加载双轨并用数据收益切换筛选从 2.8 秒降到 600 毫秒页面内存占用下降 35%复盘列表数据量继续增长后前端索引方案的瓶颈开始出现下一步应该走服务端聚合搜索。这个框架最大的价值是面试官能顺着你的表述快速定位到关键决策点接下来他会追问虚拟滚动是怎么实现的为什么不用后端分页你怎么测出 600 毫秒这个数值。每一个点你都接得住项目就变成你展示能力的舞台而不是被挑刺的对象。7. 考前一周把面经转化成自己的知识闭环7.1 从面经里提取体系而非答案搜前端面经腾讯前端面试题的时候你会看到大量类似必问 Promise、闭包、事件循环的帖子。这些是入口不是终点。我建议拿到面经后做三步加工第一步把题目归类。按 JS、浏览器、框架、网络、性能、工程化、算法把近 50 道题分成区块你会发现大部分题目其实指向同一个底层机制。比如 Promise、async/await、事件循环归到异步链路浏览器缓存、Service Worker、CDN 归到加载优化链路。第二步对每个区块建立一棵知识树。树根是底层原理树干是技术方案树枝是面试可能出现的具体题目树叶是关联的边界条件。比如异步链路这棵树树根是 JS 单线程 事件循环树干可能是 Promise/Generator/async-await树枝就是各种输出题树叶是微任务执行时机then 的回调什么时候进队列这些细节。第三步每次练习后用两句话复述。如果你能在不说话稿的情况下把事件循环的原理和输出题判断路径用两分钟讲清楚说明你真的内化了。7.2 手写题、算法题与表达练习的配比腾讯前端面试非常看中手写题和算法题后者尤其不能只靠背。算法这部分刷 LeetCode 或同类平台主要是两方面热门前 100 题尤其是数组、字符串、链表、二叉树、动态规划里的简单到中等题。场景范围上不要贪多前端够用就行但基础的复杂度分析和代码规范一定要过关。手写题我的练习顺序是call/apply/bind - 深拷贝 - 防抖节流 - Promise - Promise.all - 手写 instanceof - new 操作符 - 数组扁平化 - 柯里化 - 并发控制。每一个都要求能写出边界条件。比如深拷贝要考虑循环引用、Symbol、Date、RegExp、Map/Set 这些特殊类型防抖节流要看清楚是要求首次触发立即执行还是延迟执行。写的时候直接在白板上不要依赖 IDE 补全面试现场你只有一双手和一块屏幕。表达练习也很重要。很多知识点你心里明白但面试时组织语言一紧张就乱了。我的建议是准备一个半分钟电梯回答和三分钟完整回答的双版本。比如被问说说 Vue 3 响应式半分钟版直接给结论和核心机制三分钟版再加上 Vue 2 的局限、Proxy 的优势、依赖收集流程、以及一个实际项目中的应用场景。面试官如果只问了半分钟就能解决就不要再拖到三分钟如果他追问了你还有更长的版本可以展开。这个节奏感能让面试官觉得你的表达有层次。7.3 我的几点心得最后分享一些我复盘自己面试经历时特别想重申的体会。第一不要背答案要背逻辑链条。前端面试题更新很快但背后的计算机基础几十年没变。你只要把输入 - 处理 - 输出的链路想透题目怎么换都能接住。第二项目比八股重要。大厂面试官都是做过实际业务的人他们能从你描述项目的方式里快速判断你是不是真的做过。与其花一整天背标题党面经不如把自己做过的项目复盘三遍把每个技术决策的为什么都写成文字。第三心态上把它当成一次技术交流。面试不是被考验而是互相确认是否匹配。当面试官问出一个你没准备过的问题不要慌可以先说思路再往前推进。很多时候面试官看重的不是你能不能立刻给出标准答案而是你有没有办法基于已有知识推导出一个合理方案有没有主动沟通和拆解问题的能力。这套方法能不能让你直接走进腾讯我不能保证但它能让你在准备前不慌在回答时有条理、有深度、能落地。前端这行的知识点是无限的而面试的时间是有限的把有限的时间花在能构建系统性理解的内容上才是最值得的投入。 腾讯前端面试攻略：从JS基础到工程化全链路解析
1. 腾讯面试不考偏题考的是背八股背后的因果链1.1 一场典型的腾讯前端面试长什么样先说个容易误解的点很多人把前端面试题理解成背八股文但腾讯这类大厂面试官其实对背诵式回答非常敏感。我参与过不少前端岗位的面试评审也经常帮团队出笔试题一个很直观的感受是面试官真正想考察的不是你知道多少个名词而是你能不能用一条因果链把知识点串起来。以最常见的闭包问题为例。低分段回答是闭包就是函数嵌套函数内部函数能访问外部函数的变量中分段回答是函数执行时会创建执行上下文闭包会让外部函数的作用域被内部函数引用导致外层作用域不销毁高分段回答则会在这个基础上立刻把它和实际场景挂钩——比如循环里用 var 绑定事件最后打印的都是同一个值本质就是所有事件处理函数共享了同一个词法环境用 let 能解决是因为 let 的每一次迭代会创建新的块级作用域。你看这就是三个层次的差别。腾讯的面试官尤其是二面、三面的技术 Leader非常喜欢沿着一条链路往下追先给一个基础题你答完他追问为什么你解释完他再追问有没有踩到过相关坑最后落到项目里去验证。整个面试过程与其说是在打分不如说是在探测你的知识边界和思维习惯。所以准备腾讯前端面试题时我建议你把重心从记住答案挪到建立因果链上。1.2 面试官在简历上划线的顺序如果把一场腾讯前端面试拆开来看面试官脑子里其实有一套默认的筛选顺序。下面是我根据实际经验总结出来的关注层级也对应着你准备时的优先级层级考察内容常见问法判断依据第一层JS 语言功底手写 call/apply/bind、深拷贝、防抖节流写不写得出来能否处理边界第二层异步与事件循环Promise.all 的实现、宏任务微任务输出顺序能否手推代码执行顺序第三层浏览器/网络原理URL 输入到页面展示、缓存优先级、跨域是否能讲清链路而不是背名词第四层框架理解深度Vue 响应式原理、React diff 与 fiber能否解释为什么这样设计第五层性能/安全/工程化首屏优化、XSS 防护、构建提速、微前端是否有实战数据而非理论复述第六层场景与项目权限设计、大表格卡顿、线上故障排查能否给出可落地的完整方案注意这份顺序不是固定的。应届生和 1-3 年经验的人面试官会比较集中在第一到第四层3-5 年及以上的人第五、第六层权重会明显增大。尤其是社招腾讯的面试官非常看重你过去做过的项目到底是不是你主导的所以简历里不要只写参与了 XX 系统开发而要写清楚解决了什么问题、用了什么方案、取得了什么可量化的收益。面试时项目被深挖的概率远大于你觉得的这也是后面第六部分我会重点讲的原因。2. JS 基础被问成准手写题的三种形态2.1 闭包和 this别只背定义要说清执行上下文在腾讯前端面试题里闭包和 this 基本是绑定出现的而且大概率会以手写题或代码输出题的形式出现。常见的题目有请手写一个 call 函数说说下面代码 this 指向谁用闭包实现一个只执行一次的函数。先说两个高频误区。误区一以为闭包只是函数嵌套。这个看法太表面。闭包的本质是函数在定义时记住了它所在词法作用域中的变量引用即使外层函数已经返回这些变量也不会被垃圾回收因为内部函数的环境里还持有对它们的引用。面试官想听的是这一层记忆机制。误区二以为 this 是定义时确定的。很多人背口诀谁调用就指向谁这在大多数情况下没错但面试官一旦追问那箭头函数呢就要说到 execute context 的差异。普通函数的 this 是在调用时根据调用方式动态绑定的而箭头函数没有自己的 this它继承外层词法作用域的 this。手写 bind 的时候背后原理也用到了 this 绑定规则的组合bind 返回一个新函数这个函数内部通过 apply 绑定指定的 this并且支持预设参数。我整理一个很经典的输出题你可以自己测一下var name global; const obj { name: obj, say: function () { console.log(this.name); }, sayArrow: () { console.log(this.name); }, }; obj.say(); // 输出什么 obj.sayArrow(); // 输出什么 const fn obj.say; fn(); // 输出什么答案是obj、global、global。我在面试中见过很多人第一题都能答对但第二、第三题开始崩。第二题的关键在于箭头函数定义在对象字面量中它的外层作用域是全局所以 this 指向全局第三题是因为把函数引用赋给 fn 后调用方式变成了普通函数调用this 重新指向全局。一道题能把作用域链、调用方式、箭头函数特性全部串起来这就是腾讯面试官喜欢的考法。2.2 异步链路手写 Promise 的典型追问路线JS 异步这块是前端面试题中最容易拉开差距的地方。腾讯面试中有一个出镜率极高的组合拳先让你实现一个简易 Promise再让你手写 Promise.all最后让你分析一段混合了 setTimeout、Promise、async/await 代码的输出顺序。为什么这么考因为 Promise 的实现几乎涵盖了一个工程师对 JS 核心机制的综合理解回调如何存储、状态如何流转、微任务如何调度、then 如何链式返回。我建议你至少能手写一个简化版 Promise核心思路是构造函数接收一个 executor立即执行内部维护 pending/fulfilled/rejected 三种状态和 value/reasonresolve 和 reject 只能触发一次状态一旦变更不可逆then 中的回调被 push 进回调数组等待状态变更后逐个执行每次 then 返回一个新 Promise实现链式调用。这里面状态不可逆和返回新 Promise是两个最容易被问到的点。很多人写到最后会把 then 里创建的新 Promise 和原来的 Promise 搞混导致链式调用完全失效。面试官看到你能把这两点讲明白基本就会认为你真正理解了 Promise 而不是背了一版答案。Promise.all 的考察点也很统一输入一个 Promise 数组要求全部成功返回结果数组只要有一个失败就立即失败。边界条件是参数可能不是 Promise、数组为空时返回已解决的 Promise、要保留结果顺序。我建议你写的时候用索引存储结果而不是 push这样顺序不会乱。2.3 事件循环宏任务与微任务的执行预判事件循环是异步链路的底层支撑几乎每个前端面试题合集里都会出现。腾讯面试官偏好给一段输出题考察你对执行顺序的预判能力。判断顺序时记住三个核心规则同步代码先执行遇到异步任务就挂起微任务Promise.then、queueMicrotask、MutationObserver优先级高于宏任务setTimeout、setInterval、I/O、UI 渲染每一轮事件循环先清空整个微任务队列再执行一个宏任务如果在执行宏任务过程中又产生了微任务这些微任务会在本轮循环结束前执行而不是推到下一轮。这里有一个很反直觉的点我建议你专门记一下async/await 本质也是 Promise 语法糖。await后面的代码相当于被包进了 Promise.then 的回调里因此也是微任务。很多人看着 async 函数就以为它是同步的一分析输出顺序就错问题就出在这。给你一道我常用的考察题console.log(a); setTimeout(() console.log(b), 0); Promise.resolve().then(() { console.log(c); Promise.resolve().then(() console.log(d)); }); console.log(e);输出顺序是 a - e - c - d - b。关键是 c 和 d 虽然都是微任务但 d 是在 c 执行后才注册的所以排在 c 之后而 b 作为宏任务即使 setTimeout 是 0 毫秒也要等当前这一轮微任务队列清空后才执行。面试官通过这类题目其实是在验证你对队列和执行时机的微观理解。3. 浏览器与网络层地址栏输入 URL 到页面展示的完整回答怎么组织3.1 渲染链路从字节流到像素从输入 URL 到页面展示发生了什么是前端面试题里的经典开胃菜但不同的人答出来的质量天差地别。低质量回答大概能说到 DNS 解析、请求响应、浏览器渲染高质量回答需要把浏览器内核的流水线讲清楚。我建议按这样的链路组织用户在地址栏输入 URL - 浏览器进程判断是搜索词还是 URL - 如果是合法 URL进行 DNS 解析涉及本地缓存、系统缓存、DNS 服务器递归查询- 拿到服务器 IP 后与服务器建立 TCP 连接三次握手- 如果是 HTTPS 还会多一次 TLS 握手协商密钥 - 浏览器发送 HTTP 请求 - 服务器返回 HTML 响应 - 浏览器拿到字节流后进行解码 - HTML 解析器将字节流转换成 Token再构建 DOM 树 - 同时 CSS 解析器构建 CSSOM 树 - DOM 树和 CSSOM 树合并成渲染树Render Tree- layout 阶段计算每个节点的几何位置 - paint 阶段绘制像素 - composite 阶段合成图层最终显示在屏幕上。这中间有几个细节面试官非常喜欢追问。第一个是CSS 是否会阻塞 DOM 解析。答案是 CSS 不会阻塞 DOM 解析但会阻塞渲染因为渲染树需要 CSSOM所以 CSS 通常放在 head 里尽早加载避免页面长时间白屏。第二个是JavaScript 是否会阻塞 DOM 解析。答案是会普通 script 脚本在解析到时会暂停 DOM 的继续解析所以要把 script 放在 body 末尾或者用 defer、async 属性。第三个是回流和重绘的区别。回流reflow是几何属性变化导致的重新布局代价极大重绘repaint只涉及外观属性变化不需要重新计算布局。动画性能优化中频繁提到的用 transform 代替 left/top就是因为 transform 可以走合成器compositor线程不需要触发回流动画直接在 GPU 上合成这也是浏览器渲染层里很关键的优化依据。3.2 缓存与协议HTTP 缓存优先级、HTTP/2 多路复用与队头阻塞网络这块的出题重点第一梯队是 HTTP 缓存第二梯队是跨域第三梯队是 HTTP 协议对比。HTTP 缓存题有一个高频考点各缓存字段的优先级排序。我给一张最简洁的对照表缓存场景优先级关键 Header强制缓存与协商缓存强制缓存优先Cache-Control强 Expires协商缓存内部基于文件内容优先ETag/If-None-Match Last-Modified/If-Modified-Since强制缓存内部的优先级精确指令优先no-cache max-age Expires这里的细节要理顺Cache-Control 和 Expires 都是强制缓存的头但 Cache-Control 优先级更高。强制缓存生效时浏览器根本不会发请求直接读本地缓存状态码显示 200 from disk cache/memory cache。当强制缓存过期后浏览器携带 If-None-Match 或 If-Modified-Since 发起请求服务器判断资源未变时返回 304这就是协商缓存。还有一个常见疑惑no-cache 并不是不缓存而是缓存前必须先向服务器验证这一点很多面试者会答错。关于 HTTP/2面试官会问多路复用怎么解决 HTTP/1.1 的队头阻塞问题。HTTP/1.1 在一个 TCP 连接上只能串行处理请求虽然浏览器会开多个连接并行但仍然受限于 6 个左右的连接数HTTP/2 引入了二进制分帧层多个请求并行地在同一个连接上传输每个请求被拆分成帧允许交错发送。但 HTTP/2 也有缺陷就是底层 TCP 丢包时所有复用流都会受影响这叫 TCP 层队头阻塞。所以 HTTP/3 改用基于 UDP 的 QUIC从根源上规避了这个问题。你能把版本演进的原因链讲到这个深度面试官一般就很满意了。3.3 跨域问题CORS 预检请求背后的安全动机跨域在前端日常开发中几乎避不开腾讯面试题也非常爱考。但面试官真正期待的不是JSONP 可以解决跨域这种几句话就答完的答案而是希望你能把浏览器的同源策略和 CORS 机制讲清楚。建议从为什么要有同源策略切入浏览器限制不同源的文档或脚本读写彼此的资源是为了防止恶意网站访问你在其他网站上的数据这是一道安全屏障。然后引出 CORS跨域资源共享是服务端主动放开限制的机制。需要区分简单请求与预检请求当请求方法是 GET/POST/HEAD且 content-type 是 text/plain、multipart/form-data、application/x-www-form-urlencoded 之一并且没有自定义头时属于简单请求直接发请求并在响应头里带 Access-Control-Allow-Origin否则浏览器会先发一个 OPTIONS 预检请求询问服务器是否允许这次跨域请求。实战中还常遇到两个相关点。第一是开发环境下的代理转发原理是让同源的开发服务器去请求跨域接口把跨域问题揽到服务端这跟生产环境用 Nginx 配置反向代理是一套思路。第二是跨域情况下携带 Cookie需要前端设置 withCredentials 为 true同时服务端返回 Access-Control-Allow-Credentials: true并且 Access-Control-Allow-Origin 不能设置为 *必须明确指定来源。这两个点都是项目里真正踩过的坑能举出实际例子比空谈概念有说服力得多。4. 框架必考题Vue 和 React 的为什么会这样设计4.1 Vue 响应式从 Object.defineProperty 到 Proxy 的变化逻辑Vue 相关的前端面试题里问得最多的一定是Vue 2 和 Vue 3 的响应式原理有什么区别。这个问题不需要我多说但很多人的回答停留在Vue 2 用 Object.definePropertyVue 3 用 Proxy这一句明显不够。面试官想听的是三层递进第一层实现机制。Vue 2 在初始化时遍历 data 的属性用 Object.defineProperty 把它们转为 getter/setter同时每个属性对应一个依赖收集器Depgetter 中收集依赖也就是 watchersetter 触发时通知 watcher 更新视图。但这种方式有天然局限对象新增属性、删除属性无法被拦截数组索引变更和数组长度变更也无法自动检测所以 Vue 2 提供了 Vue.set / this.$set 来弥补。第二层Vue 3 为什么改用 Proxy。因为 Proxy 可以代理整个对象对对象的读取、写入、删除、in 操作符、Object.keys 等都能拦截所以不管是新增属性、删除属性还是数组操作都不再有检测不到的问题。同时 Vue 3 的依赖收集粒度从属性级细化到了副作用函数级配合 effect 和 track/trigger 机制实现了更精确的更新。第三层也是比较拉的层次为什么 Proxy 不能直接用 polyfill 替代。因为 Proxy 是 ES6 提供的原生能力它拦截底层操作这是 defineProperty 做不到的。面试官可能顺着问那 Vue 3 会不会因为 Proxy 导致兼容性问题答案是它只支持支持 Proxy 的环境不再兼容 IE11。你如果能主动说出这个结论面试官会认为你真的去了解过这个 API 而非只看过总结笔记。4.2 React 的渲染机制虚拟 DOM 和 fiber 解决什么问题React 相关的高频题目绕不开虚拟 DOM、diff 算法、fiber、setState。先说虚拟 DOM。很多人解释为用 JS 对象模拟真实 DOM减少直接操作 DOM 的性能开销。这个说法不完全错但面试官心里其实更看重跨平台和可编程这一层虚拟 DOM 是真实 UI 的一种抽象描述它让框架可以在任意宿主环境中渲染浏览器、Native、Canvas同时让更新逻辑变成了比较新旧虚拟 DOM 的差异来最小化真实 DOM 操作。diff 算法这块不需要背整个复杂度较高的算法细节但三条核心策略一定要说清同层比较不同层级的节点不跨层复用这极大降低了算法复杂度key 的作用列表 diff 时通过 key 识别节点身份保证复用和正确重排不写 key 或滥用 index 作为 key容易造成组件状态错乱和性能浪费双端对比React 在遍历子节点时从两端同时进行对比减少移动次数。Vue 2 的 diff 也有类似的特性但实现细节不同细节差异也是面试官喜欢问的。fiber 是一个容易让很多人卡住的知识点。它的出现本质上要解决页面更新时不能打断、长时间占用主线程会掉帧的问题。React 把整棵虚拟 DOM 树的协调reconciliation拆成可打断的可执行单元每个 fiber 节点就是一个工作单元配合 requestIdleCallback 或 React 自己调度的任务优先级机制把破碎的工作切分到浏览器空闲时间去执行从而保证高优先级的交互响应不被长任务阻塞。至于 setState 到底是同步还是异步我在腾讯技术社区看到过很多版本。正常 React 事件处理函数中 setState 是异步批量更新的因为 React 会把它放进更新队列统一批处理提升性能但在 setTimeout、原生事件或 Promise 回调里React 控制不了执行时机更新会变成同步的。React 18 的自动批处理进一步把更多场景下的更新都批量化了这也是版本演进里很关键的变化。回答的时候最好点出批处理是为了减少不必要的渲染次数这一核心动机。4.3 站在源码之外对比 Vue 与 React 的核心差异当被问到 Vue 和 React 怎么选、你更熟悉哪个时很多人的回答是我更熟 VueReact 我了解过。这句话太浪费展现自己的机会。一个更好的策略是讲清楚两者设计哲学上最本质的差异。我可以给你一个很直接的角度响应式追踪的差异决定了编程心智的差异。Vue 采用响应式系统数据变更后框架能够精准知道哪些组件依赖了这份数据自动更新开发门槛低代码更像声明式描述状态与视图关系React 引入不可变数据概念状态更新必须通过 setState 提供一个新的状态值然后从根节点开始重新协调这让数据流更可控配合函数式组件和 Hook更容易做状态管理和性能优化。Vue 对开发友好、内置指令多、模板灵活React 对纯函数可预测有更严格的追求由此衍生出了 useEffect、useMemo、useCallback 这些手动控制副作用的 Hook。面试官真正想听的是你能不能跳出哪个好用的主观感受站在架构层面说出本质区别。我建议你准备一个相对完整的口头表达Vue 通过依赖收集做到按需更新React 通过虚拟 DOM 协调和 diff 达到 UI 同步Vue 的优化更多由框架自动完成React 的优化则更多依赖开发者对渲染时机和 memoization 机制的理解。两者在大型项目中都能胜任选型往往取决于团队技术栈和工程现状而不是单纯比较性能数值。5. 性能优化、前端安全、大型项目场景能不能进 H2 的关卡5.1 性能指标与优化优先级先解决 80% 的体感问题前端性能优化是一个面试中百问不厌的话题但很多人的答案停留在减少请求、压缩图片、用 CDN这种泛泛而谈。腾讯面试官尤其是二面技术面往往希望听到你有指标意识和优先级判断。先说指标。核心 Web 指标里四个最具代表性的FCPFirst Contentful Paint表示页面首次绘制出内容的时间LCPLargest Contentful Paint表示最大内容绘制时间直接反映用户看到主体内容的速度FID/INP 表示从用户交互到浏览器响应的延迟CLS 表示视觉稳定性也就是页面元素跳动的程度。优化前要先明确指标因为没有指标的优化无法评估效果。再按优先级说优化手段。加载侧首屏先拆包把首屏不需要的组件、图表库、第三方 SDK 放到动态导入里利用 code splitting 避免一个巨大的 bundle 拖垮加载速度静态资源上 CDN开启 Gzip/Brotli 压缩图片用 WebP/AVIF 并做响应式尺寸关键 CSS 内联非关键 CSS 异步加载。渲染侧减少 DOM 层级、避免强制同步布局layout thrashing、长列表用虚拟滚动、事件委托、防抖节流。运行侧动画采用 transform/opacity 而不是 top/left减少大图内存占用批量操作 DOM。做优化题时加分项是提供一个真实案例。比如我在项目中做过的一个优化某管理后台首页首屏 LCP 从 4.2 秒降到 1.8 秒做的事不过是把 echarts 从首屏 bundle 中拆出来按需加载、把路由级的组件懒加载、去掉了一个阻塞渲染的大字体文件。这个故事比说十个理论概念都有用。5.2 前端安全XSS 与 CSRF 的防护闭环安全类题目在高频面试题中出现概率很高尤其是一面笔试之后。最常考的就是 XSS 和 CSRF。XSS跨站脚本攻击的核心是恶意脚本被注入并执行。常见分三类存储型恶意脚本存在数据库用户访问页面时被加载比如论坛评论、反射型恶意脚本拼到 URL 参数里服务端原样返回执行、DOM 型前端 DOM 操作导致脚本执行不经过服务端。防护思路是一条闭环不要信任任何外部输入渲染文本内容时做 HTML 转义富文本场景用白名单机制过滤标签和属性设置 CSPContent Security Policy限制脚本来源对敏感 Cookie 设置 HttpOnly 和 SameSite重要操作增加验证码或二次确认缩小被脚本操控的破坏面。CSRF跨站请求伪造的核心是借用用户身份发起非本意的请求。攻击者让用户在不知情的情况下向已登录的网站发起请求浏览器会自动携带 Cookie所以请求看起来是合法的。防护手段主要有三请求头校验检查 Origin 和 RefererCSRF Token服务端把随机 token 种到页面里客户端提交请求时带上服务端校验SameSite 属性限制第三方 Cookie 的携带。还有一个策略是现在很多项目用 token 而不是 Cookie 做身份认证天然降低 CSRF 风险。面试时能区分清楚XSS 利用的是对用户输入不信任CSRF 利用的是对浏览器自动携带凭证的信任就已经达到比较深的层次了。5.3 大型项目场景题权限、字典、表格性能这种题怎么答2025 年的腾讯前端面试题里场景题的占比越来越高。这类题目的特点是不存在标准答案面试官看的是你的方案完整度。拿权限设计来说这是一个非常典型的高频场景题。完整的权限方案一般分三层路由级权限登录后根据用户角色或权限码动态生成可访问的路由表再通过路由守卫或 render 逻辑控制页面级权限在菜单渲染时根据权限集过滤菜单项按钮级权限封装一个权限指令如 Vue 的 v-permission 或 React 的高阶组件组件渲染前检查当前用户是否有该按钮的权限码没有则移除。字典管理的场景我见得也不少很多团队在后台管理系统里维护性别、状态、类型这类固定枚举值。字典管理的作用是把枚举值从代码里抽离出来存到后端配置表或前端全局配置中同时提供缓存和懒加载机制。面试官会顺着问字典变了怎么通知前端答案是轮询、WebSocket 推送、接口版本号比对。这个问题本质上是在考察你对配置化和稳定性的理解。大表格性能优化也是高频场景题。回答可以从两个方向展开数据量小但渲染卡是渲染次数过多用 useMemo/memo 或 Vue 的计算属性减少重复计算数据量大是渲染节点太多用虚拟滚动只渲染可视区域。配合节流、防抖、事件委托、immutable 数据比对等细节一套完整方案就出来了。6. 工程化与微前端2025 年面试中的可选项变必选项6.1 webpack 原理和构建提速工程化题在腾讯的前端面试题里已经是社招的必考区域。webpack 相关的几个问题出现率极高构建流程是怎样的、Loader 和 Plugin 的区别、如何优化构建速度。构建流程可以概括为初始化参数 - 编译入口 - 从入口出发递归解析模块依赖 - 对每个模块调用对应的 Loader 进行转换 - 在转换过程中 Plugin 可以根据事件钩子做各种扩展比如生成 HTML、压缩代码、提取公共模块- 根据依赖关系生成 chunk - 输出 bundle。Loader 的本质是一个转换器把非 JS 资源转成 webpack 能处理的模块Plugin 的本质是一个基于事件流的扩展器在 webpack 生命周期里注入自定义逻辑。构建提速的常见手段包括用 thread-loader / worker 多进程处理耗时的模块编译用 HappyPack旧项目/ esbuild-loader 取代 babel-loader 做转译配置 module.noParse 跳过不需要解析的库优化 resolve.alias 和处理 ext 后缀列表开发环境下开缓存持久化。如果面试官继续往下聊 Vite要能接住Vite 为什么快这个问题Vite 在开发环境下利用浏览器原生 ES Module按需加载启动和热更新都不需要预先打包全部模块这才是它比 webpack-dev-server 快的核心原因。6.2 Vite、微前端与全栈化倾向微前端是近两年大厂面试题里非常喜欢考的方向。核心问题通常是微前端的价值是什么、qiankun 的实现思路是什么、application 之间怎么共享依赖。微前端解决的最直接问题是多个团队、多个技术栈、多个版本的系统要在一个容器里长期共存。很多中后台系统演进了三五年老系统是 Vue 2新团队想用 React 或 Vue 3整体迁移风险太大所以用微前端将系统拆成若干独立应用各自开发部署再由主应用统一加载。qiankun 的实现思路一句话可以概括基于 single-spa 做应用加载和生命周期管理通过 import-html-entry 动态加载子应用的 HTML再利用 JS 沙箱Proxy 或快照隔离全局变量CSS 沙箱做样式隔离。和 iframe 相比微前端体验更好、通信更灵活但引入的沙箱、路由、公共依赖管理的复杂度也更高。全栈化趋势也值得在面试中提一嘴。腾讯这边很多前端团队会要求工程师能写 Node.js 中间层甚至服务端功能你在简历中如果写过 NestJS 或 Koa 项目面试官往往非常感兴趣。因为前端不再是单纯调接口的页面工程师而是要能处理 BFF 层、SSR、甚至参与到服务端的一部分逻辑。所以不要把自己局限在纯浏览器端前端工程化 Node.js 中间层 数据串讲这一套组合拳在 2026 年会更有竞争力。6.3 项目难点叙述如何把可复现和数据收益写进去我每次模拟面试时都会强调项目介绍的叙述结构决定了面试官能追问你多深。建议的叙事框架是背景 - 目标 - 方案 - 数据收益 - 复盘。比如背景运营后台有 20 万条数据的表格每次切换筛选都要卡顿两三秒用户投诉多目标将交互响应时间降到 1 秒内减少组件卡顿率方案引入虚拟滚动渲染节点从几千个降到可视区的 30 个左右优化筛选逻辑把后端过滤改成前端索引 分页加载双轨并用数据收益切换筛选从 2.8 秒降到 600 毫秒页面内存占用下降 35%复盘列表数据量继续增长后前端索引方案的瓶颈开始出现下一步应该走服务端聚合搜索。这个框架最大的价值是面试官能顺着你的表述快速定位到关键决策点接下来他会追问虚拟滚动是怎么实现的为什么不用后端分页你怎么测出 600 毫秒这个数值。每一个点你都接得住项目就变成你展示能力的舞台而不是被挑刺的对象。7. 考前一周把面经转化成自己的知识闭环7.1 从面经里提取体系而非答案搜前端面经腾讯前端面试题的时候你会看到大量类似必问 Promise、闭包、事件循环的帖子。这些是入口不是终点。我建议拿到面经后做三步加工第一步把题目归类。按 JS、浏览器、框架、网络、性能、工程化、算法把近 50 道题分成区块你会发现大部分题目其实指向同一个底层机制。比如 Promise、async/await、事件循环归到异步链路浏览器缓存、Service Worker、CDN 归到加载优化链路。第二步对每个区块建立一棵知识树。树根是底层原理树干是技术方案树枝是面试可能出现的具体题目树叶是关联的边界条件。比如异步链路这棵树树根是 JS 单线程 事件循环树干可能是 Promise/Generator/async-await树枝就是各种输出题树叶是微任务执行时机then 的回调什么时候进队列这些细节。第三步每次练习后用两句话复述。如果你能在不说话稿的情况下把事件循环的原理和输出题判断路径用两分钟讲清楚说明你真的内化了。7.2 手写题、算法题与表达练习的配比腾讯前端面试非常看中手写题和算法题后者尤其不能只靠背。算法这部分刷 LeetCode 或同类平台主要是两方面热门前 100 题尤其是数组、字符串、链表、二叉树、动态规划里的简单到中等题。场景范围上不要贪多前端够用就行但基础的复杂度分析和代码规范一定要过关。手写题我的练习顺序是call/apply/bind - 深拷贝 - 防抖节流 - Promise - Promise.all - 手写 instanceof - new 操作符 - 数组扁平化 - 柯里化 - 并发控制。每一个都要求能写出边界条件。比如深拷贝要考虑循环引用、Symbol、Date、RegExp、Map/Set 这些特殊类型防抖节流要看清楚是要求首次触发立即执行还是延迟执行。写的时候直接在白板上不要依赖 IDE 补全面试现场你只有一双手和一块屏幕。表达练习也很重要。很多知识点你心里明白但面试时组织语言一紧张就乱了。我的建议是准备一个半分钟电梯回答和三分钟完整回答的双版本。比如被问说说 Vue 3 响应式半分钟版直接给结论和核心机制三分钟版再加上 Vue 2 的局限、Proxy 的优势、依赖收集流程、以及一个实际项目中的应用场景。面试官如果只问了半分钟就能解决就不要再拖到三分钟如果他追问了你还有更长的版本可以展开。这个节奏感能让面试官觉得你的表达有层次。7.3 我的几点心得最后分享一些我复盘自己面试经历时特别想重申的体会。第一不要背答案要背逻辑链条。前端面试题更新很快但背后的计算机基础几十年没变。你只要把输入 - 处理 - 输出的链路想透题目怎么换都能接住。第二项目比八股重要。大厂面试官都是做过实际业务的人他们能从你描述项目的方式里快速判断你是不是真的做过。与其花一整天背标题党面经不如把自己做过的项目复盘三遍把每个技术决策的为什么都写成文字。第三心态上把它当成一次技术交流。面试不是被考验而是互相确认是否匹配。当面试官问出一个你没准备过的问题不要慌可以先说思路再往前推进。很多时候面试官看重的不是你能不能立刻给出标准答案而是你有没有办法基于已有知识推导出一个合理方案有没有主动沟通和拆解问题的能力。这套方法能不能让你直接走进腾讯我不能保证但它能让你在准备前不慌在回答时有条理、有深度、能落地。前端这行的知识点是无限的而面试的时间是有限的把有限的时间花在能构建系统性理解的内容上才是最值得的投入。