前端校招笔试考点全梳理：从基础原理到算法策略

58同城2020校招前端笔试，是我校招季里印象比较深的一场。倒不是说题目有多难，而是它的题型分布和很多大厂不太一样——基础题占比高、范围广，算法题偏中等难度，但特别考验你“会不会在约束条件下做取舍”。当时和我一起笔试的几个同学，出来之后对答案，发现大家栽的地方居然高度集中：不是死在算法上，而是死在一些平时根本不会去细究的基础细节和框架原理上。

这篇文章不是去回忆某一套具体试卷的答案，而是结合那场笔试的题型风格，把前端校招笔试最容易出现的考点、底层逻辑和准备思路完整梳理一遍。如果你正在准备前端校招，或者打算系统过一遍前端基础，这篇内容可以当一份“考前自查清单”用。我从题型分布、基础题边界、框架原理、算法策略、开放题表达五个维度来拆，最后再说说这两年校招笔试趋势的变化。

1. 校招笔试的全局认识：我为什么强调“先定策略再刷题”

很多人准备前端校招笔试，第一反应就是疯狂刷LeetCode，刷到后面发现还是心里没底。这个思路不能说错，但效率很低。58同城那场笔试给我的直观感受是：它不是一场“算法竞赛”，而是一场“前端基本功摸底考试”。如果一上来就把大量时间砸在困难级别的算法题上，反而容易忽略占比更高的基础题和框架题。

1.1 校招笔试的题型结构与时间分配

先聊聊我当时对这套卷子的整体观察。整张卷子大概分为四个板块：计算机基础（包含数据结构、网络、操作系统）、前端基础（HTML/CSS/JavaScript）、框架与工程化（Vue/React、构建工具、代码管理）、算法与逻辑题（一般2-3道编程题）。时间通常给90到120分钟，题量不小，想全部答完并且保证质量，时间其实很紧张。

这里就引出一个关键策略：一定要先做会做的，把确定性分数拿到手。前端基础题通常是最先出现的，也是性价比最高的，因为只要你平时写过页面、调过bug，这些分基本都能拿到。算法题虽然分值高，但耗时也高，如果卡在一道题上超过20分钟，后面可能就来不及做了。

我当时给自己定的节奏是：选择题和填空题控制在25分钟内完成，遇到拿不准的果断先标记跳过，不在任何一题上纠结超过2分钟。中间的大题（手写代码、简答）留40分钟，最后剩下的时间全部给算法题。这个分配不一定适合所有人，但有一个原则是通用的：先做确定性高的题，再啃硬骨头。

1.2 拿到试卷后我先花5分钟做的事

笔试开始的前5分钟，不要急着动笔。先把整张卷子快速扫一遍，重点看三样东西：题量分布、算法题的难度、有没有自己不熟悉的知识点。这个动作看似简单，但能帮你建立全局感，避免做到一半发现时间不够了才开始慌。

我记得那场笔试题里有一道关于事件循环的选择题，还有一道关于Flex布局的填空题。这些都属于“看一眼就知道考什么”的题型，但如果你对事件循环的微任务和宏任务顺序不熟，或者对Flex的flex-grow和flex-shrink计算逻辑只停留在“用过”的层面，就很容易在不起眼的地方丢分。所以扫卷子的目的，就是提前识别自己的薄弱点，把时间往这些地方倾斜，而不是从头到尾均匀用力。

2. 基础题与技术栈考察：从58同城的题型看前端基本功的边界

前端基础题是校招笔试的“基本盘”，也是区分“背过面试题”和“真正理解前端”的分水岭。58同城这场笔试的基础题覆盖面很典型，基本就是JavaScript核心机制、HTML/CSS细节、浏览器原理这三块的排列组合。

2.1 笔试里出现过的JS基础题类型与应对思路

JavaScript基础题在校招笔试里几乎从不缺席，考察的核心也无非是那几块：作用域与闭包、原型与原型链、this指向、事件循环、Promise与异步控制。这些知识点听起来很“八股”，但笔试题目往往会在细节上做文章，专门考那些“你觉得自己会，但一写就错”的边界情况。

举一个这类题的典型考法：给出一段代码，问你输出顺序。代码里通常有一个setTimeout、一个Promise.resolve().then()、一个async/await函数，再加上几个同步的console.log。很多人的第一反应是“这题我见过”，但真正写输出结果时，却容易在await后面的微任务时序上出错。

应对这类题，我建议不要死记结论，而是把事件循环的规则彻底理解透：每次宏任务结束后，会清空当前微任务队列；Promise回调是微任务，setTimeout是宏任务；async函数里的await会把它后面的代码变成微任务。把这三条规则刻在脑子里，配合几道经典例题反复推演，这类题基本就能稳定拿分。

再看原型链的题目。常见的考法是：定义一个构造函数，给它加一个原型方法，再new一个实例，同时给实例添加同名方法，问输出什么。这类题的核心是理解属性查找的优先顺序：实例自身属性 > 原型链属性。只要你能画出一条完整的原型链，大部分原型题都能迎刃而解。我在准备阶段会把“__proto__和prototype的关系”单独写在一张纸上，笔试前十分钟快速过一遍，效果很好。

还有一个高频考点是this的指向。笔试不会直接问“this指向谁”，而是给你一段对象方法调用代码，让你判断输出。这里有个很实用的判断口诀：看函数怎么被调用。作为对象方法调用，this指向对象；作为普通函数调用，this指向undefined（严格模式）或全局对象；call/apply/bind显式指定；箭头函数则看外层词法作用域。把这个口诀背熟，再结合题目做几遍，基本能覆盖所有this考点。

2.2 HTML/CSS考点：别看简单，藏着不少陷阱

很多准备笔试的人会轻视HTML/CSS，觉得“这有什么好考的”。实际上了考场就会发现，CSS的题目往往是最容易丢分的“温柔陷阱”。

58同城那场笔试的CSS题里，布局相关的题目占了不小的比重。经典的就是Flex布局中flex-grow、flex-shrink、flex-basis三者的计算逻辑。比如：一个容器里有三个子项，各自的flex比例是1:2:1，容器的宽度不够时，三个子项分别怎么收缩？这种题如果你只是“用过Flex但从来没算过比例”，几乎必错。

我的建议是，准备笔试时把Flex的三大属性当成数学公式来记：flex-grow决定剩余空间怎么分配，flex-shrink决定空间不足时按什么比例收缩，flex-basis决定项目在分配空间前的默认大小。把这三条规则理解清楚，再找两三道计算题练手，比背十条“Flex布局技巧”有用得多。

CSS的另一个常考陷阱是层叠上下文和z-index。题目通常会构造一个复杂嵌套结构，问你某个元素的层级关系。要答对这类题，不能只记住“z-index大的在上”，还要知道position、opacity、transform这些属性会创建新的层叠上下文。一旦父元素创建了层叠上下文，子元素的z-index就只能在这个上下文内部比较，不能再和外部元素直接比较了。

HTML的考点则更偏向语义化和标签使用场景。比如section和article的区别，label和表单控件的关联方式，>