2019年这个时间节点正好卡在前后端分离已经全面普及、但工程化体系还没完全固化的阶段。那年校招笔试前端开发工程师的题目风格很有代表性JavaScript基础仍然是绝对主角ES6新特性已经大量出现在考题里CSS布局题依旧高频同时webpack、HTTP缓存这类工程化知识也开始成为拉开差距的得分点。这篇文章不搞什么真题合集式的罗列而是从当年的出题逻辑出发把笔试背后真正要考察的能力模型讲清楚再配合具体题目类型和答题思路做拆解。不管你是准备面试还是想补一下基础都能从中看到一条清晰的复习主线。1. 校招笔试考察方向与能力模型解析1.1 2019年前端岗位的行业背景与能力要求2019年的前端圈框架大战基本尘埃落定Vue和React二分天下 Angular在小范围内保留。但有意思的是当年校招笔试很少直接考框架API更多是考框架背后的原生JavaScript能力。这是因为面试官心里清楚框架迭代太快今天背的API过半年可能就废弃了但JavaScript的语言特性、浏览器的工作原理、网络协议这些底层知识是稳定的。笔试考这些筛的是候选人有没有长期成长的潜力。另外2019年也是前端工程化需求爆发的时期。webpack 4刚发布不久配置已经变得相对友好但很多应届生对这个东西还是陌生的。笔试题目里开始出现webpack的Loader和Plugin有什么区别如何做代码分割这类问题就是为了判断候选人有没有在真实项目里摸爬滚打的经验。如果你只是在培训项目里写过几个静态页面这类题目基本是拿不到分的。从能力模型上看当年笔试主要拆成四个维度语言基础JavaScript核心机制、浏览器与页面CSS布局和渲染原理、网络与安全HTTP协议和常见攻击、工程化与算法构建工具和基本算法思维。这个能力模型其实到现在依然适用只是深度和范围在持续增加。1.2 笔试在整个校招流程中的定位与筛选逻辑校招流程一般是网申、笔试、技术面试、HR面。笔试的定位很明确从几千份简历里快速筛出有编程基础、逻辑思维正常、且有学习潜力的人。它的效率优先于信度不追求考出每个人的精确水平只需要把明显不合格的候选人挡在面试门外。这意味着笔试题目设计上有几个特征。第一基础题占比高60%左右的题目属于背过就会没背就懵的送分题用来快速淘汰没认真准备的人。第二有少量区分度高的题目可能是算法题也可能是开放性的设计题用来筛选真正有实力的人。第三手写代码题通常不会太长但会考察关键细节比如函数节流防抖、深拷贝、Promise实现这些题目看的就是你对边界条件的把握。理解了这个筛选逻辑你就知道复习的重点放在哪里了。不要一上来就啃源码先把基础概念刷透再刻意练习手写代码题最后才去抠那些偏门怪题。2. JavaScript基础与手写代码题深度拆解2.1 数据类型与变量提升这些送分题为什么总有人丢分JavaScript的数据类型是笔试必考题但很多人在这道送分题上反而丢分。典型的考法是typeof null输出什么null instanceof Object是true还是false0.1 0.2 0.3的结果是什么。这些题看着简单实际上考察的是对语言规范的掌握程度不背就是不会。typeof null返回object这是JavaScript历史上的一个遗留bug当年第一版用类型标签区分数据类型时null被错误标记为了对象类型。这个理解不了就只能死记硬背。而0.1 0.2不等于0.3是因为浮点数在二进制里无法精确表示计算机只能用近似值存储。笔试里更进一步的考法是让写出解决方案parseFloat((0.1 0.2).toFixed(10))或者先把数字放大成整数再除以倍数这两种方案都要能写出来。变量提升hoisting也是高频考点。考法通常是给一段代码问输出顺序。比如console.log(a) var a 1 function foo() { console.log(a) var a 2 } foo()答案是undefined和undefined。因为var声明会被提升到作用域顶部但赋值不会。var a 1在代码执行前已经被解析为声明var a此时值是undefined所以第一次打印是undefined。函数内部的var a 2同理它遮蔽了全局变量但在赋值前访问时是undefined。2.2 手写防抖节流与深拷贝不只是背代码面试官让手写防抖debounce和节流throttle不是为了让你展示记忆能力而是看你有没有真正理解它们的应用场景。防抖是指事件触发后延迟执行如果延迟期间再次触发则重新计时典型的应用场景是搜索框输入联想节流是指固定时间间隔内最多执行一次典型的应用场景是滚动事件监听。防抖的参考实现function debounce(fn, delay) { let timer null return function(...args) { if (timer) clearTimeout(timer) timer setTimeout(() { fn.apply(this, args) }, delay) } }节流的参考实现时间戳版function throttle(fn, interval) { let previous 0 return function(...args) { const now Date.now() if (now - previous interval) { previous now fn.apply(this, args) } } }深拷贝的题出现频率也很高。浅拷贝只拷贝第一层属性深拷贝要递归拷贝所有层级的对象。笔试中如果只让实现基础版本可以用JSON.parse(JSON.stringify(obj))但面试官一定会追问这个方案的局限性答案是无法复制函数、undefined、Symbol、RegExp、Date等特殊类型而且会丢失原型链。在2019年的笔试中能写出递归版本并处理循环引用绝对是一个加分项。2.3 Promise与异步编程题校招笔试的分水岭Promise相关题目在2019年已经算中等难度了但依然能拉开差距因为这届应届生中很多人对异步编程的理解还停留在回调函数阶段。常见的考法有手动实现一个简易Promise、写出Promise的执行顺序、用Promise串行执行多个异步任务。最常见的输出顺序题console.log(start) setTimeout(() console.log(timeout), 0) Promise.resolve().then(() console.log(promise)) console.log(end)答案顺序是start、end、promise、timeout。原因是JavaScript的事件循环机制中宏任务setTimeout在下一轮事件循环执行微任务Promise.then在本轮事件循环的末尾执行。这个知识点在当年不考则已一考就是大批人挂科。关于异步串行笔试中出现过用Promise实现一个异步队列依次执行一组任务的题考察的是reduce或递归的思路。参考解法function runQueue(tasks) { return tasks.reduce((promise, task) { return promise.then(() task()) }, Promise.resolve()) }这种题答对了说明你是真的理解Promise不是背的API而是理解了异步流程控制的本质。3. CSS与浏览器渲染机制高频考点3.1 布局题目flex与浮动、双飞翼与圣杯布局2019年的CSS布局题目flex已经全面普及但经典的浮动布局和双飞翼布局依然是笔试的常客。为什么会这样因为面试官想看看你是否理解CSS布局方案的演进逻辑从表格布局到浮动布局再到flex背后解决的问题是不一样的。笔试一般会直接给出HTML结构要求写出多栏布局的CSS。flex版本非常简洁.container { display: flex; } .left { width: 200px; } .main { flex: 1; } .right { width: 200px; }当年面试官更喜欢的题目是三栏布局左右宽度固定中间自适应要求中间的DOM在最前面方便SEO优先加载主内容。这时候用浮动或者绝对定位来做会更有考察价值因为flex方案中DOM顺序调整的意义会被弱化。这类题考察的是对布局特性的掌握程度会做的人写出来的代码往往是多种方案对比着讲的。3.2 浏览器渲染流程与重排重绘从输入URL到页面渲染完成这个过程在2019年校招笔试中出现的频率非常高。但更多是从浏览器的渲染流程角度来考HTML解析成DOM树CSS解析成CSSOM树两者合并成渲染树然后进行布局Layout和绘制Paint。这种考题的延伸点是重排Reflow和重绘Repaint的区别。重排是当元素的几何属性发生变化时需要重新计算布局代价很高重绘是当元素的外观变化而不影响布局时只需重新绘制代价较低。笔试会问哪些操作会触发重排常见的答案是修改元素宽高、增删DOM节点、修改字体大小、窗口大小变化。优化手段也要会写批量修改样式用class替换style直接修改、动画中使用transform代替top/left、将需要多次修改的DOM设置为display: none后再修改。这些实践经验写在试卷上阅卷人一眼就能看出你有没有在真实环境下做过性能排查。3.3 事件机制层级事件委托怎么考JavaScript的事件机制按2019年的出题频率来看事件委托是绝对的热门。一道典型题目是有一个ul列表几百个li点击每个li时需要弹出它对应的序号怎样实现性能最优最优解是给ul绑定事件而不是给每个li绑定事件document.querySelector(ul).addEventListener(click, (e) { if (e.target.tagName LI) { console.log(e.target.dataset.index) } })这里要注意e.target和e.currentTarget的区别。target是触发事件的元素currentTarget是绑定事件的元素在事件委托场景下它们往往不是同一个。这道题看似基础但很多人会在target的判断上写错。4. 网络与安全性基础题实战解析4.1 HTTP状态码与缓存机制背得多不如用得对前端笔试考HTTP通常集中在状态码和缓存策略上。状态码题目比较直白200正常、301永久重定向、302临时重定向、304未修改走缓存、403禁止访问、404找不到、500服务器内部错误、502网关错误、503服务不可用。这些需要背但更要理解使用场景比如301和302的区别是永久性还是临时性的转移。HTTP缓存策略是笔试的重头戏。强制缓存与协商缓存必须能说清楚。强制缓存由Cache-Control和Expires控制浏览器直接用本地副本不发请求给服务器协商缓存由Last-Modified和ETag控制浏览器需要发请求问服务器这个文件有没有更新服务器返回304则用缓存返回200说明有变化需要重新拉取。笔试常让描述首次请求和后续请求的缓存对比能用表格画出来就非常清晰。另外一个细节是Cache-Control的max-age和no-cache的区别max-age表示缓存多少秒no-cache并不是不缓存而是每次都要向服务器验证一下。这个理解在很多前端面试题里都会反复出现。4.2 从输入URL到页面展示的完整链路回答到什么程度算合格这道题几乎每年前端笔试都会出现它考察的是知识广度从DNS解析到TCP连接再到HTTP请求、浏览器渲染、JavaScript执行每个环节都覆盖到。回答这道题时最容易犯的错误是背流程清单式的生硬罗列缺了每一步为什么是这样的解释。以2019年的标准和参考答案来看完整的脉络是输入URL先进行URL解析检查协议、域名和路径是否合法DNS解析把域名解析成IP地址这里会经过浏览器缓存、操作系统缓存、路由器缓存、本地DNS服务器、根DNS服务器等多级查找建立TCP连接进行三次握手确认双方收发能力正常如果是HTTPS还需要进行TLS握手交换密钥浏览器发出HTTP请求服务器处理请求返回HTTP响应浏览器拿到HTML后边解析边渲染解析到CSS时构建CSSOM解析到JavaScript时下载并执行脚本渲染树构建完成后进行布局、绘制最终展示给用户回答这道题时至少要把第2、3、7步展开说明一下。如果能补上为什么解析到JavaScript时要暂停DOM解析因为脚本可能修改DOM如果边解析边执行会导致状态不一致这就是一个妥妥的加分项。5. 工程化与算法基础拉开差距的加分项5.1 webpack配置题怎么答才不丢分2019年笔试出现webpack相关题目的时候很多应届生直接懵了甚至有人写我用的是Vue CLI没有自己配过webpack。这个回答直接暴露了动手能力的不足。笔试不会问太细的配置项而是从原理层面问webpack的构建流程是什么Loader和Plugin有什么区别如何做代码分割Loader和Plugin的区别是个高频考点。一句话总结Loader是处理器负责对模块的源码进行转换比如把ES6转成ES5、把SCSS转成CSSPlugin是插件负责在构建生命周期中执行更广泛的任务比如打包优化、资源管理、环境变量注入。Loader本质上是函数Plugin本质上是具有apply方法的类。这个区别要能写清楚。代码分割的题在当年算是中等偏上的难度。主要方案是entry配置多个入口、optimization.splitChunks提取公共模块、动态import()实现按需加载。能写出动态import()并且说明它返回的是Promise已经能超过大部分候选人了。5.2 算法题数组与字符串操作更受前端出卷者偏爱前端笔试的算法题难度通常低于后端笔试。2019年的题目不会直接上红黑树或者迪杰斯特拉更多是数组去重、字符串反转、括号匹配这类题。但这不代表没有难度梯度一道数组去重就能拉开不少差距。数组去重最基础的方案是双层循环但面试官期待的是Set版本const arr [1, 2, 2, 3, 3, 4] const unique [...new Set(arr)]更进一步如果是对象数组按某个字段去重或者要求保持原顺序去重就需要用reduce加Map实现。这是考察点你到底是只会背书还是真的理解了数据结构在解决什么问题。字符串操作的常见题型包括判断回文、找出字符串中出现次数最多的字符、实现一个简易的模板字符串替换。这些题的共同特点是题干不长、思路明确、但边界条件容易出错。比如判断回文很多人写完主体逻辑就忘了处理空字符串和单个字符的情况。这些细节在阅卷时非常显眼。6. 答题时间分配与笔试实操心得6.1 笔试现场的时间分配策略2019年校招笔试通常是线上的总时长70到90分钟题量在15到25道之间。包含选择题、简答题和一两道手写代码题。时间分配如果不行很容易出现前面纠结太久、后面代码题根本没时间写的情况。我自己的经验是先花3到5分钟快速浏览全部题目把所有题目分成三个级别——秒杀题、思考题、硬骨头。秒杀题比如数据类型判断、状态码选择看一眼就填不给它们留下停留的时间。思考题比如作用域输出顺序、事件循环输出顺序在头脑里快速过一遍逻辑有把握就选没把握就标记一下。硬骨头比如手写深拷贝、实现Promise留到后面保证有完整的15到20分钟来写。这个策略的核心是用低分险浪费时间换高分题的操作空间。很多人在前面一道两分的判断题上纠结了十分钟后面一道二十分的代码题只写了三行这是最亏的。6.2 阅卷老师的评分习惯与答题技巧要说笔试的技巧级经验我印象最深的是阅卷老师改题速度非常快根本没有时间一个字一个字读。他们看的重点是代码的关键思路是否出现了、边界条件有没有处理、有没有明显的语法错误。所以答题时如果一道简答题题干问请说明X和Y的区别一定先用一句话给出核心结论再展开细节。头一句话答对了后面的展开即使不完美总分也不会低。手写代码题的排版也很关键。在笔试系统里缩进混乱、变量命名随意会严重影响代码的可读性。哪怕逻辑是对的阅卷人也需要花更长时间去理解这很容易影响他的主观判断。至少要保证变量命名是语义化的用debouncedFn而不是fn用result而不是r。注意很多在线笔试系统没有代码自动补全和语法高亮平时的IDE用多了突然切到白屏文本框很容易写出低级语法错误。考前最好找牛客网或者赛码网的原生编辑器模拟练习几次适应这个环境很重要。6.3 盘点我当年反复踩过的三个坑每次复盘笔试失利的同学总会和我聊到几个典型问题。我把它们写在这里算是给后来者提个醒。第一个是大意失荆州型。Array.prototype.sort()默认按字典序排序[10, 9, 100].sort()的结果是[10, 100, 9]。这个坑在校招笔试里反复出现几乎每场都会有几个人栽在里面。解决办法就是考前亲手跑一遍这类基础API的边界case不要想当然。第二个是基础原理说不清型。能用flex三分钟写好页面但一被问flex布局和浮动布局在性能上有什么区别就卡住了。笔试和面试的差异就在这里面试可以当场演示效果笔试必须把原理落到实处。复习时要有意识地用说人话的方式描述每个布局方案的工作机制能用一两句话讲明白才算真懂。第三个是算法恐惧型。看到题目是实现一个函数判断括号是否匹配就想着放弃觉得算法不是前端的活儿。但实际上这道题用栈就能轻松解决和前端开发中处理标签嵌套的逻辑完全一致。笔试题的方向永远是贴近业务场景的不要自己吓自己。回过头来看2019年那个阶段的笔试题目虽然覆盖面广但核心思路就是基础扎实、原理清晰、手写能力过硬。技术栈会迭代框架会更新但这三条底层能力到现在依然是前端岗位的基本盘。把上面的题解和思路吃透比刷十套题都有用。最后再说一句笔试不是终点它只是帮你在面试官面前拿到一张入场券真正的战斗从面试那一刻才真正开始。 2019前端校招笔试全解析：JavaScript/ES6与工程化考点拆解
2019年这个时间节点正好卡在前后端分离已经全面普及、但工程化体系还没完全固化的阶段。那年校招笔试前端开发工程师的题目风格很有代表性JavaScript基础仍然是绝对主角ES6新特性已经大量出现在考题里CSS布局题依旧高频同时webpack、HTTP缓存这类工程化知识也开始成为拉开差距的得分点。这篇文章不搞什么真题合集式的罗列而是从当年的出题逻辑出发把笔试背后真正要考察的能力模型讲清楚再配合具体题目类型和答题思路做拆解。不管你是准备面试还是想补一下基础都能从中看到一条清晰的复习主线。1. 校招笔试考察方向与能力模型解析1.1 2019年前端岗位的行业背景与能力要求2019年的前端圈框架大战基本尘埃落定Vue和React二分天下 Angular在小范围内保留。但有意思的是当年校招笔试很少直接考框架API更多是考框架背后的原生JavaScript能力。这是因为面试官心里清楚框架迭代太快今天背的API过半年可能就废弃了但JavaScript的语言特性、浏览器的工作原理、网络协议这些底层知识是稳定的。笔试考这些筛的是候选人有没有长期成长的潜力。另外2019年也是前端工程化需求爆发的时期。webpack 4刚发布不久配置已经变得相对友好但很多应届生对这个东西还是陌生的。笔试题目里开始出现webpack的Loader和Plugin有什么区别如何做代码分割这类问题就是为了判断候选人有没有在真实项目里摸爬滚打的经验。如果你只是在培训项目里写过几个静态页面这类题目基本是拿不到分的。从能力模型上看当年笔试主要拆成四个维度语言基础JavaScript核心机制、浏览器与页面CSS布局和渲染原理、网络与安全HTTP协议和常见攻击、工程化与算法构建工具和基本算法思维。这个能力模型其实到现在依然适用只是深度和范围在持续增加。1.2 笔试在整个校招流程中的定位与筛选逻辑校招流程一般是网申、笔试、技术面试、HR面。笔试的定位很明确从几千份简历里快速筛出有编程基础、逻辑思维正常、且有学习潜力的人。它的效率优先于信度不追求考出每个人的精确水平只需要把明显不合格的候选人挡在面试门外。这意味着笔试题目设计上有几个特征。第一基础题占比高60%左右的题目属于背过就会没背就懵的送分题用来快速淘汰没认真准备的人。第二有少量区分度高的题目可能是算法题也可能是开放性的设计题用来筛选真正有实力的人。第三手写代码题通常不会太长但会考察关键细节比如函数节流防抖、深拷贝、Promise实现这些题目看的就是你对边界条件的把握。理解了这个筛选逻辑你就知道复习的重点放在哪里了。不要一上来就啃源码先把基础概念刷透再刻意练习手写代码题最后才去抠那些偏门怪题。2. JavaScript基础与手写代码题深度拆解2.1 数据类型与变量提升这些送分题为什么总有人丢分JavaScript的数据类型是笔试必考题但很多人在这道送分题上反而丢分。典型的考法是typeof null输出什么null instanceof Object是true还是false0.1 0.2 0.3的结果是什么。这些题看着简单实际上考察的是对语言规范的掌握程度不背就是不会。typeof null返回object这是JavaScript历史上的一个遗留bug当年第一版用类型标签区分数据类型时null被错误标记为了对象类型。这个理解不了就只能死记硬背。而0.1 0.2不等于0.3是因为浮点数在二进制里无法精确表示计算机只能用近似值存储。笔试里更进一步的考法是让写出解决方案parseFloat((0.1 0.2).toFixed(10))或者先把数字放大成整数再除以倍数这两种方案都要能写出来。变量提升hoisting也是高频考点。考法通常是给一段代码问输出顺序。比如console.log(a) var a 1 function foo() { console.log(a) var a 2 } foo()答案是undefined和undefined。因为var声明会被提升到作用域顶部但赋值不会。var a 1在代码执行前已经被解析为声明var a此时值是undefined所以第一次打印是undefined。函数内部的var a 2同理它遮蔽了全局变量但在赋值前访问时是undefined。2.2 手写防抖节流与深拷贝不只是背代码面试官让手写防抖debounce和节流throttle不是为了让你展示记忆能力而是看你有没有真正理解它们的应用场景。防抖是指事件触发后延迟执行如果延迟期间再次触发则重新计时典型的应用场景是搜索框输入联想节流是指固定时间间隔内最多执行一次典型的应用场景是滚动事件监听。防抖的参考实现function debounce(fn, delay) { let timer null return function(...args) { if (timer) clearTimeout(timer) timer setTimeout(() { fn.apply(this, args) }, delay) } }节流的参考实现时间戳版function throttle(fn, interval) { let previous 0 return function(...args) { const now Date.now() if (now - previous interval) { previous now fn.apply(this, args) } } }深拷贝的题出现频率也很高。浅拷贝只拷贝第一层属性深拷贝要递归拷贝所有层级的对象。笔试中如果只让实现基础版本可以用JSON.parse(JSON.stringify(obj))但面试官一定会追问这个方案的局限性答案是无法复制函数、undefined、Symbol、RegExp、Date等特殊类型而且会丢失原型链。在2019年的笔试中能写出递归版本并处理循环引用绝对是一个加分项。2.3 Promise与异步编程题校招笔试的分水岭Promise相关题目在2019年已经算中等难度了但依然能拉开差距因为这届应届生中很多人对异步编程的理解还停留在回调函数阶段。常见的考法有手动实现一个简易Promise、写出Promise的执行顺序、用Promise串行执行多个异步任务。最常见的输出顺序题console.log(start) setTimeout(() console.log(timeout), 0) Promise.resolve().then(() console.log(promise)) console.log(end)答案顺序是start、end、promise、timeout。原因是JavaScript的事件循环机制中宏任务setTimeout在下一轮事件循环执行微任务Promise.then在本轮事件循环的末尾执行。这个知识点在当年不考则已一考就是大批人挂科。关于异步串行笔试中出现过用Promise实现一个异步队列依次执行一组任务的题考察的是reduce或递归的思路。参考解法function runQueue(tasks) { return tasks.reduce((promise, task) { return promise.then(() task()) }, Promise.resolve()) }这种题答对了说明你是真的理解Promise不是背的API而是理解了异步流程控制的本质。3. CSS与浏览器渲染机制高频考点3.1 布局题目flex与浮动、双飞翼与圣杯布局2019年的CSS布局题目flex已经全面普及但经典的浮动布局和双飞翼布局依然是笔试的常客。为什么会这样因为面试官想看看你是否理解CSS布局方案的演进逻辑从表格布局到浮动布局再到flex背后解决的问题是不一样的。笔试一般会直接给出HTML结构要求写出多栏布局的CSS。flex版本非常简洁.container { display: flex; } .left { width: 200px; } .main { flex: 1; } .right { width: 200px; }当年面试官更喜欢的题目是三栏布局左右宽度固定中间自适应要求中间的DOM在最前面方便SEO优先加载主内容。这时候用浮动或者绝对定位来做会更有考察价值因为flex方案中DOM顺序调整的意义会被弱化。这类题考察的是对布局特性的掌握程度会做的人写出来的代码往往是多种方案对比着讲的。3.2 浏览器渲染流程与重排重绘从输入URL到页面渲染完成这个过程在2019年校招笔试中出现的频率非常高。但更多是从浏览器的渲染流程角度来考HTML解析成DOM树CSS解析成CSSOM树两者合并成渲染树然后进行布局Layout和绘制Paint。这种考题的延伸点是重排Reflow和重绘Repaint的区别。重排是当元素的几何属性发生变化时需要重新计算布局代价很高重绘是当元素的外观变化而不影响布局时只需重新绘制代价较低。笔试会问哪些操作会触发重排常见的答案是修改元素宽高、增删DOM节点、修改字体大小、窗口大小变化。优化手段也要会写批量修改样式用class替换style直接修改、动画中使用transform代替top/left、将需要多次修改的DOM设置为display: none后再修改。这些实践经验写在试卷上阅卷人一眼就能看出你有没有在真实环境下做过性能排查。3.3 事件机制层级事件委托怎么考JavaScript的事件机制按2019年的出题频率来看事件委托是绝对的热门。一道典型题目是有一个ul列表几百个li点击每个li时需要弹出它对应的序号怎样实现性能最优最优解是给ul绑定事件而不是给每个li绑定事件document.querySelector(ul).addEventListener(click, (e) { if (e.target.tagName LI) { console.log(e.target.dataset.index) } })这里要注意e.target和e.currentTarget的区别。target是触发事件的元素currentTarget是绑定事件的元素在事件委托场景下它们往往不是同一个。这道题看似基础但很多人会在target的判断上写错。4. 网络与安全性基础题实战解析4.1 HTTP状态码与缓存机制背得多不如用得对前端笔试考HTTP通常集中在状态码和缓存策略上。状态码题目比较直白200正常、301永久重定向、302临时重定向、304未修改走缓存、403禁止访问、404找不到、500服务器内部错误、502网关错误、503服务不可用。这些需要背但更要理解使用场景比如301和302的区别是永久性还是临时性的转移。HTTP缓存策略是笔试的重头戏。强制缓存与协商缓存必须能说清楚。强制缓存由Cache-Control和Expires控制浏览器直接用本地副本不发请求给服务器协商缓存由Last-Modified和ETag控制浏览器需要发请求问服务器这个文件有没有更新服务器返回304则用缓存返回200说明有变化需要重新拉取。笔试常让描述首次请求和后续请求的缓存对比能用表格画出来就非常清晰。另外一个细节是Cache-Control的max-age和no-cache的区别max-age表示缓存多少秒no-cache并不是不缓存而是每次都要向服务器验证一下。这个理解在很多前端面试题里都会反复出现。4.2 从输入URL到页面展示的完整链路回答到什么程度算合格这道题几乎每年前端笔试都会出现它考察的是知识广度从DNS解析到TCP连接再到HTTP请求、浏览器渲染、JavaScript执行每个环节都覆盖到。回答这道题时最容易犯的错误是背流程清单式的生硬罗列缺了每一步为什么是这样的解释。以2019年的标准和参考答案来看完整的脉络是输入URL先进行URL解析检查协议、域名和路径是否合法DNS解析把域名解析成IP地址这里会经过浏览器缓存、操作系统缓存、路由器缓存、本地DNS服务器、根DNS服务器等多级查找建立TCP连接进行三次握手确认双方收发能力正常如果是HTTPS还需要进行TLS握手交换密钥浏览器发出HTTP请求服务器处理请求返回HTTP响应浏览器拿到HTML后边解析边渲染解析到CSS时构建CSSOM解析到JavaScript时下载并执行脚本渲染树构建完成后进行布局、绘制最终展示给用户回答这道题时至少要把第2、3、7步展开说明一下。如果能补上为什么解析到JavaScript时要暂停DOM解析因为脚本可能修改DOM如果边解析边执行会导致状态不一致这就是一个妥妥的加分项。5. 工程化与算法基础拉开差距的加分项5.1 webpack配置题怎么答才不丢分2019年笔试出现webpack相关题目的时候很多应届生直接懵了甚至有人写我用的是Vue CLI没有自己配过webpack。这个回答直接暴露了动手能力的不足。笔试不会问太细的配置项而是从原理层面问webpack的构建流程是什么Loader和Plugin有什么区别如何做代码分割Loader和Plugin的区别是个高频考点。一句话总结Loader是处理器负责对模块的源码进行转换比如把ES6转成ES5、把SCSS转成CSSPlugin是插件负责在构建生命周期中执行更广泛的任务比如打包优化、资源管理、环境变量注入。Loader本质上是函数Plugin本质上是具有apply方法的类。这个区别要能写清楚。代码分割的题在当年算是中等偏上的难度。主要方案是entry配置多个入口、optimization.splitChunks提取公共模块、动态import()实现按需加载。能写出动态import()并且说明它返回的是Promise已经能超过大部分候选人了。5.2 算法题数组与字符串操作更受前端出卷者偏爱前端笔试的算法题难度通常低于后端笔试。2019年的题目不会直接上红黑树或者迪杰斯特拉更多是数组去重、字符串反转、括号匹配这类题。但这不代表没有难度梯度一道数组去重就能拉开不少差距。数组去重最基础的方案是双层循环但面试官期待的是Set版本const arr [1, 2, 2, 3, 3, 4] const unique [...new Set(arr)]更进一步如果是对象数组按某个字段去重或者要求保持原顺序去重就需要用reduce加Map实现。这是考察点你到底是只会背书还是真的理解了数据结构在解决什么问题。字符串操作的常见题型包括判断回文、找出字符串中出现次数最多的字符、实现一个简易的模板字符串替换。这些题的共同特点是题干不长、思路明确、但边界条件容易出错。比如判断回文很多人写完主体逻辑就忘了处理空字符串和单个字符的情况。这些细节在阅卷时非常显眼。6. 答题时间分配与笔试实操心得6.1 笔试现场的时间分配策略2019年校招笔试通常是线上的总时长70到90分钟题量在15到25道之间。包含选择题、简答题和一两道手写代码题。时间分配如果不行很容易出现前面纠结太久、后面代码题根本没时间写的情况。我自己的经验是先花3到5分钟快速浏览全部题目把所有题目分成三个级别——秒杀题、思考题、硬骨头。秒杀题比如数据类型判断、状态码选择看一眼就填不给它们留下停留的时间。思考题比如作用域输出顺序、事件循环输出顺序在头脑里快速过一遍逻辑有把握就选没把握就标记一下。硬骨头比如手写深拷贝、实现Promise留到后面保证有完整的15到20分钟来写。这个策略的核心是用低分险浪费时间换高分题的操作空间。很多人在前面一道两分的判断题上纠结了十分钟后面一道二十分的代码题只写了三行这是最亏的。6.2 阅卷老师的评分习惯与答题技巧要说笔试的技巧级经验我印象最深的是阅卷老师改题速度非常快根本没有时间一个字一个字读。他们看的重点是代码的关键思路是否出现了、边界条件有没有处理、有没有明显的语法错误。所以答题时如果一道简答题题干问请说明X和Y的区别一定先用一句话给出核心结论再展开细节。头一句话答对了后面的展开即使不完美总分也不会低。手写代码题的排版也很关键。在笔试系统里缩进混乱、变量命名随意会严重影响代码的可读性。哪怕逻辑是对的阅卷人也需要花更长时间去理解这很容易影响他的主观判断。至少要保证变量命名是语义化的用debouncedFn而不是fn用result而不是r。注意很多在线笔试系统没有代码自动补全和语法高亮平时的IDE用多了突然切到白屏文本框很容易写出低级语法错误。考前最好找牛客网或者赛码网的原生编辑器模拟练习几次适应这个环境很重要。6.3 盘点我当年反复踩过的三个坑每次复盘笔试失利的同学总会和我聊到几个典型问题。我把它们写在这里算是给后来者提个醒。第一个是大意失荆州型。Array.prototype.sort()默认按字典序排序[10, 9, 100].sort()的结果是[10, 100, 9]。这个坑在校招笔试里反复出现几乎每场都会有几个人栽在里面。解决办法就是考前亲手跑一遍这类基础API的边界case不要想当然。第二个是基础原理说不清型。能用flex三分钟写好页面但一被问flex布局和浮动布局在性能上有什么区别就卡住了。笔试和面试的差异就在这里面试可以当场演示效果笔试必须把原理落到实处。复习时要有意识地用说人话的方式描述每个布局方案的工作机制能用一两句话讲明白才算真懂。第三个是算法恐惧型。看到题目是实现一个函数判断括号是否匹配就想着放弃觉得算法不是前端的活儿。但实际上这道题用栈就能轻松解决和前端开发中处理标签嵌套的逻辑完全一致。笔试题的方向永远是贴近业务场景的不要自己吓自己。回过头来看2019年那个阶段的笔试题目虽然覆盖面广但核心思路就是基础扎实、原理清晰、手写能力过硬。技术栈会迭代框架会更新但这三条底层能力到现在依然是前端岗位的基本盘。把上面的题解和思路吃透比刷十套题都有用。最后再说一句笔试不是终点它只是帮你在面试官面前拿到一张入场券真正的战斗从面试那一刻才真正开始。