校招笔试刷题这件事我一直觉得比面试更考验“基本功的成色”。面试可以靠表达和项目经验撑场子但笔试就是白纸黑字会就是会不会就是不会。前几天整理电脑翻出了当年做过的欢聚时代2018校招笔试题-web前端 A卷【成都场】看着那些题目还挺有感触。今天不打算照着题目念答案而是借着这套题聊聊前端校招笔试到底在考什么、怎么准备、有哪些坑是后来人完全可以避开的。先说下背景。欢聚时代YY那几年校招规模不小成都场的A卷属于前端岗位的通用笔试题整体难度偏中上不是那种“背背八股文就能过”的程度它很看重你对前端基础概念的理解深度以及对代码细节的敏感度。题型分布大概是选择题、简答题和编程题三块覆盖了JS基础、浏览器机制、网络协议、CSS布局、框架理解、手写代码这些方面。现在回头看这套题的出题思路其实很典型也很有代表性非常适合用来做校招前端的备考复盘。1. 内容整体设计与思路拆解1.1 校招笔试题的定位不是刁难是筛选先说一个很多同学容易误解的点校招笔试题不是为了把你考倒而是为了在几千份简历里快速筛出“基础扎实、有潜力、能干活”的人。校招不像社招社招看的是你做过什么项目、解决过什么问题校招候选人基本都是白纸项目经验也多是课程设计或实习打杂所以笔试只能考基础、考原理、考思维。正因为这样欢聚这套A卷的题目设计有个很明显的特点它不会出那种“偏难怪”的题但会把常见知识点往深了挖。比如同样考闭包它不会问你“闭包是什么”而是给你一段代码让你说出输出结果并解释为什么。这种题考的不是记忆是理解。如果你只是背过“闭包就是函数里面返回函数”这种定义遇到变量提升、异步执行顺序混合在一起的题基本就懵了。另外一个特点是题目之间的关联性很强。选择题里涉及的DOM操作、事件循环、作用域链会在后面的简答题和编程题里以另一种形式再次出现。这说明出题人希望你不仅知道“是什么”还能在不同场景里认出“它还是那个东西”。所以备考的时候别把知识点割裂开背要尝试建立知识网络。1.2 题量设置与时间分配的隐藏信息据我回忆A卷的时间大概是90到120分钟题量在30到40道之间包含选择题、填空题、简答题、编程题。这个题量放在今天来看不算大但当时很多人觉得时间不够用原因不是题多而是“想太久”。选择题里有些题目明显是故意设置了干扰项如果你对某个概念的理解不够透彻就会在两个选项之间来回纠结时间就这么耗掉了。这里有一个很实用的经验拿到试卷先花两分钟把整张卷子扫一遍把编程题先看个大概。因为编程题通常是最后两道占分最重如果你前面选择题耗费太多时间编程题就没时间写了或者只能草草写个大概得分很低。我当年就吃过这个亏前面简答题写得太详细最后一道编程题差点没写完最后只能在草稿纸上补了个思路也不知道阅卷老师给没给分。所以这种校招笔试时间分配的优先级应该是编程题 简答题 选择题。选择题分值再高也是单个知识点编程题一道题可能抵得上五六道选择题。先把大分拿到手再去扣细节。1.3 成都场的特殊性城市和岗位的关系成都场和北上广深的场次有没有区别从我了解的情况来看题目核心内容是一致的但成都场的互联网公司密度和岗位竞争烈度不同。成都当时处于互联网产业上升期很多大厂在成都设了研发中心但校招名额相对总部会少一些所以笔试的筛选标准并不会因为城市而降低反而因为名额少面试官对笔试成绩的把控会更严。这也意味着如果你是在成都场参加这类笔试不要抱着“竞争小一点、题目简单一点”的侥幸心理。题目难度和一线城市是同一套标准甚至因为面试官更看重基础功底简答题的评分可能更严格。准备的时候不要偷懒该拿的分一定要稳拿。2. 核心细节解析与实操要点2.1 JS基础闭包、作用域、this是永远的主线不管哪家公司的前端笔试题JS基础永远是占比最大的一块欢聚这套A卷也不例外。JS基础里最常考的有几个点闭包、作用域链、this指向、原型链、事件循环、变量提升。这几个点单独看都不难但组合在一起就能出出很多花样。以闭包为例笔试里最经典的一种考法是for (var i 0; i 5; i) { setTimeout(function() { console.log(i); }, 1000); }这段代码的输出结果是什么答案是5个5而不是0、1、2、3、4。如果你能清楚地解释为什么说明你真的理解了闭包和异步执行的关系。如果你只是背过“循环里用闭包会出问题”而不知道为什么、怎么解决那面试官再追问“用let怎么改用IIFE怎么改”你就容易卡壳。这种题目在A卷里出现得很自然而且它不只是考你输出结果还会让你写出改进方案。改进方案至少有三种用let声明变量利用块级作用域用 IIFE 包裹每次循环生成独立作用域用bind绑定参数。每种方案的原理都要能说清楚因为面试官很可能在笔试之后追问原理。再说this指向。笔试里常用的考法是通过构造函数的调用方式来考function Foo() { this.name bar; return { name: baz }; } var foo new Foo(); console.log(foo.name);这里考的是构造函数如果显式返回一个对象new出来的实例会拿返回值。这个知识点比较细很多人只记得“构造函数里this指向新对象”却忘了成员返回对象这个例外。类似这种细节点就是靠平时刷题积累临时抱佛脚很难记住。2.2 浏览器机制与网络协议不背题要理解链路前端er经常被说“不就是写写页面吗”但校招笔试题就是要打破这个偏见。欢聚A卷里浏览器机制和网络协议的题目占比不低主要涉及浏览器渲染流程、HTTP缓存、TCP连接、跨域解决方案这些。这类题目背后的逻辑其实是你写的代码最终是在浏览器里跑的如果你不知道浏览器怎么工作很多性能问题和bug你就无从排查。HTTP缓存是笔试题里的常客。它问的不是简单的“强缓存和协商缓存的区别”而是给你一个场景某个静态资源更新了但用户浏览器里还是旧版本问你怎么解决。这时候你需要知道Cache-Control和ETag的关系知道max-age和no-cache的区别知道为什么很多前端工程化工具会给文件名加hash。理解了这些你才会明白为什么打包工具要生成app.8f3k2.js这种带hash的文件名。浏览器渲染流程也经常考特别是CSS和JS的加载位置对渲染的影响。这类题有个很生活化的类比浏览器渲染页面就像装修房子。HTML是房屋结构CSS是刷墙和铺地板JS是安装家电和智能系统。如果你让家电在墙刷完之前就进场脚本放在 head 里阻塞渲染那整个装修流程就乱套了。理解了这层关系script标签为什么放body底部、为什么用defer和async就都顺理成章了。2.3 CSS布局Flex和BFC两手都要硬CSS布局在笔试题里属于“送分题”但同时也属于“送命题”。送分是因为它不难送命是因为很多前端er在平时开发里过度依赖框架和组件库手写布局能力退化严重。欢聚A卷里CSS布局相关的题一般是两种一种是给一个需求让你写出对应的CSS一种是给一段CSS让你说出布局结果。Flex布局基本上是必考的。考法比如“实现一个元素水平垂直居中”这题有很多种写法但用Flex是最简洁的.parent { display: flex; justify-content: center; align-items: center; }这题不难但如果你想拿高分最好写出两三种方案并对比它们的优缺点。比如 Flex 方案、 Grid 方案、绝对定位 transform 方案各自适用的场景是什么。这种对比式的回答在笔试简答题里会显得你的知识体系很完整阅卷老师给的分数也会更高。BFC块级格式化上下文也是高频考点。我记得有类似这样的题父元素高度塌陷了怎么解决如果你能说出“创建BFC的几种方式overflow: hidden、display: flow-root、float、position: absolute”并且解释原理那么这道题基本就稳了。注意不要只背方案BFC的触发条件、BFC对浮动兄弟元素的影响都应该理解清楚。2.4 框架题目不追新追的是核心原理欢聚这套A卷出题那年Vue和React已经开始在前端圈普及但校招笔试题里不会问“Vue3和Vue2的响应式原理区别”这种过于新潮的问题而是会考“组件通信方式有哪些”“虚拟DOM是什么”“key的作用是什么”这类核心原理问题。这个思想到现在依然适用校招笔试不追版本追的是核心原理。以key为例笔试题里经常给一段v-for循环渲染的代码问添加key和不加key有什么区别。这个问题的本质是考察你对diff算法的理解。key的作用是帮助diff算法判断节点是否复用了如果不加key列表的顺序发生变化时框架可能无法准确判断哪些节点是新增的、哪些是移动的从而产生错误的状态复用。如果你能把这个场景说清楚比背一百遍“key是唯一标识”都有用。另外组件通信方式也是必考题包括props/events、事件总线、Vuex/Redux、provide/inject、$refs等等。这种题考察的不是你会不会用某个API而是你有没有在实践中碰到过“这个数据到底应该放哪个组件”这种问题。建议备考时把每种通信方式的适用场景整理出来不要只知道写法。3. 实操过程与核心环节实现3.1 编程题实战手写一个防抖和节流函数编程题里有一类非常经典的“手写题”防抖和节流。这个题在欢聚A卷里出现完全在意料之中因为它在实际开发中太常用了。搜索框输入联想、window resize 事件、滚动加载图片都会用到防抖或节流。笔试考这个既能考察基础编码能力又能考察你是否理解实际场景。防抖的本质是事件触发后等待一段时间如果这段时间内没有再次触发才执行函数。如果期间再次触发就重新计时。用生活类比就是电梯关门电梯门快要关的时候有人进来了门就重新开等人进完了再关。防抖的经典实现function debounce(fn, delay) { let timer null; return function(...args) { if (timer) clearTimeout(timer); timer setTimeout(() { fn.apply(this, args); }, delay); }; }有几个细节要注意一是要保存this指向因为事件处理函数里的this是有实际意义的二是要透传参数三是返回的函数要保持原函数的签名这样在移除事件监听的时候才能对应得上。节流的本质是在一段时间内不管触发多少次只执行一次。生活类比就是地铁安检不管同时来多少人安检机传送带的运转速度是固定的漏不过去也超不了速。节流的经典实现function throttle(fn, interval) { let last 0; return function(...args) { const now Date.now(); if (now - last interval) { last now; fn.apply(this, args); } }; }这个实现是时间戳版本第一次触发会立即执行因为last初始是0now - last肯定大于interval。如果想让第一次不立即执行可以用定时器版本function throttle(fn, interval) { let timer null; return function(...args) { if (timer) return; timer setTimeout(() { fn.apply(this, args); timer null; }, interval); }; }建议备考时把两种写法都写熟练笔试时再根据题目要求选择。3.2 编程题实战手写深拷贝别只写JSON.parse手写深拷贝也是当年笔试题的常客现在依然很常见。这题看起来简单但想拿满分不容易。很多人第一反应是const newObj JSON.parse(JSON.stringify(obj));这个写法在笔试里能拿一部分分但如果你就这么交上去那基本和满分无缘了。因为面试官马上会追问JSON.stringify会丢失什么答案是函数、undefined、Symbol、RegExp、Date等特殊类型会被处理掉或丢失。一个真正可用的深拷贝函数需要考虑这些边界情况。下面是一个可以在笔试里直接用的深拷贝实现function deepClone(obj, map new WeakMap()) { if (obj null || typeof obj ! object) { return obj; } if (obj instanceof Date) { return new Date(obj); } if (obj instanceof RegExp) { return new RegExp(obj); } if (map.has(obj)) { return map.get(obj); } const result Array.isArray(obj) ? [] : {}; map.set(obj, result); for (let key of Object.keys(obj)) { result[key] deepClone(obj[key], map); } return result; }注意这里用了一个WeakMap来记录已经拷贝过的对象这是为了处理循环引用的问题。什么是循环引用就是a.self a这种。如果没有WeakMap做缓存深拷贝会陷入无限递归直接栈溢出。这个细节在笔试里属于加分项写上去会让阅卷老师觉得你的工程经验很扎实。备考的时候建议把这段代码练熟同时理解每一行的作用因为面试官大概率会顺着这道题问“为什么用WeakMap不用Map”。3.3 简答题实战如何描述一个知识点才算高分简答题是很多人容易忽略的拿分点。它不要求你写代码但很考验你“能不能把一件事说清楚”。举个例子题目如果是“谈谈你对CSS中BFC的理解”你以为只要写出“BFC是块级格式化上下文”就完了太天真了。一个高分的回答应该包含四个层次第一层是什么。BFC是块级格式化上下文是页面盒模型布局中的一种CSS渲染模式它决定了元素如何对其内容进行定位以及和其他元素的关系和相互作用。第二层怎么触发。触发BFC的条件包括根元素、float不为none、position为absolute或fixed、display为inline-block、table-cell、flow-root等、overflow不为visible。第三层解决什么问题。常见应用场景是解决浮动元素造成的父元素高度塌陷、防止垂直margin合并、实现自适应两栏布局。第四层用代码或例子佐证。简单写一段DEMO说明塌陷问题和解决后的效果。如果你能按这个层次来回答阅卷老师一眼就能看出你的知识是成体系的而不是零散记忆。记住一个原则笔试简答题的评分标准不是“有没有提到关键词”而是“知识体系是否完整”。3.4 网络题实战从URL输入到页面展示这道题怎么答才出彩“在浏览器地址栏输入URL并回车到页面展示出来中间发生了什么”这几乎是一道必考题欢聚A卷里大概率也有。这个题的难度在于它考察的知识跨度极大从网络协议到浏览器渲染全都要覆盖。很多人备考时背答案但如果你理解了每一层在干什么就能写得比别人更有逻辑。一个比较完整的回答链路是这样的输入URL后浏览器先解析URL判断是搜索关键词还是合法网址然后浏览器查找缓存看这个域名有没有缓存过DNS解析结果如果没有就发起DNS解析请求把域名解析成IP拿到IP后浏览器与服务器建立TCP连接这个过程中涉及三次握手如果协议是HTTPS还要进行TLS握手协商加密密钥建立连接后浏览器发送HTTP请求服务器处理请求返回HTTP响应包括状态码、响应头和响应体浏览器收到响应后开始解析HTML、CSS、JS构建DOM树和CSSOM树然后合并成渲染树进行布局和绘制最后页面呈现在用户眼前。这只是主干如果你想拿高分还有一些细节可以补充。比如在解析HTML时遇到script标签会阻塞DOM解析遇到img标签会异步加载图片在绘制阶段如果JS修改了样式可能会触发回流reflow和重绘repaint影响性能。答题的时候建议分层展示先讲网络层再讲渲染层最后讲优化点。这样既能体现广度也能体现深度。4. 常见问题与排查技巧实录4.1 选择题纠结半天最后还选错怎么办这是最常见的问题。我当年做选择题最怕的就是那种“以下说法错误的是”和“以下哪些选项会导致xxx”的题。这种题会设置多个迷惑选项如果你对知识点的记忆是模糊的很容易选错。我的经验是先排除绝对正确的选项再排除语法上就不对或明显违背常识的选项最后在自己纠结的两个选项里选择那个“描述得更保守”的。因为出题人往往会把错误选项描述得过于绝对比如“一定会”“必须”“所有”这类词出现时要格外小心。相反正确选项里经常会有“可能”“通常”“在某些情况下”这类限定词。这个方法不是百分百准确但它能帮你把正确率从50%提升到70%左右在时间不够的时候很管用。4.2 编程题写不出来怎么“骗”过程分笔试阅卷和考试阅卷一样是按点给分的。如果你编程题只写了个开头后面不会了不要在原地发呆把你会的部分全都写上去。比如看到题目要求手写防抖函数你至少要把函数的声明写出来把参数写上把timer变量定义写上能写多少写多少。这样阅卷老师至少知道你审题了、知道基本语法不会给你零分。还有一个小技巧是写注释。假设你不会写具体的逻辑但你把思路写成了中文注释比如“定义一个计时器变量”“如果已有计时器则清除并重新计时”阅卷老师能看出你有思路只是代码能力还没跟上。这在笔试中确实能拿到一定的过程分。不要小看这些分数笔试过不过线往往就差这么几分。4.3 时间不够用先放弃哪些题校招笔试的时间通常是紧巴巴的你需要有取舍。我的建议是选择题和填空题如果一道题卡了超过两分钟先跳过在题号上做个标记后面有时间再回来。简答题写要点就行不要长篇大论每个要点两三句话讲清楚不用展开太多。编程题一定要留足时间至少要保证写出一版能运行的个人能编译通过的版本哪怕有bug也比空白强。另外编程题如果第一道不会可以先看第二道。有时候第一道卡住你的知识点第二道反而简单先把能拿的分都拿到回头再啃硬骨头。4.4 准备期应该刷什么题才有效很多同学备考时喜欢刷各种大厂题库这个方向没错但要注意方法。刷题不是背题而是通过题目检验自己对知识点的理解程度。我建议按照“知识点-例题-变体”的方式来刷。比如今天集中刷闭包的题把各种闭包的考题都看一遍再自己改一改条件看看输出结果会不会变化。如果变了说明你只记住了答案没理解原理如果没变但你能说清为什么没变才说明真的懂了。推荐去翻一翻牛客网上的题库那里有很多公司校招的回忆版题目覆盖面很广。但注意这些回忆版不一定准确部分题目的选项和原题有差异不要太依赖原题重点是掌握题背后考察的知识点。5. 笔试之后从“做题”思维切换到“工程”思维5.1 笔试只是门槛面试才是决胜局说句实话校招笔试成绩只要过线面试官并不会太在意你考了90分还是75分。笔试真正的价值是帮你拿到面试资格。所以笔试题里暴露出来的薄弱点一定要在面试前补上因为面试官手里通常拿着你的笔试答卷他会在面试时专门追问你答错的题。如果你笔试里有一道BFC的题答得不好面试前一定要把BFC重新搞明白并且准备一个实际开发中使用BFC的例子。这样当面试官问“你笔试里BFC答得不太好现在再聊聊你对它的理解”时你能从容应对反而会把劣势变成加分项。所以笔试结束后不要对答案、不要纠结分数赶紧把每一道题考察的知识点记录下来逐项复习。5.2 笔试暴露的知识盲区就是你接下来的学习方向当年笔试结束我把自己答错的题整理了一遍发现主要集中在HTTP缓存和事件循环这两块。这两个知识点很多日常开发中也会用到但之前从没有系统地梳理过。于是笔试后的两周里我集中看了很多相关文章画了很多脑图把每个知识点都串成了链路。这个方法很笨但从结果来看非常有效。笔试的题目质量比市面上很多练习题的都高它帮你指出了真正该学的东西。如果你只把笔试当成一个门槛考完就忘那你浪费了最好的学习素材。5.3 关于校招前端岗位的一点个人看法现在前端领域的竞争越来越激烈校招笔试的内容也在不断变化。几年前考的是jQuery、BFC、闭包现在可能还会考TypeScript、工程化、性能优化。但无论如何变化核心的东西没变你对基础知识的理解深度、你排查问题的思路、你写代码的规范性和可维护性。这些能力在笔试里都能体现出来。我觉得准备校招笔试题不要抱着“考完就结束”的心态。它其实是一次很好的自我体检让你在正式进入职场之前清楚地知道自己哪里会、哪里不会。把这个心态摆正了刷题的过程就不会那么痛苦反而会觉得每天都在变强。如果你现在正在准备校招或者打算转行做前端我建议你找几套像这样的往年笔试题老老实实做一遍然后再针对错题去补知识。这个过程坚持一个月效果绝对比你看半年视频课要好。笔试考的是输出能力而输出能力只能靠输出训练来提升。
前端校招笔试如何准备？从欢聚时代真题看核心考点与避坑指南
校招笔试刷题这件事我一直觉得比面试更考验“基本功的成色”。面试可以靠表达和项目经验撑场子但笔试就是白纸黑字会就是会不会就是不会。前几天整理电脑翻出了当年做过的欢聚时代2018校招笔试题-web前端 A卷【成都场】看着那些题目还挺有感触。今天不打算照着题目念答案而是借着这套题聊聊前端校招笔试到底在考什么、怎么准备、有哪些坑是后来人完全可以避开的。先说下背景。欢聚时代YY那几年校招规模不小成都场的A卷属于前端岗位的通用笔试题整体难度偏中上不是那种“背背八股文就能过”的程度它很看重你对前端基础概念的理解深度以及对代码细节的敏感度。题型分布大概是选择题、简答题和编程题三块覆盖了JS基础、浏览器机制、网络协议、CSS布局、框架理解、手写代码这些方面。现在回头看这套题的出题思路其实很典型也很有代表性非常适合用来做校招前端的备考复盘。1. 内容整体设计与思路拆解1.1 校招笔试题的定位不是刁难是筛选先说一个很多同学容易误解的点校招笔试题不是为了把你考倒而是为了在几千份简历里快速筛出“基础扎实、有潜力、能干活”的人。校招不像社招社招看的是你做过什么项目、解决过什么问题校招候选人基本都是白纸项目经验也多是课程设计或实习打杂所以笔试只能考基础、考原理、考思维。正因为这样欢聚这套A卷的题目设计有个很明显的特点它不会出那种“偏难怪”的题但会把常见知识点往深了挖。比如同样考闭包它不会问你“闭包是什么”而是给你一段代码让你说出输出结果并解释为什么。这种题考的不是记忆是理解。如果你只是背过“闭包就是函数里面返回函数”这种定义遇到变量提升、异步执行顺序混合在一起的题基本就懵了。另外一个特点是题目之间的关联性很强。选择题里涉及的DOM操作、事件循环、作用域链会在后面的简答题和编程题里以另一种形式再次出现。这说明出题人希望你不仅知道“是什么”还能在不同场景里认出“它还是那个东西”。所以备考的时候别把知识点割裂开背要尝试建立知识网络。1.2 题量设置与时间分配的隐藏信息据我回忆A卷的时间大概是90到120分钟题量在30到40道之间包含选择题、填空题、简答题、编程题。这个题量放在今天来看不算大但当时很多人觉得时间不够用原因不是题多而是“想太久”。选择题里有些题目明显是故意设置了干扰项如果你对某个概念的理解不够透彻就会在两个选项之间来回纠结时间就这么耗掉了。这里有一个很实用的经验拿到试卷先花两分钟把整张卷子扫一遍把编程题先看个大概。因为编程题通常是最后两道占分最重如果你前面选择题耗费太多时间编程题就没时间写了或者只能草草写个大概得分很低。我当年就吃过这个亏前面简答题写得太详细最后一道编程题差点没写完最后只能在草稿纸上补了个思路也不知道阅卷老师给没给分。所以这种校招笔试时间分配的优先级应该是编程题 简答题 选择题。选择题分值再高也是单个知识点编程题一道题可能抵得上五六道选择题。先把大分拿到手再去扣细节。1.3 成都场的特殊性城市和岗位的关系成都场和北上广深的场次有没有区别从我了解的情况来看题目核心内容是一致的但成都场的互联网公司密度和岗位竞争烈度不同。成都当时处于互联网产业上升期很多大厂在成都设了研发中心但校招名额相对总部会少一些所以笔试的筛选标准并不会因为城市而降低反而因为名额少面试官对笔试成绩的把控会更严。这也意味着如果你是在成都场参加这类笔试不要抱着“竞争小一点、题目简单一点”的侥幸心理。题目难度和一线城市是同一套标准甚至因为面试官更看重基础功底简答题的评分可能更严格。准备的时候不要偷懒该拿的分一定要稳拿。2. 核心细节解析与实操要点2.1 JS基础闭包、作用域、this是永远的主线不管哪家公司的前端笔试题JS基础永远是占比最大的一块欢聚这套A卷也不例外。JS基础里最常考的有几个点闭包、作用域链、this指向、原型链、事件循环、变量提升。这几个点单独看都不难但组合在一起就能出出很多花样。以闭包为例笔试里最经典的一种考法是for (var i 0; i 5; i) { setTimeout(function() { console.log(i); }, 1000); }这段代码的输出结果是什么答案是5个5而不是0、1、2、3、4。如果你能清楚地解释为什么说明你真的理解了闭包和异步执行的关系。如果你只是背过“循环里用闭包会出问题”而不知道为什么、怎么解决那面试官再追问“用let怎么改用IIFE怎么改”你就容易卡壳。这种题目在A卷里出现得很自然而且它不只是考你输出结果还会让你写出改进方案。改进方案至少有三种用let声明变量利用块级作用域用 IIFE 包裹每次循环生成独立作用域用bind绑定参数。每种方案的原理都要能说清楚因为面试官很可能在笔试之后追问原理。再说this指向。笔试里常用的考法是通过构造函数的调用方式来考function Foo() { this.name bar; return { name: baz }; } var foo new Foo(); console.log(foo.name);这里考的是构造函数如果显式返回一个对象new出来的实例会拿返回值。这个知识点比较细很多人只记得“构造函数里this指向新对象”却忘了成员返回对象这个例外。类似这种细节点就是靠平时刷题积累临时抱佛脚很难记住。2.2 浏览器机制与网络协议不背题要理解链路前端er经常被说“不就是写写页面吗”但校招笔试题就是要打破这个偏见。欢聚A卷里浏览器机制和网络协议的题目占比不低主要涉及浏览器渲染流程、HTTP缓存、TCP连接、跨域解决方案这些。这类题目背后的逻辑其实是你写的代码最终是在浏览器里跑的如果你不知道浏览器怎么工作很多性能问题和bug你就无从排查。HTTP缓存是笔试题里的常客。它问的不是简单的“强缓存和协商缓存的区别”而是给你一个场景某个静态资源更新了但用户浏览器里还是旧版本问你怎么解决。这时候你需要知道Cache-Control和ETag的关系知道max-age和no-cache的区别知道为什么很多前端工程化工具会给文件名加hash。理解了这些你才会明白为什么打包工具要生成app.8f3k2.js这种带hash的文件名。浏览器渲染流程也经常考特别是CSS和JS的加载位置对渲染的影响。这类题有个很生活化的类比浏览器渲染页面就像装修房子。HTML是房屋结构CSS是刷墙和铺地板JS是安装家电和智能系统。如果你让家电在墙刷完之前就进场脚本放在 head 里阻塞渲染那整个装修流程就乱套了。理解了这层关系script标签为什么放body底部、为什么用defer和async就都顺理成章了。2.3 CSS布局Flex和BFC两手都要硬CSS布局在笔试题里属于“送分题”但同时也属于“送命题”。送分是因为它不难送命是因为很多前端er在平时开发里过度依赖框架和组件库手写布局能力退化严重。欢聚A卷里CSS布局相关的题一般是两种一种是给一个需求让你写出对应的CSS一种是给一段CSS让你说出布局结果。Flex布局基本上是必考的。考法比如“实现一个元素水平垂直居中”这题有很多种写法但用Flex是最简洁的.parent { display: flex; justify-content: center; align-items: center; }这题不难但如果你想拿高分最好写出两三种方案并对比它们的优缺点。比如 Flex 方案、 Grid 方案、绝对定位 transform 方案各自适用的场景是什么。这种对比式的回答在笔试简答题里会显得你的知识体系很完整阅卷老师给的分数也会更高。BFC块级格式化上下文也是高频考点。我记得有类似这样的题父元素高度塌陷了怎么解决如果你能说出“创建BFC的几种方式overflow: hidden、display: flow-root、float、position: absolute”并且解释原理那么这道题基本就稳了。注意不要只背方案BFC的触发条件、BFC对浮动兄弟元素的影响都应该理解清楚。2.4 框架题目不追新追的是核心原理欢聚这套A卷出题那年Vue和React已经开始在前端圈普及但校招笔试题里不会问“Vue3和Vue2的响应式原理区别”这种过于新潮的问题而是会考“组件通信方式有哪些”“虚拟DOM是什么”“key的作用是什么”这类核心原理问题。这个思想到现在依然适用校招笔试不追版本追的是核心原理。以key为例笔试题里经常给一段v-for循环渲染的代码问添加key和不加key有什么区别。这个问题的本质是考察你对diff算法的理解。key的作用是帮助diff算法判断节点是否复用了如果不加key列表的顺序发生变化时框架可能无法准确判断哪些节点是新增的、哪些是移动的从而产生错误的状态复用。如果你能把这个场景说清楚比背一百遍“key是唯一标识”都有用。另外组件通信方式也是必考题包括props/events、事件总线、Vuex/Redux、provide/inject、$refs等等。这种题考察的不是你会不会用某个API而是你有没有在实践中碰到过“这个数据到底应该放哪个组件”这种问题。建议备考时把每种通信方式的适用场景整理出来不要只知道写法。3. 实操过程与核心环节实现3.1 编程题实战手写一个防抖和节流函数编程题里有一类非常经典的“手写题”防抖和节流。这个题在欢聚A卷里出现完全在意料之中因为它在实际开发中太常用了。搜索框输入联想、window resize 事件、滚动加载图片都会用到防抖或节流。笔试考这个既能考察基础编码能力又能考察你是否理解实际场景。防抖的本质是事件触发后等待一段时间如果这段时间内没有再次触发才执行函数。如果期间再次触发就重新计时。用生活类比就是电梯关门电梯门快要关的时候有人进来了门就重新开等人进完了再关。防抖的经典实现function debounce(fn, delay) { let timer null; return function(...args) { if (timer) clearTimeout(timer); timer setTimeout(() { fn.apply(this, args); }, delay); }; }有几个细节要注意一是要保存this指向因为事件处理函数里的this是有实际意义的二是要透传参数三是返回的函数要保持原函数的签名这样在移除事件监听的时候才能对应得上。节流的本质是在一段时间内不管触发多少次只执行一次。生活类比就是地铁安检不管同时来多少人安检机传送带的运转速度是固定的漏不过去也超不了速。节流的经典实现function throttle(fn, interval) { let last 0; return function(...args) { const now Date.now(); if (now - last interval) { last now; fn.apply(this, args); } }; }这个实现是时间戳版本第一次触发会立即执行因为last初始是0now - last肯定大于interval。如果想让第一次不立即执行可以用定时器版本function throttle(fn, interval) { let timer null; return function(...args) { if (timer) return; timer setTimeout(() { fn.apply(this, args); timer null; }, interval); }; }建议备考时把两种写法都写熟练笔试时再根据题目要求选择。3.2 编程题实战手写深拷贝别只写JSON.parse手写深拷贝也是当年笔试题的常客现在依然很常见。这题看起来简单但想拿满分不容易。很多人第一反应是const newObj JSON.parse(JSON.stringify(obj));这个写法在笔试里能拿一部分分但如果你就这么交上去那基本和满分无缘了。因为面试官马上会追问JSON.stringify会丢失什么答案是函数、undefined、Symbol、RegExp、Date等特殊类型会被处理掉或丢失。一个真正可用的深拷贝函数需要考虑这些边界情况。下面是一个可以在笔试里直接用的深拷贝实现function deepClone(obj, map new WeakMap()) { if (obj null || typeof obj ! object) { return obj; } if (obj instanceof Date) { return new Date(obj); } if (obj instanceof RegExp) { return new RegExp(obj); } if (map.has(obj)) { return map.get(obj); } const result Array.isArray(obj) ? [] : {}; map.set(obj, result); for (let key of Object.keys(obj)) { result[key] deepClone(obj[key], map); } return result; }注意这里用了一个WeakMap来记录已经拷贝过的对象这是为了处理循环引用的问题。什么是循环引用就是a.self a这种。如果没有WeakMap做缓存深拷贝会陷入无限递归直接栈溢出。这个细节在笔试里属于加分项写上去会让阅卷老师觉得你的工程经验很扎实。备考的时候建议把这段代码练熟同时理解每一行的作用因为面试官大概率会顺着这道题问“为什么用WeakMap不用Map”。3.3 简答题实战如何描述一个知识点才算高分简答题是很多人容易忽略的拿分点。它不要求你写代码但很考验你“能不能把一件事说清楚”。举个例子题目如果是“谈谈你对CSS中BFC的理解”你以为只要写出“BFC是块级格式化上下文”就完了太天真了。一个高分的回答应该包含四个层次第一层是什么。BFC是块级格式化上下文是页面盒模型布局中的一种CSS渲染模式它决定了元素如何对其内容进行定位以及和其他元素的关系和相互作用。第二层怎么触发。触发BFC的条件包括根元素、float不为none、position为absolute或fixed、display为inline-block、table-cell、flow-root等、overflow不为visible。第三层解决什么问题。常见应用场景是解决浮动元素造成的父元素高度塌陷、防止垂直margin合并、实现自适应两栏布局。第四层用代码或例子佐证。简单写一段DEMO说明塌陷问题和解决后的效果。如果你能按这个层次来回答阅卷老师一眼就能看出你的知识是成体系的而不是零散记忆。记住一个原则笔试简答题的评分标准不是“有没有提到关键词”而是“知识体系是否完整”。3.4 网络题实战从URL输入到页面展示这道题怎么答才出彩“在浏览器地址栏输入URL并回车到页面展示出来中间发生了什么”这几乎是一道必考题欢聚A卷里大概率也有。这个题的难度在于它考察的知识跨度极大从网络协议到浏览器渲染全都要覆盖。很多人备考时背答案但如果你理解了每一层在干什么就能写得比别人更有逻辑。一个比较完整的回答链路是这样的输入URL后浏览器先解析URL判断是搜索关键词还是合法网址然后浏览器查找缓存看这个域名有没有缓存过DNS解析结果如果没有就发起DNS解析请求把域名解析成IP拿到IP后浏览器与服务器建立TCP连接这个过程中涉及三次握手如果协议是HTTPS还要进行TLS握手协商加密密钥建立连接后浏览器发送HTTP请求服务器处理请求返回HTTP响应包括状态码、响应头和响应体浏览器收到响应后开始解析HTML、CSS、JS构建DOM树和CSSOM树然后合并成渲染树进行布局和绘制最后页面呈现在用户眼前。这只是主干如果你想拿高分还有一些细节可以补充。比如在解析HTML时遇到script标签会阻塞DOM解析遇到img标签会异步加载图片在绘制阶段如果JS修改了样式可能会触发回流reflow和重绘repaint影响性能。答题的时候建议分层展示先讲网络层再讲渲染层最后讲优化点。这样既能体现广度也能体现深度。4. 常见问题与排查技巧实录4.1 选择题纠结半天最后还选错怎么办这是最常见的问题。我当年做选择题最怕的就是那种“以下说法错误的是”和“以下哪些选项会导致xxx”的题。这种题会设置多个迷惑选项如果你对知识点的记忆是模糊的很容易选错。我的经验是先排除绝对正确的选项再排除语法上就不对或明显违背常识的选项最后在自己纠结的两个选项里选择那个“描述得更保守”的。因为出题人往往会把错误选项描述得过于绝对比如“一定会”“必须”“所有”这类词出现时要格外小心。相反正确选项里经常会有“可能”“通常”“在某些情况下”这类限定词。这个方法不是百分百准确但它能帮你把正确率从50%提升到70%左右在时间不够的时候很管用。4.2 编程题写不出来怎么“骗”过程分笔试阅卷和考试阅卷一样是按点给分的。如果你编程题只写了个开头后面不会了不要在原地发呆把你会的部分全都写上去。比如看到题目要求手写防抖函数你至少要把函数的声明写出来把参数写上把timer变量定义写上能写多少写多少。这样阅卷老师至少知道你审题了、知道基本语法不会给你零分。还有一个小技巧是写注释。假设你不会写具体的逻辑但你把思路写成了中文注释比如“定义一个计时器变量”“如果已有计时器则清除并重新计时”阅卷老师能看出你有思路只是代码能力还没跟上。这在笔试中确实能拿到一定的过程分。不要小看这些分数笔试过不过线往往就差这么几分。4.3 时间不够用先放弃哪些题校招笔试的时间通常是紧巴巴的你需要有取舍。我的建议是选择题和填空题如果一道题卡了超过两分钟先跳过在题号上做个标记后面有时间再回来。简答题写要点就行不要长篇大论每个要点两三句话讲清楚不用展开太多。编程题一定要留足时间至少要保证写出一版能运行的个人能编译通过的版本哪怕有bug也比空白强。另外编程题如果第一道不会可以先看第二道。有时候第一道卡住你的知识点第二道反而简单先把能拿的分都拿到回头再啃硬骨头。4.4 准备期应该刷什么题才有效很多同学备考时喜欢刷各种大厂题库这个方向没错但要注意方法。刷题不是背题而是通过题目检验自己对知识点的理解程度。我建议按照“知识点-例题-变体”的方式来刷。比如今天集中刷闭包的题把各种闭包的考题都看一遍再自己改一改条件看看输出结果会不会变化。如果变了说明你只记住了答案没理解原理如果没变但你能说清为什么没变才说明真的懂了。推荐去翻一翻牛客网上的题库那里有很多公司校招的回忆版题目覆盖面很广。但注意这些回忆版不一定准确部分题目的选项和原题有差异不要太依赖原题重点是掌握题背后考察的知识点。5. 笔试之后从“做题”思维切换到“工程”思维5.1 笔试只是门槛面试才是决胜局说句实话校招笔试成绩只要过线面试官并不会太在意你考了90分还是75分。笔试真正的价值是帮你拿到面试资格。所以笔试题里暴露出来的薄弱点一定要在面试前补上因为面试官手里通常拿着你的笔试答卷他会在面试时专门追问你答错的题。如果你笔试里有一道BFC的题答得不好面试前一定要把BFC重新搞明白并且准备一个实际开发中使用BFC的例子。这样当面试官问“你笔试里BFC答得不太好现在再聊聊你对它的理解”时你能从容应对反而会把劣势变成加分项。所以笔试结束后不要对答案、不要纠结分数赶紧把每一道题考察的知识点记录下来逐项复习。5.2 笔试暴露的知识盲区就是你接下来的学习方向当年笔试结束我把自己答错的题整理了一遍发现主要集中在HTTP缓存和事件循环这两块。这两个知识点很多日常开发中也会用到但之前从没有系统地梳理过。于是笔试后的两周里我集中看了很多相关文章画了很多脑图把每个知识点都串成了链路。这个方法很笨但从结果来看非常有效。笔试的题目质量比市面上很多练习题的都高它帮你指出了真正该学的东西。如果你只把笔试当成一个门槛考完就忘那你浪费了最好的学习素材。5.3 关于校招前端岗位的一点个人看法现在前端领域的竞争越来越激烈校招笔试的内容也在不断变化。几年前考的是jQuery、BFC、闭包现在可能还会考TypeScript、工程化、性能优化。但无论如何变化核心的东西没变你对基础知识的理解深度、你排查问题的思路、你写代码的规范性和可维护性。这些能力在笔试里都能体现出来。我觉得准备校招笔试题不要抱着“考完就结束”的心态。它其实是一次很好的自我体检让你在正式进入职场之前清楚地知道自己哪里会、哪里不会。把这个心态摆正了刷题的过程就不会那么痛苦反而会觉得每天都在变强。如果你现在正在准备校招或者打算转行做前端我建议你找几套像这样的往年笔试题老老实实做一遍然后再针对错题去补知识。这个过程坚持一个月效果绝对比你看半年视频课要好。笔试考的是输出能力而输出能力只能靠输出训练来提升。