企业官网建设流程全解析

前两天整理旧硬盘，翻出一份2017年秋招的字节跳动前端工程师笔试试卷，当时存着准备复盘用的。跟现在五花八门的面试题比起来，这份卷子确实透着年代感，但仔细看下来，里面大部分考点到现在依然是前端面试的标配。很多同学问我现在前端面试到底该怎么准备，我觉得与其去看那些"2026最新面试题"的速成清单，不如把这套老卷子掰开揉碎看一下，理解了考点的底层逻辑，比背十份新题都管用。

这篇文章就围绕这份试卷展开，把题型结构、核心考点、答题思路一点点拆开讲清楚，最后再聊聊哪些考点到2026年的今天依然适用，哪些已经被时代淘汰。无论你是正在准备校招的应届生，还是打算跳槽的初级前端，都能从里面拿到一些能直接用的东西。

1. 回到2017年：这份笔试题出现的时代背景

1.1 2017年前端生态到底长什么样

要理解一份笔试题，先得理解它出题的时代。2017年对前端来说是个很有趣的时间节点，很多东西正在剧烈变化。Vue 2.0在2016年9月发布，那时候很多人还在观望，但社区热度已经明显起来了。React 16的Fiber架构是2017年9月发布的，正好在秋招前后，说明这个框架正在经历一个重要的架构升级期。小程序是2017年1月发布的，刚出来半年多，整个行业都在摸索。TypeScript虽然存在，但远没有今天这么普及。ES6已经在逐步普及，但ES2015到ES2017之间的新特性差距，对很多同学来说还是知识盲区。

这套组合拳对笔试的影响很直接：大厂不能再只考jQuery操作DOM了，也不能把ES6新语法当成加分的超纲题。但又不能直接考新框架的API，因为校招候选人很多都还没真正用过这些框架。所以笔试的定位就变得很微妙，它得通过一套题同时筛选出"基础扎实的人"和"学过新东西的人"，还不能让题目完全脱离当时的技术语境。2017年的笔试试卷大体上是这样一个结构：基础题占大头，考察语言和浏览器基本功；中等题穿插一些ES6、异步、网络协议的内容；最后放一到两道手写编程题，考察代码实现能力和工程思维。

1.2 大厂校招笔试的考察逻辑

现在经常看到有人吐槽笔试题目"太理论""工作中根本用不到"，这是没理解校招笔试的本质。校招不像社招那样能考察真实项目经验，候选人简历上写的项目，很多都是照着教程做的demo，面试官很难通过简历区分谁是真的有工程能力。笔试的作用就是在简历和面试之间加一道硬性筛选，把那些"背了面试题但完全没理解"的人挡在门外。

所以你看大厂的笔试题目，尤其是2017年这个阶段的题目，很少会直接问你"Vue的data为什么要写成函数"这种背答案型的问题，而更倾向于考那些需要真正写代码才能暴露水平的知识点。比如手写一个防抖函数，只要写过代码的人都知道防抖是什么，但能不能把this绑定、事件对象传递、立即执行参数都处理好，那就是另一码事了。再比如让你讲讲原型链，这东西确实有点绕，但不管以后前端生态怎么变，只要JavaScript还在，原型链的理解就是衡量一个前端是否真正入门的分水岭。

这种考察逻辑我觉得到今天都没有变，只是难度和维度变高了。从"会不会写防抖"变成了"能不能手写简化版的Vue响应式"，从"知道跨域有哪些方案"变成了"能不能写出JSONP的完整实现"。考察的底层能力是相通的。

2. 核心考点拆解：这份试卷在考什么

2.1 HTML/CSS：基础布局与兼容性

一份完整的前端笔试试卷，HTML和CSS部分通常占到两到三成。2017年的题目在这块的典型分布是：CSS盒模型和BFC相关的基础概念、几种经典布局方式的实现（两栏、三栏、水平垂直居中）、CSS选择器优先级、清除浮动的原理、移动端适配的rem方案等。

盒模型这个点几乎必考，因为它直接反映一个人对CSS最底层机制的理解。2017年的题目里常见问法是"标准盒模型和怪异盒模型的区别是什么，怎么切换"。这题看似简单，但每次都能筛掉一拨人。很多人只知道box-sizing: border-box能切换，但对content-box和border-box两种模式下width的语义差异讲不清楚。实际上这个知识点的核心在于：content-box下，width只是内容宽度，padding和border是额外加进去的；border-box下，width包含了padding和border，但内容区域会被压缩。理解了这一点，后面所有关于布局宽度的计算就都能推导出来，而不是死记公式。

Flex布局在2017年已经算主流了，但浏览器兼容性问题还比较突出，所以笔试中经常会出现"使用flex实现一个经典的圣杯布局，并说明各属性的作用"这类题。出题人一方面想确认你掌握了flex的核心属性（flex-grow、flex-shrink、flex-basis），另一方面想考察你是否了解老的浏览器降级方案。说实话，如果你在2017年能答清楚flex和Float布局两种方案，基本就能从这题拿到不错的分数。

让我印象比较深的是，2017年笔试卷子中CSS部分还喜欢考"说说你对BFC的理解"。这个到今天依然是高频题，但它考察的其实是逻辑思维和归纳能力。BFC的触发条件、作用、包含关系，每一块都是独立的，能不能把它们串起来，在纸上画出一个清晰的脉络，面试官一眼就能看出来。

2.2 JavaScript：闭包、原型链与异步

这一部分是整张卷子的重头戏，占分最重。2017年的笔试题在JavaScript上最喜欢考的方向，我总结下来有这么五个：变量提升与作用域、闭包、原型链与继承、this指向、异步与事件循环。每一条都是老生常谈，但它们组合在一起能出无数道题，而且每道题都能有效区分"背过八股文"和"真正理解JS运行机制"的候选人。

变量提升这类的题目在2017年出现得特别多，因为那时候var还是声明变量的主要方式。笔试经常给出一段代码，里面混着var声明、函数声明、函数表达式，要求写出输出结果。这种题考察的其实就是执行上下文和词法作用域的理解。到了2026年，var几乎已经退出了新代码的编写，但面试中却依然保留着这类题目，因为它考察的是对JS解释执行机制的理解，这跟用不用var没关系。

闭包和原型链这两块，在2017年的试卷里几乎都是以"名词解释+代码实现"的形式出现。比如"什么是闭包？说出两个实际应用场景"，比如"手写一个继承的实现，并说明它的优缺点"。这些题目到现在仍然是前端面试的常青树，因为闭包和原型链是JavaScript和其他语言最不一样的地方，如果你真的理解了这两个概念，说明你已经从一个"写HTML的"开始转变为"理解JavaScript语言的人"了。

异步是2017年笔试的一个分水岭。那年正好是Promise从"很多人听过没用过"到"逐渐成为标配"的过渡期，所以很多卷子会出两类题：一类是传统的setTimeout + 回调考察事件循环的执行顺序，另一类是让候选人对比Promise和回调函数两种异步方案的优劣。前者考的是你对Event Loop的底层理解，后者考的是你对工程实践的思考。这两类题到现在都是大厂面试的必考，只是现在的版本换成了async/await。

2.3 浏览器与网络：从URL输入到页面展示

2017年笔试的一道经典综合题是"在浏览器地址栏中输入URL，按下回车，到页面展示，经历了哪些过程"。这道题几乎是所有大厂笔试的标配，因为它覆盖的知识点极其广泛：DNS解析、TCP三次握手、HTTP请求与响应、浏览器渲染流程、HTML和CSS解析、JavaScript执行与阻塞、合成与绘制，可以说大半张前端知识地图都缩在这一个题目里。

这道题给我的感觉是，它考察的不是"知道几个知识点"，而是"能不能把零散的知识点串成一条逻辑链"。很多同学能说出DNS和三次握手，能说出渲染流程里的那几个步骤，但一到"CSS加载会阻塞渲染吗""JavaScript放在head里和body底部有什么区别"这种细节，就支支吾吾了。

2017年这个时间点，HTTP/1.1还是绝对主流，HTTP/2虽然2015年就出了RFC，但普及率并不高，所以当时的笔试很少会深入问HTTP/2的多路复用和头部压缩。对缓存机制的考察倒是实实在在的，强缓存和协商缓存的区别、Cache-Control和Expires的优先级、ETag和Last-Modified的关系，这些都是笔试选择题和简答题的高频素材。

另外跨域问题在那年也极其常见，因为前端工程化的普及让开发环境和线上环境的域名分割成了常态，JSONP、CORS、postMessage、document.domain这些方案几乎人人都需要掌握。笔试常见考法是在代码题里让你实现一个JSONP封装，或者在简答题里分析几种跨域方案的适用场景。

2.4 框架与工程化：刚起步的Vue/React

2017年的笔试对框架的考察，跟现在比起来可以说相当克制了。React和Vue都开始成为热门，但笔试试卷里一般不会出现太深入的API题，更多是问一些核心概念，比如"Vue的双向数据绑定的原理是什么""React中setState是同步还是异步""Vue中组件的通信方式有哪些"。

这些题目在今天看来都是"入门基础"，但在2017年，它们能真正检验候选人是不是自学过新东西，而不仅仅是在学校里学了点JavaScript课程。我记得那时候一些卷子甚至会增加一个开放式问题，让你谈谈对Virtual DOM的理解，以及它相比直接操作DOM的优势和劣势。这种题目没有标准答案，但对候选人的发散思维和知识迁移能力要求很高。

工程化方面，2017年正好是webpack从2到3过渡的时期，笔试题目一般围绕"Webpack是干什么的"“Loader和Plugin的区别”这两个基础概念来出题。经历过那个时期的同学应该都有印象，很多初级前端对webpack是恐惧的，配置文件又长又难懂，报错信息又绕。所以笔试出现工程化题目，已经把一大部分人拦住了。

我在2017年面试候选人时，其实不太看重框架部分的答题情况，因为校招候选人里没几个真正在生产环境里跑过大型应用。框架题存在的主要意义是试探候选人的学习能力和对新技术的敏感度。如果你能清楚地讲出Vue的双向绑定原理，至少说明你在课余时间做了功课。

2.5 算法与手写题：考察编码基本功

算法题在前端笔试中的占比，2017年比今天要低不少，但核心编程题是必备的。常见的有数组去重、字符串反转、斐波那契数列，以及排序算法的实现等。这些题目单独看都不难，但在有限时间内、纸上或简单编辑器里完成，还要保证代码的正确性和规范性，对当时的应届生来说是有挑战的。

这份试卷的算法题最大的特点是考察"多重解法"。比如数组去重，最简单的是用Set，但如果你只用Set，面试官可能会追问"如果不借助Set，你会怎么做"，然后是"如果用filter + indexOf怎么写，性能如何"，接着是"如果数组里的元素是引用类型怎么办"。一套追问下来，候选人之间的差距就拉开了。我面试时特别喜欢这么干，因为它能把一个人的知识深度和思维速度完全暴露出来。

手写题里还有一个经典方向是"实现一个函数"，比如手写call/apply/bind、手写一个事件订阅发布器、手写深拷贝、手写Promise的基本结构。这些题目到今天依然是前端面试的热门，因为它们在有限的代码量内考察了this绑定、原型、闭包、异步等多个知识点，简直是最高效的面试工具。

3. 经典题型与解题思路实录

我挑几个当年笔试卷子里特别有代表性的题目，从出题意图到解题思路完整拆解一遍，帮大家理解所谓"笔试"到底在考什么。

3.1 手写防抖函数：闭包、this与定时器的综合考察

手写防抖（debounce）是前端笔试题里的经典题目，2017年考，2026年还在考。题目描述很简单：实现一个防抖函数，当事件被连续触发时，只在最后一次触发后等待一段时间再执行回调函数。

一个相对完整的实现在当时已经能得高分了：

function debounce(fn, wait) { let timer = null; return function() { const context = this; const args = arguments; if (timer) { clearTimeout(timer); } timer = setTimeout(() => { fn.apply(context, args); }, wait); }; }

这个实现的关键点有三个。第一，必须用闭包保存timer变量，每次调用返回的新函数都能访问到同一个timer；第二，需要把this和arguments保存下来，确保直接调用fn时不会丢失上下文；第三，要注意每次触发时必须先清除上一次的定时器，否则防抖就失效了。

这道题最常犯的错误就是漏了this绑定。很多人写出来的版本是直接在setTimeout里调用fn()，看起来也能跑，但一旦在Vue组件里用这个方法，this指向就乱了。面试官只要追问一句"如果这个函数的调用对象需要保留，你的实现支持吗"，很多人就露馅了。所以从2017年开始，前端笔试就开始在题目里暗藏this这个雷区，能不能避开，就是高手和新手的区别。

3.2 原型链与继承：从面试官角度理解提问意图

"谈谈JavaScript中原型链是什么，以及你了解的继承方式"。这道题在2017年的试卷里基本属于必备题，而且经常是以代码题的形式出现，要求你手写一个继承。

理解这道题，得先跳出"背诵概念"的层面。原型链本质上描述的是对象之间的一种委托关系：当你访问一个对象的某个属性或方法时，如果这个对象自身没有，JavaScript会沿着它的原型链一路往上找，直到找到或者走到原型链尽头返回undefined。这个机制是JavaScript实现复用的核心方式，跟Java的类的继承在底层机制上完全不同。

2017年的标准答案通常会从构造函数、prototype、__proto__三个要素之间的关系讲起，然后列举几类继承方式：原型链继承、构造函数继承、组合继承、寄生组合继承。每一种都有明确的优缺点。比如原型链继承的问题是引用类型属性会被所有实例共享，构造函数继承的问题是方法无法复用，组合继承虽然解决了这两个问题，但会调用两次父构造函数。

我在面试的时候其实不太在乎候选人能否说出全部继承方式的名称，我更看重的是他能不能在纸上画出一条完整的原型链，以及能不能解释清楚"为什么ES6的class本质上是语法糖"。这些东西听起来很八股文，但真正理解它们的人，在后续排查复杂bug时会比其他人快很多，因为很多隐性的问题就藏在原型和this的相互作用中。

3.3 从输入URL到页面展示：考的是知识串联能力

这道题我在前面提过，是整个2017年秋招笔试中最经典的综合题，没有之一。它考察的范围横跨网络、浏览器、前端渲染三大领域，基本上每个部分都能单独再出好几道子题。

要想答好这道题，不能按照时间线简单罗列步骤，而是要分层表达。我当时给候选人建议的答题框架是这样的：先分大类，分为"网络请求阶段"和"浏览器渲染阶段"；在网络请求阶段，依次说清楚DNS解析、TCP连接、HTTP请求发送、服务器响应、浏览器接收；在渲染阶段，从HTML解析、CSSOM构建、JavaScript执行、DOM树与CSSOM合并成渲染树、布局、绘制到合成，每一步都说明白了。

尤其要注意的是，答题时一定要把"阻塞"这个概念讲清楚。比如解析HTML过程中遇到script标签，会停止解析，去下载并执行JavaScript，这就是为什么建议把script放在body底部。再比如CSS不会阻塞DOM解析，但会阻塞渲染，因为渲染树需要同时依赖DOM和CSSOM。这个知识点在2017年就是拉开差距的关键，因为很多候选人只知道"把脚本放底部"这个结论，却不知道背后的原理。

这道题到现在依然是面试官最爱考的综合题，只是问法变成了"从用户在浏览器输入网址到看到页面，谈谈你的理解"。如果2017年的版本你能彻底吃透，到现在依然可以直接用，因为核心机制没变，只是加了HTTP/2、HTTP/3、Service Worker、CDN这些新技术。

3.4 数组去重的几种方案：复杂度意识从笔试抓起

数组去重是2017年笔试编程题中出现频率最高的题目之一。它看起来人畜无害，但想答得漂亮，需要同时具备语言基础、数据结构和复杂度分析能力。

最直接的方案是双重循环，时间复杂度O(n²)，空间复杂度O(n)。然后是indexOf或者includes的方案，本质上也接近O(n²)。用对象做哈希表可以把时间复杂度降到O(n)，但有一个坑：对象的key会被转换成字符串，所以数字1和字符串'1'会被当成同一个key。ES6的Set方案最简洁，但面试官一般不会满足于这个答案。

我当时面试应届生，如果第一版就写出了Set方案，我会先肯定一下，然后追问"如果数组里包含对象元素，两种方案分别会得出什么结果"。这个问题一出来，至少能筛掉一多半的人，因为很多人只知道Set能去重，却不知道Set的去重是基于SameValueZero算法的，本质上要求的是值相等，对象之间是引用比较，不同对象即使内容相同也不可能被判为相等。

2017年的秋招笔试题中，这道题的加分项是写出一个通用的、可以处理基本类型和引用类型的去重函数，并说明每种方案的时间复杂度。到了今天，题目难度升级成"用reduce写一个符合函数式风格的去重"，或者"如何在不去重的前提下统计每个元素出现的次数"，但考察的底层能力是完全一样的。

3.5 异步题目与Promise：2017年笔试的"新物种"

2017年的笔试是理解Promise从"新东西"变成"标配"的绝佳窗口期。不少试卷都出现了这样的题目：

setTimeout(function() { console.log(1); }, 0); new Promise(function(resolve) { console.log(2); resolve(); }).then(function() { console.log(3); }); console.log(4);

要求写出输出顺序。正确答案是2、4、3、1。这道题考察的是对Event Loop和微任务/宏任务的理解。Promise构造函数里的代码会立即同步执行，所以先打印2；then里的回调属于微任务，会在当前宏任务结束后执行，所以先打印4再打印3；setTimeout的回调属于宏任务，放到下一轮事件循环中，所以最后打印1。

这道题在2017年的卷子里曾让很多人翻车，因为那时候大家对微任务和宏任务的概念还不像今天这么熟悉。我记得当时不少候选人能答出"先输出2和4"，但分不清then和setTimeout谁先执行。到了2026年，这个知识点已经成了前端面试的基础常识，几乎没有人不会。但面试官也学会了变着花样考，比如把两个Promise套在一起，加上async/await，或者混入process.nextTick（Node环境），反正核心还是那个Event Loop。

3.6 CSS三栏布局：看似基础实则陷阱重重

CSS三栏布局（左右固定宽度，中间自适应）在2017年笔试中几乎必考。它有趣的地方在于，实现方式有五六种，但每种都有不同的适用场景和缺陷。

float方案是最传统的，左右两栏分别float: left和float: right，中间栏通过margin避开左右宽度。但float方案有一个经典问题，就是中间栏的内容如果高度超过两侧，宽度小于两侧的margin，会导致出现跳动错位，而且需要在父容器上清除浮动。绝对定位方案实现最简单，但父容器的高度会塌陷，因为绝对定位的元素不参与文档流。flex方案在今天看来最优雅，display: flex + flex: 1就把问题解决了，但在2017年需要考虑IE的兼容性。

我当时总结的答题策略是：先给出flex方案并说明它是未来的主流，然后再用float写一个经典方案，展示你了解这个问题的历史脉络。最后一定要谈一谈各自的优缺点，不然面试官会觉得你只是背模板。这道题在2026年的今天几乎已经被时代淘汰了，因为CSS Grid的普及让三栏布局变得异常简单，但如果你能讲清楚不同实现方案的演进，面试官会认为你是一个真正理解CSS演进历史的人。

4. 2026年回看：哪些考点还活着，哪些已经过时

4.1 常青树考点：JS基础、浏览器原理、网络基础

从2017年到2026年，前端技术栈已经换了不知道多少轮，但有些考点依然是面试的压舱石。JavaScript的核心机制——闭包、原型链、作用域、this绑定、事件循环——不管框架怎么变，面试官都会问。原因很简单，任何框架最终都要编译成JavaScript运行，而框架内部的各种老bug和隐藏行为，很多都源于这些底层机制。如果你不理解this，你在写Vue或React组件时遇到this指向错乱就会一头雾水；如果你不理解事件循环，你就无法真正理解为什么setTimeout在特定场景下不准时。

浏览器的渲染机制和网络协议也是常青树。从输入URL到页面展示的整个过程，到今天依然是前端面试的核心综合题，只是现在需要补充Service Worker、HTTP/2、HTTP/3、CDN、预加载等新内容。缓存机制更是如此，2017年考Cache-Control，2026年依然在考，因为缓存永远是前端性能优化中性价比最高的一环。

所以如果你想在2026年准备面试，与其花大量时间刷最新的框架题，不如先把这些底层基础夯实。我见过太多候选人简历上写各种新技术，但一问他"事件循环里微任务和宏任务的执行顺序"，就支支吾吾。这种人进团队之后写代码往往也是靠复制粘贴，非常危险。

4.2 不断演进的考点：从ES5手写到工程化实战

2017年的考点中，有一部分并没有退场，但形态发生了变化。比如当年考"var和let的区别"，现在变成了"const和let的使用原则，以及暂时性死区的具体表现"。当年考"实现一个简单的Promise"，现在变成了"手写一个支持异步链式调用的Promise/A+"，代码量从二三十行变成了上百行。当年考"webpack的Loader和Plugin区别"，现在变成了"如何为Vite写一个插件"，或者是"ESBuild、Rolldown这些新构建工具之间的差异对比"。

这个演进逻辑其实很清晰：考点本身没有变，变的只是承载它们的技术容器。基础能力要求更高了，因为工程工具的抽象度越来越高，如果你不了解底层发生了什么，遇到复杂问题根本无从下手。

另外有一个比较明显的变化是，TypeScript相关的考察在2026年已经成了不可回避的板块。2017年的笔试试卷里几乎没有TypeScript的题目，但现在大厂面试基本都会问接口定义、泛型约束、类型体操这些问题。这并不代表2017年的试卷过时了，恰恰相反，TypeScript的类型系统本身就是建立在JavaScript的运行时基础之上的，如果你对原型链、this、闭包这些概念理解不到位，写TypeScript也会遇到各种类型报错不知道怎么解决。

4.3 已经退场的考点：浏览器兼容、老API、jQuery

2017年的笔试试卷里还有些内容，放到2026年基本可以不用看了。最典型的是IE浏览器的兼容性问题，当年笔试喜欢考"CSS hack有哪些""怎么处理IE6的双边距Bug"，这些在今天已经完全失去了现实应用场景，因为IE已经退役多年，Chrome和Safari的占比已经是绝对主流。

jQuery相关的题目也基本退出了主流面试。2017年的时候，很多学校课程还在教jQuery，笔试偶尔会考$.ajax和$.each这一类API的用法。但今天，原生JavaScript的API已经足够强大，fetch、querySelector都极大简化了DOM操作，React和Vue更是让直接操作DOM的场景大大减少。再考jQuery，就有点像是考一个已经灭绝的物种了。

还有一个变化比较大的点是移动端适配。2017年的笔试比较喜欢考rem方案和viewport的meta标签设置，因为当时移动端H5还比较流行。到今天，虽然H5开发依然存在，但项目的复杂度和混合开发模式已经发生了很大的变化，面试官更倾向于考察响应式设计、容器查询、性能优化这些更高级的话题。

5. 一份旧试卷的正确用法：自测与查漏补缺

5.1 限时模拟与错题归因

一份2017年的笔试试卷，放到今天当然不能完全用来衡量你的水平，但它依然是一份很好的自测材料。我建议的做法是：找一个完整的时间段，比如周末上午，把自己关在书房里，按照笔试的规格严格控制时间，比如60到90分钟，手写或者用一个简单的文本编辑器把所有题目都答一遍。

答完之后，不要急着对答案，先做错题归因。把每道做错的题目按照"知识遗忘""概念混淆""代码实现有bug""完全不会"四个维度分类。知识遗忘的问题最好解决，翻一翻文档就能想起来；概念混淆需要你把这个概念和它相邻的几个概念全部梳理一遍，比如"进程和线程""任务队列和微任务"；代码实现有bug的题，说明你平时练习太少，需要多写多练；完全不会的题目，说明你的知识框架里存在盲区，需要系统补齐。

我见过很多同学刷题的方式是：打开一道题，想不出来就立刻看答案，看完觉得自己懂了，然后接着看下一道。这种刷题方式在笔试中几乎无效，因为面试官考察的不只是你会不会这道题，而是你能不能独立分析并解决一个没见过的问题。限时模拟最大的价值在于模拟那种"时间紧迫、思维压力大"的状态，只有在这种状态下暴露出来的问题，才是你真正需要解决的问题。

5.2 由考点引出的现代前端学习路径

如果你现在还是准备阶段，想系统学习前端，完全可以以这份试卷为基础，然后沿着考点的线索向外延伸出一棵现代前端知识树。

HTML/CSS基础这条线，从盒模型、布局、BFC，延伸到Flex布局、Grid布局、CSS变量、容器查询、响应式设计。JavaScript这条线，从闭包、原型链、事件循环，延伸到ES6+的常用语法、TypeScript类型系统、异步编程的进阶模式。浏览器这条线，从渲染流程、缓存、跨域，延伸到性能优化、Web Worker、Service Worker、渲染管线、Core Web Vitals。框架这条线，从Vue双向绑定和React setState的初级概念，延伸到组件设计、状态管理、路由原理、SSR。工程化这条线，从webpack的Loader和Plugin，延伸到Vite、ESBuild、代码规范、CI/CD、Monorepo。

你会发现2017年的试卷虽然旧，但它划出来的知识模块与2026年的学习地图几乎一一对应。这证明了前端知识体系的核心骨架是稳定的，变的只是每个模块内部的具体工具和实现方案。与其在各种碎片化教程里打转，不如从一份基础扎实的试卷开始，沿着一根主线向外扩展，这样构建出来的知识体系才是立体的。

5.3 给准备校招的同学几个建议

最后分享几个这几年面试校招候选人后总结出来的切身感受。

笔试刷题不要只追求"会做"，要追求"能讲清楚为什么这样做"。面试官在笔试之后往往会针对你做过的题目展开追问，如果你的答案是背出来的，一个关于"为什么"的问题就能让你原形毕露。

不要忽略手写代码的规范性。我曾经见过候选人算法思路完全正确，但代码里没有分号、变量命名随意、函数没有注释，这种代码在笔试评分中会被扣不少印象分。就算不要求严格的代码规范，至少要保证变量命名有意义、函数职责清晰、有基本的错误处理意识。

遇到完全没见过的题目，不要直接放弃。试着把自己已知的相关知识点写下来，哪怕只写一个思路框架，也能让面试官看到你的思考过程。2017年这份试卷里有不少题目其实都是"看起来陌生、拆开之后都是基础知识点"的套路题，能冷静拆解的人永远比当场懵掉的人得分高。

我从2017年看到2026年，前端面试题目变了无数轮，但筛选人才的逻辑几乎没有变过：基础扎实、思维清晰、有工程意识、能沟通想法。这份老试卷，至今仍然是一个不错的练习起点。