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

前言大家好我是木斯佳。相信很多人都感受到了在AI浪潮的席卷之下前端领域的门槛在变高纯粹的“增删改查”岗位正在肉眼可见地减少。曾经热闹非凡的面经分享如今也沉寂了许多。但我们都知道市场的潮水退去留下的才是真正在踏实准备、努力沉淀的人。学习的需求从未消失只是变得更加务实和深入。这个专栏的初衷很简单拒绝过时的、流水线式的PDF引流贴专注于收集和整理当下最新、最真实的前端面试资料。我会在每一份面经和八股文的基础上尝试从面试官的角度去拆解问题背后的逻辑而不仅仅是提供一份静态的背诵答案。无论你是校招还是社招目标是中大厂还是新兴团队只要是真实发生、有价值的面试经历我都会在这个专栏里为你沉淀下来。专栏快速链接温馨提示市面上的面经鱼龙混杂甄别真伪、把握时效是我们对抗内卷最有效的武器。面经原文内容面试公司腾讯TEG-混元数据部面试时间近期面试岗位前端实习一面面试体验基本都回答出来了感觉表现挺好但第二天挂了❓面试问题前端的话是怎么平时怎么学习的项目有没有可以优化的地方你为什么选择前端呢JS里面的原型链原型链的顶层是什么闭包你怎么理解JS防抖和节流实现一个防抖的函数CSS盒模型水平垂直居中方法display Flex有哪些属性EM和REM区别VH和VW设计一个响应式的页面左侧固定宽度右侧铺满整个屏幕怎么做Vue里面有哪些生命周期为什么要设计这些生命周期呢Vue有哪些指令两个组件怎么做数据交流watch怎么实现的HTTP和HTTPS有什么区别假如我获取到了TLS的证书的话我能劫持这个HTTPS的通信信息吗Webpack的loader和plugin有什么区别为什么vite的打包很快算法零钱兑换时间复杂度是多少还能什么方法实现学前端大概学了多久专业是主要是学什么的写项目的过程中有涉及到使用一些AI coding的方式去写吗在你学习的过程中假如遇到一个比较难的问题你会怎么快速去了解它并且掌握作者een_1来源牛客网木木有话说刷前先看面试结果有时不只看答题正确率还可能受HC数量、匹配度、面试官主观判断等影响。从题目本身来看这是一份非常标准的中大厂一面学习方式、项目优化、JS核心原型链/闭包/防抖节流、CSS盒模型/居中/flex/单位/布局、Vue生命周期/指令/组件通信/watch、网络HTTP/HTTPS、构建工具Webpack/Vite、算法零钱兑换。覆盖面广难度适中。 腾讯TEG前端实习一面·深度解析面试整体画像维度特征面试风格标准基础型 覆盖面广 深度适中难度评级⭐⭐⭐三星基础为主考察重心JS核心、CSS布局、Vue框架、网络基础、构建工具、算法特殊之处问题常规但全面适合检验基础是否扎实逐题深度解析九、JS原型链原型链的顶层是什么回答思路原型链是JS实现继承的机制。核心概念每个对象都有__proto__属性指向其原型对象每个函数都有prototype属性实例的__proto__指向构造函数的prototype属性查找沿原型链向上直到找到或到达顶层顶层Object.prototype它的__proto__是null。functionPerson(name){this.namename}constpnewPerson(Tom)// p.__proto__ Person.prototype// Person.prototype.__proto__ Object.prototype// Object.prototype.__proto__ null十、闭包的理解回答思路参考之前面经的闭包解析。定义函数可以访问其外部作用域的变量即使外部函数已执行完毕。functionouter(){letcount0returnfunctioninner(){countreturncount}}constcounterouter()counter()// 1作用封装私有变量、函数工厂、回调保存状态。注意闭包可能导致内存泄漏DOM引用未释放。十一、JS防抖和节流回答思路两者都是控制函数执行频率的手段。维度防抖Debounce节流Throttle执行时机停止触发后延迟执行固定间隔执行适用场景输入框搜索、窗口resize滚动事件、鼠标移动效果合并多次为一次降低频率// 防抖延迟执行期间新触发则重置定时器functiondebounce(fn,delay){lettimernullreturnfunction(...args){clearTimeout(timer)timersetTimeout(()fn.apply(this,args),delay)}}// 节流固定间隔执行functionthrottle(fn,delay){letlastTime0returnfunction(...args){constnowDate.now()if(now-lastTimedelay){lastTimenowfn.apply(this,args)}}}十二、实现防抖函数回答思路见上一题代码。要点保存timer变量每次调用清除之前的定时器注意this绑定和参数传递十三、CSS盒模型回答思路每个元素都是一个矩形盒子。组成部分content内容padding内边距border边框margin外边距两种模型标准盒模型box-sizing: content-boxwidth content宽度IE盒模型box-sizing: border-boxwidth content padding border十四、水平垂直居中方法回答思路参考之前面经至少说两种。方法1flex.parent{display:flex;justify-content:center;align-items:center;}方法2绝对定位 transform.parent{position:relative;}.child{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}十五、display Flex有哪些属性回答思路分为容器属性和项目属性。容器属性flex-direction主轴方向row/columnjustify-content主轴对齐center/space-between等align-items交叉轴对齐center/stretch等flex-wrap是否换行gap间距项目属性flex-grow放大比例flex-shrink缩小比例flex-basis基准尺寸align-self覆盖父级align-items十六、EM和REM区别VH和VW回答思路相对单位的区别。单位参照物EM父元素的字体大小REM根元素html的字体大小VH视口高度的1%VW视口宽度的1%使用场景REM移动端适配淘宝flexible方案VH/VW全屏布局、视口相关尺寸十七、左侧固定宽度右侧铺满屏幕回答思路经典两栏布局。方法1flex.container{display:flex;}.left{width:200px;}.right{flex:1;}方法2grid.container{display:grid;grid-template-columns:200px 1fr;}方法3浮动 BFC.left{float:left;width:200px;}.right{overflow:hidden;}十八、Vue生命周期及设计原因回答思路生命周期是组件从创建到销毁的过程。八个阶段beforeCreate → created → beforeMount → mounted → beforeUpdate → updated → beforeUnmount → unmounted设计原因在不同阶段提供钩子让开发者能在特定时机执行代码分离数据初始化、DOM挂载、数据更新、清理等不同职责服务端渲染只需要created和beforeCreate十九、Vue有哪些指令回答思路常用内置指令。v-if/v-else/v-else-if条件渲染v-showdisplay切换v-for列表渲染v-bind:属性绑定v-on事件绑定v-model双向绑定v-html渲染HTML谨慎使用v-text渲染文本v-once只渲染一次v-memo缓存子树二十、两个组件怎么做数据交流回答思路组件通信方式。场景方式父子props / emit跨多级provide / inject兄弟通过父组件中转 / eventBus全局Vuex / Pinia父调子方法ref二十一、watch怎么实现的回答思路Vue的watch基于响应式系统。实现原理遍历watch配置为每个属性创建Watcher实例当被监听属性变化时setter触发调用Watcher的updateWatcher执行回调传入新值和旧值深度监听deep: true时会递归遍历对象的所有属性每个属性都收集依赖性能开销大。二十二、HTTP和HTTPS区别TLS证书能劫持吗回答思路HTTPS HTTP TLS/SSL。区别HTTP明文传输HTTPS加密传输HTTPS需要CA证书HTTPS默认端口443HTTP是80拿到TLS证书能劫持吗不能直接劫持。HTTPS还依赖私钥证书是公开的私钥在服务端如果没有私钥无法解密通信内容但如果你拿到了根证书如在客户端安装了恶意根证书则可以中间人攻击二十三、Webpack的loader和plugin区别维度LoaderPlugin作用转换模块内容扩展Webpack功能执行时机模块加载时整个构建生命周期配置方式module.rulesplugins常见例子babel-loader、css-loaderHtmlWebpackPlugin、MiniCssExtractPlugin二十四、为什么Vite打包很快回答思路Vite开发环境和生产环境不同。开发环境快的原因利用ESM浏览器直接加载模块无需打包按需编译只编译请求的文件用esbuild预构建依赖热更新快只更新变更的模块生产环境使用Rollup打包但依赖预构建和缓存也提升了速度。二十五、算法零钱兑换题目给定不同面额的硬币和一个总金额计算可以凑成总金额的最少硬币数。// 动态规划functioncoinChange(coins,amount){constdpnewArray(amount1).fill(Infinity)dp[0]0for(leti1;iamount;i){for(constcoinofcoins){if(icoin){dp[i]Math.min(dp[i],dp[i-coin]1)}}}returndp[amount]Infinity?-1:dp[amount]}时间复杂度O(amount × coins.length)其他方法BFS广度优先搜索、贪心不一定最优知识点速查表知识点核心要点原型链__proto__→prototype顶层Object.prototype.__proto__ null闭包函数外部作用域封装私有变量注意内存泄漏防抖节流防抖停止后执行、节流固定间隔场景区分盒模型contentpaddingbordermarginbox-sizing区别水平垂直居中flex、绝对定位transformFlex属性容器direction/justify/align/wrap、项目grow/shrink/basisCSS单位EM(父字体)/REM(根字体)/VH(视口高度)/VW(视口宽度)两栏布局flex、grid、浮动BFCVue生命周期8阶段设计原因分离职责、不同时机执行代码Vue指令v-if/v-show/v-for/v-bind/v-on/v-model等组件通信props/emit、provide/inject、eventBus、Vuex、refwatch原理基于响应式系统每个属性创建Watcherdeep遍历HTTP/HTTPSHTTPS加密需CA证书无私钥无法劫持loader vs pluginloader转换模块plugin扩展构建功能Vite快开发环境ESM按需编译生产环境Rollup预构建零钱兑换动态规划O(amount×coins)也可BFS 最后一句腾讯TEG这场一面是一份“基础全面”的标准面经。用户感觉“基本都回答出来了”但最终挂了原因可能不是答题本身而是HC已满、匹配度不足、或竞争激烈。面试就像相亲你很好对方也很好但不一定合适。不要因为一次挂掉就否定自己保持节奏持续投递总会有双向奔赴的机会。