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和表单控件的关联方式>