刚参加完TME2024校园招聘前端方向的第一场笔试趁着热乎劲还在把整场考试的命题套路、考点分布、失分点复盘一遍。这篇文章既是一份笔试记录也是一份前端校招备考地图——谁适合看打算投大厂前端岗的应届生、正在刷题但方向感不强的同学还有带新人的团队 leader 想了解现在校招笔试难度的都可以参考。先说结论TME这场笔试整体属于“基础扎实就能过、想拿高分得靠综合能力”的类型。题型覆盖了计算机基础知识、JavaScript深度理解、框架应用、工程化场景题没有偏题怪题但每道题都往原理层面深挖了一层。换句话讲背八股文能过初筛想拿高分必须真懂。1. 先说结论这次笔试到底在考什么1.1 题型分布与分值结构整场笔试时间是120分钟我拿到的是前端方向第一套卷整体题量和时间配比还算合理。题型大致可以分为四块题型题量建议用时考察方向单选题15道30分钟计算机网络、浏览器原理、JS语言基础多选题5道10分钟框架原理、工程化、安全编程题2道50分钟数据结构与算法、JS编程能力简答题2道30分钟场景设计、性能优化、框架原理注意多选题比单选题危险得多选错不得分、少选可能得一半分但TME这场多选是“少选不得分”也就是说漏选也算错。这个规则在开考前一定要看清我见过不少同学在这上面吃大亏明明会做因为漏了一个选项直接整题扣光。编程题是核心拉分项。两道题分值大约占总分的40%一道偏数据结构数组处理/链表操作一道偏场景实现手写函数/组件逻辑。最后半小时如果还在单选上纠结编程题大概率写不完——这是时间分配上最大的坑。1.2 考点优先级大厂前端笔试的选人逻辑从这次试卷反推TME前端岗位的笔试选人逻辑其实很清晰基础能力是底线工程化思维是加分项原理理解深度决定上限。先说基础能力。网络协议TCP/UDP、HTTP状态码、浏览器渲染机制、JS核心机制原型链、闭包、事件循环、Promise、ES6语法这些大概占了50%的分数。这类题的考察方式不是“背概念”而是给出代码让你推结果或者给一个场景让你判断行为。比如“以下代码输出什么”每个选项都长得差不多不深究底层原理很容易被绕进去。再说工程化思维。Webpack构建流程、Vue响应式原理、组件通信、性能优化手段这些以多选题和简答题形式出现大概占30%。这类题没有标准死答案考的是你平时写代码时有没有想过“为什么”。剩余20%是算法和数据结构。TME这次考的题目难度中等偏下一道是数组去重与排序的变种一道是链表的环检测。比起LeetCode hard题大厂笔试更看重“能否用代码解决实际问题”所以刷题时不要死磕难题把常见的数据结构操作写熟更重要。1.3 前端开发skills不只是写页面那么简单很多同学对“前端开发”的理解还停留在写页面、调样式、接接口。但这次笔试反映出来的一个明显信号是企业眼中的前端开发skills是一个复合能力集合。从考点反推TME至少希望候选人具备四个层次的能力。第一层是语言基本功JavaScript语法、类型转换、作用域、异步模型这是地基。第二层是浏览器和网络理解从输入URL到页面展示中间发生了什么、浏览器缓存策略、事件机制这些决定了你能否排查线上问题。第三层是框架和工程化能力Vue或者React的原理、组件化设计思想、构建工具链这些决定了你能否在团队里独立负责业务。第四层是软素质和场景设计能力遇到性能瓶颈怎么办、如何设计一个高复用的组件、如何监控前端报错。这套能力模型不只是TME的要求绝大多数中大厂前端岗笔试都是这个思路。所以备考时不要只刷题要把知识体系搭起来每个知识点都要能回答“为什么这样设计”。2. 计算机基础考点笔试筛人的第一道闸2.1 数据结构与算法核心题型与答题节奏TME这场笔试的两道编程题一道是“数组扁平化加去重排序”的变种一道是“判断链表是否有环并返回环的起点”。这两道题都是LeetCode上很经典的题目难度不算高但现场写的时候有几个细节值得注意。数组那道题题目大致是给定一个多维数组要求扁平化、去重、并按升序排序。看起来简单但考点其实藏在三个细节里。第一数组的维度不确定循环嵌套解不了得用递归或者flat(Infinity)第二去重要考虑元素类型数字1和字符串1是不是同一个元素题目如果不明确默认要靠Set去重但注意Set的严格相等机制第三排序要考虑是否有负数、是否要求稳定排序。我当时写的是这样的版本function flattenUniqueSort(arr) { const flat arr.flat(Infinity); const unique [...new Set(flat)]; return unique.sort((a, b) a - b); }这只是基础版如果想让面试官眼前一亮可以在flat、去重、排序三个环节都手写实现体现你懂原理而不是只会调APIfunction flatten(arr) { return arr.reduce((acc, cur) Array.isArray(cur) ? acc.concat(flatten(cur)) : acc.concat(cur), []); } function unique(arr) { return arr.filter((item, index) arr.indexOf(item) index); } function sort(arr) { if (arr.length 1) return arr; const mid arr[Math.floor(arr.length / 2)]; const left arr.filter(x x mid); const right arr.filter(x x mid); return [...sort(left), mid, ...sort(right)]; }再说链表环检测那道题。现场手写快慢指针解法网上有大量模板这里不再贴代码。想提醒的是笔试环境的代码补全能力很差没有IDE的自动提示所有的API和方法名都要靠记忆。平时刷题最好在无提示环境下练几遍这样上考场不会因为拼写错误浪费时间。2.2 网络与浏览器高频概念题背后的考察意图网络和浏览器是笔试单选的重灾区。TME这场覆盖了TCP三次握手、HTTP与HTTPS区别、HTTP缓存策略、浏览器渲染流程、事件循环等高频考点。一个让我印象深刻的题目是“输入URL到页面展示中间发生了什么”。这题作为简答题出现考察的是系统性思维。完整的答题链条应该是DNS解析把域名解析成IP地址涉及浏览器缓存、系统缓存、路由器缓存、DNS服务器递归查询。建立TCP连接三次握手确认双方的接收和发送能力正常。发送HTTP请求携带请求头、请求体经过负载均衡到达服务器。服务器处理并返回响应涉及后端处理逻辑、CDN命中、缓存策略。浏览器解析并渲染HTML解析成DOM树、CSS解析成CSSOM树合成RenderTree布局绘制。这道题答得好不好不在于背得多完整而在于每一个环节能不能展开讲两层。比如说到缓存策略能不能说清楚Cache-Control的max-age和ETag的区别说到渲染能不能解释什么是回流和重绘、什么时候触发这些都是连环追问的素材面试官通过笔试回答就能判断出你的知识深度。2.3 浏览器缓存一道必考但容易混淆的概念题浏览器缓存策略值得单独拿出来说因为这是笔试高频中的高频。TME这场虽然没有直接考缓存的大题但选择题里出现了而且选项设计非常容易混淆。核心知识点其实就两类强缓存和协商缓存。强缓存是浏览器直接用本地副本不发请求由ExpiresHTTP/1.0或Cache-Control: max-ageHTTP/1.1控制。协商缓存是浏览器拿本地资源的标识去问服务器“这个资源还能用吗”能用就返回304不能就用200返回新资源标识字段是Last-Modified/If-Modified-Since时间戳维度和ETag/If-None-Match内容哈希维度。选择题最常挖坑的地方是问你“如果服务端同时返回了Cache-Control: no-cache和ETag浏览器会怎么处理”。正确答案是no-cache的意思是“可以缓存但每次使用前必须向服务器验证”所以浏览器仍然会缓存资源但每次请求都需要走协商缓存逻辑。注意no-cache不等于no-store后者才是完全不缓存。备考这块最好的方式不是死记字段而是打开浏览器DevTools的Network面板随便找一个线上网站刷新两次观察哪些资源是从memory cache、disk cache、304来的把现象和原理一一对应记忆会深刻很多。3. JavaScript进阶校招前端笔试的重头戏3.1 原型链、闭包、this与作用域必须拿到满分的送分题JavaScript基础题占的比重最大但也是最好拿分的部分——前提是你真的理解了。TME这次考了“箭头函数里的this指向什么”和“经典循环闭包问题”都是稍有JS开发经验就应该答对的题。先说一下箭头函数的this问题。箭头函数本身没有自己的this它捕获的是定义时外层作用域的this。看下面这个代码const obj { name: TME, getName: function() { return () { console.log(this.name); }; } }; const fn obj.getName(); fn(); // 输出什么答案是TME。因为getName的调用者是obj所以它的this指向obj而箭头函数捕获了外层的this。如果把getName改成箭头函数结果就变成undefined了——因为obj.getName是箭头函数它没有自己的this会捕获全局作用域的this。再看经典循环闭包问题for (var i 0; i 5; i) { setTimeout(() console.log(i), 1000); }输出的是5个5。原因是var声明的i是函数作用域循环结束后i已经变成5所有定时器回调共享同一个i。改成let声明就能输出0到4因为let是块级作用域每次循环都会创建一个新的绑定。这类题目看似简单但出错率很高。我在笔试时就有一道多选问“哪些方式能让上面的定时器输出0到4”选项包括let、立即执行函数传参、bind传参、const变量代替等。学习时不要只记答案要把每种改动背后涉及的原理过一遍这样遇到变种题也不怕。3.2 异步编程与事件循环从Promise到async/await异步是前端笔试的常青考点。TME这次出了一道判断执行顺序的题把setTimeout、Promise.resolve().then、async/await、process.nextTick混在一起考察对事件循环微观任务和宏观任务的理解。这道题的关键在于事件循环的机制每执行完一个宏任务会清空整个微任务队列然后才执行下一个宏任务。Promise.then的回调是微任务setTimeout的回调是宏任务process.nextTick在Node环境中优先级高于Promise微任务。一个常见的执行顺序题console.log(1); setTimeout(() console.log(2), 0); Promise.resolve().then(() console.log(3)); console.log(4);输出是1, 4, 3, 2。先同步输出1和4然后清空微任务输出3最后执行宏任务输出2。如果换成async/await要注意await表达式后面的代码可以看作是.then中的回调也是微任务。把事件循环的规则理解透了这类题就是白给分。我强烈建议复习时自己在控制台把这些代码跑一遍把输出结果记下来。笔试时遇到类似题就不需要推断直接凭记忆写答案速度能快不少。3.3 手写题以深拷贝、防抖节流为例TME这场简答题考了一道手写防抖函数属于前端笔试的高频手写题。这题说难不难但写出一个在真实场景中能用的版本比背模板重要得多。一个合格的防抖函数需要支持立即执行选项和取消功能function debounce(fn, wait 500, immediate false) { let timer null; let result; const debounced function(...args) { if (timer) clearTimeout(timer); if (immediate) { const callNow !timer; timer setTimeout(() { timer null; }, wait); if (callNow) result fn.apply(this, args); } else { timer setTimeout(() { result fn.apply(this, args); timer null; }, wait); } return result; }; debounced.cancel function() { clearTimeout(timer); timer null; }; return debounced; }这里有两个细节值得注意。第一是用this绑定因为防抖函数经常用作对象方法的事件处理如果不绑定this内部的this会指向window或undefined。第二是返回值的处理immediate模式下同步返回第一次调用的结果非immediate模式下返回最后一次调用的结果实际开发中还要结合Promise来处理异步返回值。类似的还有节流、深拷贝、数组去重、函数柯里化、Promise.all等高频手写题。建议每种至少手写三遍第一遍看着思路写第二遍凭记忆写第三遍在无提示环境下计时写。考场上的手感就是这样练出来的。4. 前端框架与工程化拉开差距的分数来源4.1 Vue方向响应式原理与diff算法TME是腾讯系Vue和React都有使用但笔试题目明显更偏Vue一些。TME这场有一道多选考了Vue 3的响应式原理选项涉及reactive、ref、Proxy和Object.defineProperty的区别。这里要搞清楚的核心是Vue 2的响应式是Object.defineProperty逐个遍历属性进行拦截它无法监听新增属性和删除属性所以Vue 2提供了$set和$delete方法来解决。Vue 3改用Proxy代理整个对象可以拦截get、set、has、deleteProperty等13种操作所以新增属性、删除属性都能被监听到这是设计上的根本差异。另一个高频考点是diff算法。TME这场没有直接考但面试大概率会追问。理解diff算法的核心是“同层比较、双端对比”通过key来复用节点尽可能减少DOM操作。回答这类问题时建议画图说明但笔试环境不方便画图所以要在文字表达上多下功夫逻辑要讲清楚。如果时间充裕建议把Vue的一个响应式核心手写实现一遍。从最简单的reactive到effect再到computed大约不到100行代码就能跑通一个简化版本。这个过程比看十篇源码解析都有用。4.2 工程化与构建工具考的不是配置而是原理工程化方向的考题TME出了一道关于Webpack构建流程的理解题。这类题目很多同学容易答成“背配置项”比如entry是什么、output是什么。但笔试考的是执行流程的底层理解。Webpack的核心执行流程是初始化配置、编译、解析模块、生成chunk、输出文件。编译阶段从入口出发通过Loader对不同类型资源进行转换遇到import/require就是发现新模块继续递归解析构建依赖图之后通过Plugin在构建流程的不同节点插入自定义逻辑比如代码压缩、资源内联、环境变量注入最终根据配置生成chunk和文件。答题时如果能把Loader和Plugin的区别、Loader的执行顺序从右到左从下到上、Tree Shaking的触发条件ES Module静态分析、sideEffects标记都解释清楚这题基本就是满分。4.3 性能优化笔试里最常见的开放题简答题有一道跟性能优化相关如何提升首屏加载速度。这类题是典型的开放题没有标准答案但答题的逻辑框架决定了分数高低。建议从三个维度展开。第一个维度是资源体积优化。代码层面做代码分割按需加载路由组件图片用WebP格式、做懒加载开启Gzip压缩能减小60%以上的传输体积。第二个维度是网络策略优化。合理设置HTTP缓存静态资源用强缓存加文件名hashHTML用协商缓存使用CDN加速静态资源分发接口开启HTTP/2多路复用。第三个维度是渲染效率优化。关键CSS内联避免CSS阻塞渲染script标签加defer或async减少重排重绘动画尽量用transform和opacity。答题时建议分点作答每一点带一句“为什么这么做”。比如“把大图片转成WebP格式”这句话得分低改成“WebP比PNG小约25%-35%使用picture标签按需加载不同格式图片减少体积的同时不影响清晰度”得分就高很多。判卷人能从你的扩展里判断你是背答案还是真的做过性能优化。5. 笔试过程中的实战策略与时间分配5.1 答题顺序的取舍120分钟做完四类题时间不算宽裕。我的策略是先快速扫一遍所有题目估计总体难度然后先做编程题再做简答题最后做选择题。这个顺序不是拍脑袋定的而是根据分数比重和思维成本计算的。编程题分值高、需要集中精力放在头脑最清醒的时候做效率最高。简答题需要组织语言但不需要像编程那样反复调试放在中等精力段。选择题虽然是客观题但部分题目文字陷阱多需要细心放在最后精力不足时做反而能靠直觉避开一些过度思考。单选整体是送分题只要你基础扎实不需要花大把时间纠结。当然如果做到某道选择题时一眼能看出答案就立刻选掉不要留到最后再回来。我的经验是单选题里“以下哪个选项不属于...”容易因为惯性思维失手这类题圈一下关键词再选。5.2 在线笔试环境与代码编写实战TME这场用的是在线笔试系统代码编辑器非常基础没有自动缩进、没有代码补全甚至连括号匹配都时灵时不灵。所以平时刷题在高亮环境下写和在裸文本环境下写的速度差异很大。备考最后阶段要刻意在记事本或者纸笔上练手写代码。另外一个容易被忽视的点是编程题的“提交前检查”。在线判题系统会跑多个测试用例你本地跑通了一组样例不代表所有边界都能过。提交前要检查数组为空时怎么办输入是null或undefined怎么办数字超出Number.MAX_SAFE_INTEGER怎么办这些边界情况在笔试中是区分排名的重要细节。TME的编程题还允许自定义函数名但要求严格匹配题目指定的函数签名。我在考试时就遇到一个坑题目的函数名是findCircle我习惯性地写成了findCycle本地测试没问题提交时全部用例报错才发现是拼写问题。这种低级失误在笔试中非常常见提交前一定要对照题目检查函数名和参数名。5.3 共享屏幕在线笔试的规则细节校招在线笔试通常会要求开启摄像头或共享屏幕TME这场同样如此。开考前要提前测试设备确保摄像头能正常工作、网络稳定。我见过有同学因为摄像头没开被当作作弊处理也有因为网络断线导致交卷失败的这些技术问题虽然不影响能力评估但会直接影响成绩务必重视。还有一点在线笔试的前几分钟不要急着做题。先把规则页完整读一遍确认选择题的评分规则、编程题的IO方式是输入输出示例格式还是核心代码模式、能否使用本地IDE。这些信息在规则页都有但很多同学不看直接做题结果用错了代码模板。6. 常见问题与备考建议速查6.1 备考时间不够怎么办这个问题几乎每个来咨询的同学都会问我的答案始终一样抓大放小以真题为核心做定向训练。如果只有两周时间优先级应该是事件循环和异步必考、Vue响应式原理大厂高频、手写题输入率高、HTTP缓存容易混淆但必考、两道简单算法题练手保持手感。优先级低的模块是CSS的偏门布局技巧笔试很少考、TypeScript高级类型体操除非岗位明确要求TS、WebGPU/Canvas等图形学除非投的是可视化方向。复习要服务分数不要追求知识面上大而全。6.2 笔试和面试最大的区别是什么笔试和面试最大的区别在于笔试考“广度”——知识点覆盖面广什么都要知道一点面试考“深度”——围绕一个点反复追问直到问倒你。很多同学备考笔试时只看自己不熟悉的知识点结果熟悉的部分反而丢分。正确做法是把知识体系过一遍标记自己模糊的模块重点突破。TME这场笔试还体现出另一个趋势手写题从“背模板”转向“考理解”。比如防抖函数如果只是背下来模板问你“为什么要保留this绑定”就答不上来。备考时一定要把每个手写题涉及的知识点拆解做到能一边写出代码一边解释每个关键步骤。6.3 笔试的分数多少才够校招笔试一般不看具体分数而是看排名百分比。TME官方没有公布过分数线但根据往年经验前端岗位至少要到前30%才有面试机会。编程题全做对基本能保证过线简答题答出逻辑清晰的答题框架也能加分选择题的准确率是拉开排名的关键。所以不要把精力全部押在算法题上。我见过编程题全做对但选择题错一半的同学排名反而不如编程题做出一道但选择题全对的人。原因很可能是单选题量大面广是大多数人分数的基本盘。7. 一场笔试之后写给下一届候选人的话考完之后我复盘了整张卷子最大的感触是TME这场笔试没有偏题怪题但每道题都比“标准答案”多要求了一层理解。不管是框架的响应式原理还是防抖手写都在验证你是不是真的写过代码、真的遇到并解决过问题。这份经验同样适用于准备其他大厂前端笔试。把JavaScript语言基础打牢把浏览器和网络这块吃透把Vue和React的核心原理理解到位把常见手写题练到肌肉记忆再配合有节奏的少量算法训练当前端开发的校招笔试其实是很有把握的。我记得有人问为什么进大厂要考这么多计算机基础一个资深面试官说过一句话“我们不是在招一个会写页面的人而是在招一个能解决复杂问题的人。”知识是可以在工作中积累的但解决问题的思维方式和学习能力很难被快速训练。笔试的每道题其实都在筛选这一点。最后分享一个备考阶段的私人技巧每次刷完一套题花十分钟把错题按知识点分类汇总到一张表格里标出“完全不会”“知道但记错”“会的但粗心”三档。考前一天只看这张表效率很高。校招是一场持久战笔试只是第一关稳扎稳打比什么都重要。 TME2024校招前端笔试复盘：考点分析与备考策略
刚参加完TME2024校园招聘前端方向的第一场笔试趁着热乎劲还在把整场考试的命题套路、考点分布、失分点复盘一遍。这篇文章既是一份笔试记录也是一份前端校招备考地图——谁适合看打算投大厂前端岗的应届生、正在刷题但方向感不强的同学还有带新人的团队 leader 想了解现在校招笔试难度的都可以参考。先说结论TME这场笔试整体属于“基础扎实就能过、想拿高分得靠综合能力”的类型。题型覆盖了计算机基础知识、JavaScript深度理解、框架应用、工程化场景题没有偏题怪题但每道题都往原理层面深挖了一层。换句话讲背八股文能过初筛想拿高分必须真懂。1. 先说结论这次笔试到底在考什么1.1 题型分布与分值结构整场笔试时间是120分钟我拿到的是前端方向第一套卷整体题量和时间配比还算合理。题型大致可以分为四块题型题量建议用时考察方向单选题15道30分钟计算机网络、浏览器原理、JS语言基础多选题5道10分钟框架原理、工程化、安全编程题2道50分钟数据结构与算法、JS编程能力简答题2道30分钟场景设计、性能优化、框架原理注意多选题比单选题危险得多选错不得分、少选可能得一半分但TME这场多选是“少选不得分”也就是说漏选也算错。这个规则在开考前一定要看清我见过不少同学在这上面吃大亏明明会做因为漏了一个选项直接整题扣光。编程题是核心拉分项。两道题分值大约占总分的40%一道偏数据结构数组处理/链表操作一道偏场景实现手写函数/组件逻辑。最后半小时如果还在单选上纠结编程题大概率写不完——这是时间分配上最大的坑。1.2 考点优先级大厂前端笔试的选人逻辑从这次试卷反推TME前端岗位的笔试选人逻辑其实很清晰基础能力是底线工程化思维是加分项原理理解深度决定上限。先说基础能力。网络协议TCP/UDP、HTTP状态码、浏览器渲染机制、JS核心机制原型链、闭包、事件循环、Promise、ES6语法这些大概占了50%的分数。这类题的考察方式不是“背概念”而是给出代码让你推结果或者给一个场景让你判断行为。比如“以下代码输出什么”每个选项都长得差不多不深究底层原理很容易被绕进去。再说工程化思维。Webpack构建流程、Vue响应式原理、组件通信、性能优化手段这些以多选题和简答题形式出现大概占30%。这类题没有标准死答案考的是你平时写代码时有没有想过“为什么”。剩余20%是算法和数据结构。TME这次考的题目难度中等偏下一道是数组去重与排序的变种一道是链表的环检测。比起LeetCode hard题大厂笔试更看重“能否用代码解决实际问题”所以刷题时不要死磕难题把常见的数据结构操作写熟更重要。1.3 前端开发skills不只是写页面那么简单很多同学对“前端开发”的理解还停留在写页面、调样式、接接口。但这次笔试反映出来的一个明显信号是企业眼中的前端开发skills是一个复合能力集合。从考点反推TME至少希望候选人具备四个层次的能力。第一层是语言基本功JavaScript语法、类型转换、作用域、异步模型这是地基。第二层是浏览器和网络理解从输入URL到页面展示中间发生了什么、浏览器缓存策略、事件机制这些决定了你能否排查线上问题。第三层是框架和工程化能力Vue或者React的原理、组件化设计思想、构建工具链这些决定了你能否在团队里独立负责业务。第四层是软素质和场景设计能力遇到性能瓶颈怎么办、如何设计一个高复用的组件、如何监控前端报错。这套能力模型不只是TME的要求绝大多数中大厂前端岗笔试都是这个思路。所以备考时不要只刷题要把知识体系搭起来每个知识点都要能回答“为什么这样设计”。2. 计算机基础考点笔试筛人的第一道闸2.1 数据结构与算法核心题型与答题节奏TME这场笔试的两道编程题一道是“数组扁平化加去重排序”的变种一道是“判断链表是否有环并返回环的起点”。这两道题都是LeetCode上很经典的题目难度不算高但现场写的时候有几个细节值得注意。数组那道题题目大致是给定一个多维数组要求扁平化、去重、并按升序排序。看起来简单但考点其实藏在三个细节里。第一数组的维度不确定循环嵌套解不了得用递归或者flat(Infinity)第二去重要考虑元素类型数字1和字符串1是不是同一个元素题目如果不明确默认要靠Set去重但注意Set的严格相等机制第三排序要考虑是否有负数、是否要求稳定排序。我当时写的是这样的版本function flattenUniqueSort(arr) { const flat arr.flat(Infinity); const unique [...new Set(flat)]; return unique.sort((a, b) a - b); }这只是基础版如果想让面试官眼前一亮可以在flat、去重、排序三个环节都手写实现体现你懂原理而不是只会调APIfunction flatten(arr) { return arr.reduce((acc, cur) Array.isArray(cur) ? acc.concat(flatten(cur)) : acc.concat(cur), []); } function unique(arr) { return arr.filter((item, index) arr.indexOf(item) index); } function sort(arr) { if (arr.length 1) return arr; const mid arr[Math.floor(arr.length / 2)]; const left arr.filter(x x mid); const right arr.filter(x x mid); return [...sort(left), mid, ...sort(right)]; }再说链表环检测那道题。现场手写快慢指针解法网上有大量模板这里不再贴代码。想提醒的是笔试环境的代码补全能力很差没有IDE的自动提示所有的API和方法名都要靠记忆。平时刷题最好在无提示环境下练几遍这样上考场不会因为拼写错误浪费时间。2.2 网络与浏览器高频概念题背后的考察意图网络和浏览器是笔试单选的重灾区。TME这场覆盖了TCP三次握手、HTTP与HTTPS区别、HTTP缓存策略、浏览器渲染流程、事件循环等高频考点。一个让我印象深刻的题目是“输入URL到页面展示中间发生了什么”。这题作为简答题出现考察的是系统性思维。完整的答题链条应该是DNS解析把域名解析成IP地址涉及浏览器缓存、系统缓存、路由器缓存、DNS服务器递归查询。建立TCP连接三次握手确认双方的接收和发送能力正常。发送HTTP请求携带请求头、请求体经过负载均衡到达服务器。服务器处理并返回响应涉及后端处理逻辑、CDN命中、缓存策略。浏览器解析并渲染HTML解析成DOM树、CSS解析成CSSOM树合成RenderTree布局绘制。这道题答得好不好不在于背得多完整而在于每一个环节能不能展开讲两层。比如说到缓存策略能不能说清楚Cache-Control的max-age和ETag的区别说到渲染能不能解释什么是回流和重绘、什么时候触发这些都是连环追问的素材面试官通过笔试回答就能判断出你的知识深度。2.3 浏览器缓存一道必考但容易混淆的概念题浏览器缓存策略值得单独拿出来说因为这是笔试高频中的高频。TME这场虽然没有直接考缓存的大题但选择题里出现了而且选项设计非常容易混淆。核心知识点其实就两类强缓存和协商缓存。强缓存是浏览器直接用本地副本不发请求由ExpiresHTTP/1.0或Cache-Control: max-ageHTTP/1.1控制。协商缓存是浏览器拿本地资源的标识去问服务器“这个资源还能用吗”能用就返回304不能就用200返回新资源标识字段是Last-Modified/If-Modified-Since时间戳维度和ETag/If-None-Match内容哈希维度。选择题最常挖坑的地方是问你“如果服务端同时返回了Cache-Control: no-cache和ETag浏览器会怎么处理”。正确答案是no-cache的意思是“可以缓存但每次使用前必须向服务器验证”所以浏览器仍然会缓存资源但每次请求都需要走协商缓存逻辑。注意no-cache不等于no-store后者才是完全不缓存。备考这块最好的方式不是死记字段而是打开浏览器DevTools的Network面板随便找一个线上网站刷新两次观察哪些资源是从memory cache、disk cache、304来的把现象和原理一一对应记忆会深刻很多。3. JavaScript进阶校招前端笔试的重头戏3.1 原型链、闭包、this与作用域必须拿到满分的送分题JavaScript基础题占的比重最大但也是最好拿分的部分——前提是你真的理解了。TME这次考了“箭头函数里的this指向什么”和“经典循环闭包问题”都是稍有JS开发经验就应该答对的题。先说一下箭头函数的this问题。箭头函数本身没有自己的this它捕获的是定义时外层作用域的this。看下面这个代码const obj { name: TME, getName: function() { return () { console.log(this.name); }; } }; const fn obj.getName(); fn(); // 输出什么答案是TME。因为getName的调用者是obj所以它的this指向obj而箭头函数捕获了外层的this。如果把getName改成箭头函数结果就变成undefined了——因为obj.getName是箭头函数它没有自己的this会捕获全局作用域的this。再看经典循环闭包问题for (var i 0; i 5; i) { setTimeout(() console.log(i), 1000); }输出的是5个5。原因是var声明的i是函数作用域循环结束后i已经变成5所有定时器回调共享同一个i。改成let声明就能输出0到4因为let是块级作用域每次循环都会创建一个新的绑定。这类题目看似简单但出错率很高。我在笔试时就有一道多选问“哪些方式能让上面的定时器输出0到4”选项包括let、立即执行函数传参、bind传参、const变量代替等。学习时不要只记答案要把每种改动背后涉及的原理过一遍这样遇到变种题也不怕。3.2 异步编程与事件循环从Promise到async/await异步是前端笔试的常青考点。TME这次出了一道判断执行顺序的题把setTimeout、Promise.resolve().then、async/await、process.nextTick混在一起考察对事件循环微观任务和宏观任务的理解。这道题的关键在于事件循环的机制每执行完一个宏任务会清空整个微任务队列然后才执行下一个宏任务。Promise.then的回调是微任务setTimeout的回调是宏任务process.nextTick在Node环境中优先级高于Promise微任务。一个常见的执行顺序题console.log(1); setTimeout(() console.log(2), 0); Promise.resolve().then(() console.log(3)); console.log(4);输出是1, 4, 3, 2。先同步输出1和4然后清空微任务输出3最后执行宏任务输出2。如果换成async/await要注意await表达式后面的代码可以看作是.then中的回调也是微任务。把事件循环的规则理解透了这类题就是白给分。我强烈建议复习时自己在控制台把这些代码跑一遍把输出结果记下来。笔试时遇到类似题就不需要推断直接凭记忆写答案速度能快不少。3.3 手写题以深拷贝、防抖节流为例TME这场简答题考了一道手写防抖函数属于前端笔试的高频手写题。这题说难不难但写出一个在真实场景中能用的版本比背模板重要得多。一个合格的防抖函数需要支持立即执行选项和取消功能function debounce(fn, wait 500, immediate false) { let timer null; let result; const debounced function(...args) { if (timer) clearTimeout(timer); if (immediate) { const callNow !timer; timer setTimeout(() { timer null; }, wait); if (callNow) result fn.apply(this, args); } else { timer setTimeout(() { result fn.apply(this, args); timer null; }, wait); } return result; }; debounced.cancel function() { clearTimeout(timer); timer null; }; return debounced; }这里有两个细节值得注意。第一是用this绑定因为防抖函数经常用作对象方法的事件处理如果不绑定this内部的this会指向window或undefined。第二是返回值的处理immediate模式下同步返回第一次调用的结果非immediate模式下返回最后一次调用的结果实际开发中还要结合Promise来处理异步返回值。类似的还有节流、深拷贝、数组去重、函数柯里化、Promise.all等高频手写题。建议每种至少手写三遍第一遍看着思路写第二遍凭记忆写第三遍在无提示环境下计时写。考场上的手感就是这样练出来的。4. 前端框架与工程化拉开差距的分数来源4.1 Vue方向响应式原理与diff算法TME是腾讯系Vue和React都有使用但笔试题目明显更偏Vue一些。TME这场有一道多选考了Vue 3的响应式原理选项涉及reactive、ref、Proxy和Object.defineProperty的区别。这里要搞清楚的核心是Vue 2的响应式是Object.defineProperty逐个遍历属性进行拦截它无法监听新增属性和删除属性所以Vue 2提供了$set和$delete方法来解决。Vue 3改用Proxy代理整个对象可以拦截get、set、has、deleteProperty等13种操作所以新增属性、删除属性都能被监听到这是设计上的根本差异。另一个高频考点是diff算法。TME这场没有直接考但面试大概率会追问。理解diff算法的核心是“同层比较、双端对比”通过key来复用节点尽可能减少DOM操作。回答这类问题时建议画图说明但笔试环境不方便画图所以要在文字表达上多下功夫逻辑要讲清楚。如果时间充裕建议把Vue的一个响应式核心手写实现一遍。从最简单的reactive到effect再到computed大约不到100行代码就能跑通一个简化版本。这个过程比看十篇源码解析都有用。4.2 工程化与构建工具考的不是配置而是原理工程化方向的考题TME出了一道关于Webpack构建流程的理解题。这类题目很多同学容易答成“背配置项”比如entry是什么、output是什么。但笔试考的是执行流程的底层理解。Webpack的核心执行流程是初始化配置、编译、解析模块、生成chunk、输出文件。编译阶段从入口出发通过Loader对不同类型资源进行转换遇到import/require就是发现新模块继续递归解析构建依赖图之后通过Plugin在构建流程的不同节点插入自定义逻辑比如代码压缩、资源内联、环境变量注入最终根据配置生成chunk和文件。答题时如果能把Loader和Plugin的区别、Loader的执行顺序从右到左从下到上、Tree Shaking的触发条件ES Module静态分析、sideEffects标记都解释清楚这题基本就是满分。4.3 性能优化笔试里最常见的开放题简答题有一道跟性能优化相关如何提升首屏加载速度。这类题是典型的开放题没有标准答案但答题的逻辑框架决定了分数高低。建议从三个维度展开。第一个维度是资源体积优化。代码层面做代码分割按需加载路由组件图片用WebP格式、做懒加载开启Gzip压缩能减小60%以上的传输体积。第二个维度是网络策略优化。合理设置HTTP缓存静态资源用强缓存加文件名hashHTML用协商缓存使用CDN加速静态资源分发接口开启HTTP/2多路复用。第三个维度是渲染效率优化。关键CSS内联避免CSS阻塞渲染script标签加defer或async减少重排重绘动画尽量用transform和opacity。答题时建议分点作答每一点带一句“为什么这么做”。比如“把大图片转成WebP格式”这句话得分低改成“WebP比PNG小约25%-35%使用picture标签按需加载不同格式图片减少体积的同时不影响清晰度”得分就高很多。判卷人能从你的扩展里判断你是背答案还是真的做过性能优化。5. 笔试过程中的实战策略与时间分配5.1 答题顺序的取舍120分钟做完四类题时间不算宽裕。我的策略是先快速扫一遍所有题目估计总体难度然后先做编程题再做简答题最后做选择题。这个顺序不是拍脑袋定的而是根据分数比重和思维成本计算的。编程题分值高、需要集中精力放在头脑最清醒的时候做效率最高。简答题需要组织语言但不需要像编程那样反复调试放在中等精力段。选择题虽然是客观题但部分题目文字陷阱多需要细心放在最后精力不足时做反而能靠直觉避开一些过度思考。单选整体是送分题只要你基础扎实不需要花大把时间纠结。当然如果做到某道选择题时一眼能看出答案就立刻选掉不要留到最后再回来。我的经验是单选题里“以下哪个选项不属于...”容易因为惯性思维失手这类题圈一下关键词再选。5.2 在线笔试环境与代码编写实战TME这场用的是在线笔试系统代码编辑器非常基础没有自动缩进、没有代码补全甚至连括号匹配都时灵时不灵。所以平时刷题在高亮环境下写和在裸文本环境下写的速度差异很大。备考最后阶段要刻意在记事本或者纸笔上练手写代码。另外一个容易被忽视的点是编程题的“提交前检查”。在线判题系统会跑多个测试用例你本地跑通了一组样例不代表所有边界都能过。提交前要检查数组为空时怎么办输入是null或undefined怎么办数字超出Number.MAX_SAFE_INTEGER怎么办这些边界情况在笔试中是区分排名的重要细节。TME的编程题还允许自定义函数名但要求严格匹配题目指定的函数签名。我在考试时就遇到一个坑题目的函数名是findCircle我习惯性地写成了findCycle本地测试没问题提交时全部用例报错才发现是拼写问题。这种低级失误在笔试中非常常见提交前一定要对照题目检查函数名和参数名。5.3 共享屏幕在线笔试的规则细节校招在线笔试通常会要求开启摄像头或共享屏幕TME这场同样如此。开考前要提前测试设备确保摄像头能正常工作、网络稳定。我见过有同学因为摄像头没开被当作作弊处理也有因为网络断线导致交卷失败的这些技术问题虽然不影响能力评估但会直接影响成绩务必重视。还有一点在线笔试的前几分钟不要急着做题。先把规则页完整读一遍确认选择题的评分规则、编程题的IO方式是输入输出示例格式还是核心代码模式、能否使用本地IDE。这些信息在规则页都有但很多同学不看直接做题结果用错了代码模板。6. 常见问题与备考建议速查6.1 备考时间不够怎么办这个问题几乎每个来咨询的同学都会问我的答案始终一样抓大放小以真题为核心做定向训练。如果只有两周时间优先级应该是事件循环和异步必考、Vue响应式原理大厂高频、手写题输入率高、HTTP缓存容易混淆但必考、两道简单算法题练手保持手感。优先级低的模块是CSS的偏门布局技巧笔试很少考、TypeScript高级类型体操除非岗位明确要求TS、WebGPU/Canvas等图形学除非投的是可视化方向。复习要服务分数不要追求知识面上大而全。6.2 笔试和面试最大的区别是什么笔试和面试最大的区别在于笔试考“广度”——知识点覆盖面广什么都要知道一点面试考“深度”——围绕一个点反复追问直到问倒你。很多同学备考笔试时只看自己不熟悉的知识点结果熟悉的部分反而丢分。正确做法是把知识体系过一遍标记自己模糊的模块重点突破。TME这场笔试还体现出另一个趋势手写题从“背模板”转向“考理解”。比如防抖函数如果只是背下来模板问你“为什么要保留this绑定”就答不上来。备考时一定要把每个手写题涉及的知识点拆解做到能一边写出代码一边解释每个关键步骤。6.3 笔试的分数多少才够校招笔试一般不看具体分数而是看排名百分比。TME官方没有公布过分数线但根据往年经验前端岗位至少要到前30%才有面试机会。编程题全做对基本能保证过线简答题答出逻辑清晰的答题框架也能加分选择题的准确率是拉开排名的关键。所以不要把精力全部押在算法题上。我见过编程题全做对但选择题错一半的同学排名反而不如编程题做出一道但选择题全对的人。原因很可能是单选题量大面广是大多数人分数的基本盘。7. 一场笔试之后写给下一届候选人的话考完之后我复盘了整张卷子最大的感触是TME这场笔试没有偏题怪题但每道题都比“标准答案”多要求了一层理解。不管是框架的响应式原理还是防抖手写都在验证你是不是真的写过代码、真的遇到并解决过问题。这份经验同样适用于准备其他大厂前端笔试。把JavaScript语言基础打牢把浏览器和网络这块吃透把Vue和React的核心原理理解到位把常见手写题练到肌肉记忆再配合有节奏的少量算法训练当前端开发的校招笔试其实是很有把握的。我记得有人问为什么进大厂要考这么多计算机基础一个资深面试官说过一句话“我们不是在招一个会写页面的人而是在招一个能解决复杂问题的人。”知识是可以在工作中积累的但解决问题的思维方式和学习能力很难被快速训练。笔试的每道题其实都在筛选这一点。最后分享一个备考阶段的私人技巧每次刷完一套题花十分钟把错题按知识点分类汇总到一张表格里标出“完全不会”“知道但记错”“会的但粗心”三档。考前一天只看这张表效率很高。校招是一场持久战笔试只是第一关稳扎稳打比什么都重要。