2017年阿里秋招前端笔试题我在面试现场被它“教做人”之后又当了三年面试官再回头看这份题的含金量是真的高。很多人把焦点放在“难”上但真正有价值的是它考察的方向——没让你背框架API而是把JavaScript基础、浏览器原理、网络协议这些底层能力翻来覆去地考。当年一起准备秋招的几个朋友有的刷了几百道LeetCode结果栽在了一道手写bind上有的Vue源码倒背如流却被一道CSS水平垂直居中问得卡壳。我自己从笔试到拿到offer再到后来参与校招出题越来越明白一个道理这类题目筛选的不是“背了多少”而是“理解多深”。如果你正在准备前端面试或者工作了两三年想回头补基础这份2017年的笔试题都可以当一面镜子照出你知识体系里的盲区。原因很简单前端技术迭代快但底层逻辑没变过今天面试考的还是那些东西只是换了个包装。下面我就把这套题目拆开揉碎从整体思路到逐题解析再到备考方法完整地聊一遍。1. 2017年秋招前端笔试题整体拆解考什么、为什么这么考1.1 这份笔试题的核心定位基础为王框架只是加分项2017年的前端圈和现在有个很大的区别框架已经火了但还没到“不会框架找不到工作”的地步。Vue 2.0刚发布一年React 16还没出来Redux、Vuex这些状态管理库正处于快速普及期。阿里在那个时间节点出笔试题思路很明确——框架可以进来再学但基础不牢的人没法带。所以整套题的目光几乎都盯在几个方向上JavaScript语言本身的特性、浏览器的工作原理、网络协议的基础认知、以及CSS布局的扎实程度。你说它偏吗从今天的视角看这些内容恰好是面试官最该考察的东西因为框架年年换基础能力才是一个工程师能否长期成长的分水岭。我后来参与出题时也延续了这套逻辑先看候选人能不能把一道数组去重写出几种方案再看他是只会背API还是真的理解原型链。考察基础不是刁难人而是在做一个成本最低的筛选动作。对于校招生来说没有太多项目经验可以聊笔试就是判断“这个人值不值得培养”最直接的窗口。1.2 题型分布与答题节奏选择题、简答题、编程题的比例很讲究从当年流传出来的题目结构看这份笔试题主要分成三大块选择题、简答题和编程题。选择题覆盖面很宽从call/apply的区别到事件冒泡的顺序再到HTTP状态码的含义基本是奔着“知识面广不广”去的简答题则开始考察表达能力比如“解释一下闭包”“描述从输入URL到页面展示的过程”这类题没有标准答案但回答的层次感一眼就能看出水平高低最后的编程题是重头戏手写函数、实现某个功能直接检验动手能力。我印象比较深的是答题时间安排。整套题看着量不大但做起来非常烧脑尤其编程题不是你想怎么写就怎么写要考虑边界条件、编码习惯、甚至注释风格。当年有不少人栽在时间分配上前面选择题太纠结后面编程题草草收场。后来我给学弟学妹们分享经验时反复强调拿到卷子先花两分钟扫一遍所有题目心里有个轻重缓急选择题拿不准就先跳过别在一道题上死磕。1.3 2017年的题放到2026年还不过时的三个原因可能有人会觉得2017年距离现在已经好几年了那些题还有参考价值吗我的答案是不但有而且价值很大。第一JavaScript的核心机制没变闭包还是闭包原型链还是原型链事件循环虽然加了新特性但基本原理没变这些内容是永恒的考点。第二浏览器工作原理和网络协议虽然不断演进但DNS查询、TCP握手、HTTP缓存这些底层逻辑依然是前端性能优化绕不开的基础。第三面试官考察的“思维方式”比“知识点”更重要而这份题恰好很看重思维方式。我现在带团队面试前端候选人题库早就更新了好几轮但出题逻辑和2017年阿里的这套题一脉相承。每次看到候选人在手写Promise、实现深拷贝这些题目上卡住我都想说这些题在几年前的笔试里就考过了基础这东西偷不了懒。2. 核心题型详解JavaScript与ES6高频考点2.1 手写实现类题目bind、深浅拷贝、数组去重这类题几乎是当年笔试的“必考题”直到今天依然是面试高频题。先说说手写bind这道题看着简单实际上考察了你对this指向、函数柯里化、原型链、new操作符的理解。我当时写的版本是这样的Function.prototype.myBind function(context) { if (typeof this ! function) { throw new TypeError(Error); } var _this this; var args Array.prototype.slice.call(arguments, 1); return function F() { if (this instanceof F) { return new _this(...args, ...arguments); } return _this.apply(context, args.concat(...arguments)); }; };这段代码里最关键的是this instanceof F这个判断。为什么要有它因为bind返回的函数是可以被new的当它被new时this指向新创建的实例这时候不能再apply到传入的context上否则就破坏了new的语义。很多人手写bind只写了apply那一步漏掉了new的场景这个细节恰恰是面试官最想看到的。再比如深拷贝当时很多人的第一反应是JSON.parse(JSON.stringify(obj))但这个方案有致命缺陷会丢失undefined、函数、Symbol、正则等特殊类型循环引用会直接报错。面试官想看的是你有没有自己实现过递归拷贝并且有没有考虑这些边界情况。我一般会引导候选人先写基础版本再一步步追问Date怎么处理RegExp怎么处理循环引用怎么处理能答到哪一层基本就能判断出他的经验水平。2.2 作用域、闭包与this指向笔试题里的“阴魂不散”2017年这份笔试题里作用域和this的考察方式很多样有代码输出题有简答题还有结合闭包的综合题。比如下面这道经典例题var name window; var obj { name: obj, getName: function() { return function() { return this.name; }; } }; console.log(obj.getName()());很多人会脱口而出“obj”但实际上输出的是“window”。原因是在这个闭包里返回的匿名函数执行时this指向的是全局对象而不是obj。除非用箭头函数或者在外层把this存下来var self this否则this的丢失无法避免。这道题考的就是你对this绑定规则的理解而不是背结论。闭包的考察就更多样了典型的是“写一个计数器”“实现一个防抖函数”“用闭包模拟私有变量”。我当时记忆很深的是防抖函数因为它既能考察闭包又能考察this绑定和参数传递一举多得。核心实现是这样的function debounce(fn, delay) { let timer null; return function(...args) { const context this; if (timer) clearTimeout(timer); timer setTimeout(() { fn.apply(context, args); }, delay); }; }这里必须用fn.apply(context, args)把this传回去否则事件监听里的this就丢了。很多人闭包写得出来但this没绑对这就是基础不扎实的表现。我建议所有准备面试的朋友把“手写防抖和节流”练到可以闭着眼睛写出来因为这两个函数的考点太密集了。2.3 事件循环与异步setTimeout、Promise的执行顺序这一块在2017年就已经是高频考点了到了今天更是面试必问。核心考点是宏任务和微任务的执行顺序。当年笔试里很多输出题是这种形式的console.log(script start); setTimeout(function() { console.log(setTimeout); }, 0); Promise.resolve() .then(function() { console.log(promise1); }) .then(function() { console.log(promise2); }); console.log(script end);正确的输出顺序是script start、script end、promise1、promise2、setTimeout。原理在于Promise的then回调属于微任务宏任务结束后、下一个宏任务开始前会清空微任务队列而setTimeout属于宏任务即使延迟是0也要等当前调用栈和微任务队列全部清空后才会执行。这个知识点光靠背结论是不够的你得理解事件循环的完整流程才能应对各种变形题比如async/await混着Promise或者多个setTimeout嵌套的情况。当年很多人在这里丢分因为当时async/await刚普及不久很多人对它的理解停留在“语法糖”层面不知道await后面其实是一个微任务。后来我面试候选人时也会专门出这类题考察点不是你能不能说出结果而是能不能讲清楚“为什么”。能解释到“微任务在调用栈清空后、渲染之前执行”这个层面的人基本可以确定基础很扎实。2.4 原型链与继承绕不开的JavaScript核心原型链题目在当年的笔试里出得很有深度它不直接问你“什么是原型链”而是让你实现一个继承或者做几个对象之间关系判断的输出题。典型的考察方式是function Parent() { this.name parent; } Parent.prototype.getName function() { return this.name; }; function Child() { Parent.call(this); this.age 18; } Child.prototype Object.create(Parent.prototype); Child.prototype.constructor Child;这道题里有两个关键点每个都要理解到骨头里。第一是Parent.call(this)的作用它是为了继承实例属性让子类实例有自己独立的name不会互相影响。第二是Child.prototype Object.create(Parent.prototype)这一步是继承原型方法关键是不能用Child.prototype Parent.prototype因为那样会让子类和父类共享同一个原型对象后续在Child.prototype上增加方法时会污染父类。另外Object.create和new Parent()的区别在于前者不会执行构造函数不会产生多余的实例属性。我当时在这道题上还主动多写了一层用ES6的class怎么实现继承以及class继承和上面这种寄生组合式继承的差异。面试官一般对主动延伸的候选人印象会更好——这本身就是一种“学习能力”的体现。这里也给准备面试的朋友提个醒笔试时如果时间允许在答完的基础上多写一句自己的理解或延伸效果往往比字斟句酌地只答标准答案更好。3. 浏览器与网络原理前端工程师的必修课3.1 HTTP缓存机制强缓存与协商缓存的完整理解2017年的笔试题里HTTP缓存几乎一定会考。选择题、简答题都有它的身影。核心考点无非是强缓存Expires、Cache-Control和协商缓存Last-Modified/If-Modified-Since、ETag/If-None-Match的区别与配合。我自己的回答框架是先讲“缓存是浏览器对HTTP请求结果的复用”然后分别说明强缓存命中后浏览器直接从本地读取资源根本不会发请求状态码显示200并且from memory cache或from disk cache协商缓存会向后端发请求由服务器判断资源是否有变化如果没变返回304浏览器继续用本地资源。关键在于两者可以同时存在Cache-Control的max-age决定强缓存的有效期有效期过了之后才轮到协商缓存发挥作用。这里有一个很容易被忽略的坑为什么有了Last-Modified还要有ETag因为Last-Modified的精度是秒级如果资源在同一个秒内被修改多次它是区分不出来的而且有些服务器返回的Last-Modified可能不准确。ETag是内容的哈希标识精度更高所以通常说“ETag是Last-Modified的补充”。能在笔试里答到这一层分数基本就稳了。3.2 从URL到页面展示最经典的“贯穿性”简答题这道题在当年的笔试题里几乎是必有的因为它非常考验知识的系统性。一个完整、有层次的答案应该覆盖这么几段DNS解析浏览器缓存、系统缓存、路由器缓存、根服务器递归查询、TCP连接三次握手、发送HTTP请求、服务器处理并返回响应、浏览器解析HTML构建DOM树、解析CSS构建CSSOM树、合成渲染树、布局、绘制、合成。如果页面有JavaScript还要说明脚本会阻塞解析以及async、defer对阻塞的影响。面试官打分时看的是你描述的完整度和层次感。说到“要经过DNS解析把域名换成IP”就停下来的人和能把HTML预扫描、CSSOM构建时机、JavaScript阻塞解析、重排重绘全部串起来的人分数差距是巨大的。当年我在这道题上花了比较多时间不仅把流程写完整还额外提了一下“渐进式渲染”的概念说明HTML解析和资源加载是并行的浏览器会逐步把已经解析好的内容画出来而不是等全部下载完再渲染。后来做面试官时每次听到候选人提到这个点我都会在心里多给一分。3.3 跨域与安全笔试中的“逢考必有”和“逢面必问”跨域在2017年的笔试里通常以简答题或情景题出现比如“前端要调用另一个域名的接口怎么解决跨域”。标准方案有JSONP、CORS、代理转发、postMessage等。我当时给的答案是分层级的先说CORS是后端配置响应头就能解决的正规方案再说JSONP只能支持GET请求而且需要后端配合最后提一下开发环境下用webpack-dev-server代理可以绕过跨域限制。安全方面XSS和CSRF也是高频考点。我记得到时候我写了一个小表格来对比两者XSS是攻击者在页面里注入恶意脚本核心防御是转义和Content-Security-PolicyCSRF是伪造用户请求核心防御是验证Token、检查Referer、使用SameSite Cookie。这种对比式的回答比单纯罗列知识点更容易让面试官记住你。其实现在回看这部分的很多内容到今天依然是安全面试的基础题因为攻击原理没变只是场景在变化。4. CSS与布局别小看“样式题”4.1 水平垂直居中的N种实现从Flexbox到absolute当年的笔试题里CSS考察有一个很经典的题目“一个不定宽高的子元素如何在父元素里水平垂直居中”。这个题考的不是你会一种方案而是你知道几种方案并且能说出各自的使用场景和局限。我的回答模板是这样的第一种Flexbox给父元素加display: flex; justify-content: center; align-items: center;这是现代浏览器最推荐的方案代码量最少兼容性也能接受第二种绝对定位加transform给子元素设position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);适合已知父元素是相对定位、子元素尺寸不确定的情况第三种绝对定位加margin: auto把子元素的top、right、bottom、left都设为0再设margin: auto适合子元素有固定宽高的场景第四种table-cell方案父元素display: table-cell; text-align: center; vertical-align: middle;这个方案比较老但某些特殊布局下依然好用。能把这几种方案都写出来并说清楚适用场景说明你对布局的理解是成体系的而不是只会背一种写法。我当时还特意提了一句面试官要的不是“标准答案”而是“决策能力”和“基础扎实度”。4.2 Flexbox布局与BFC高频考点背后的原理2017年移动端已经全面普及Flexbox已经成为布局的主流方案笔试里直接考察flex属性的题不少比如“flex: 1代表什么”。很多人会背“flex: 1是flex-grow: 1, flex-shrink: 1, flex-basis: 0%的缩写”但能解释清楚flex-basis: 0%和flex-basis: auto的区别就不多了。前者意味着所有项目从零开始按比例分配空间后者意味着先按内容大小分配再把剩余空间按比例分。这种细微差别在实际项目里影响很大笔试里能答出来就是拉开差距的地方。BFC块级格式化上下文也是必考概念通常以“什么是BFC怎么触发解决了什么问题”的形式出现。我理解的BFC就是一个独立的渲染区域内部元素的布局不会影响外部。触发方式有float不为none、position为absolute或fixed、display为inline-block或table-cell或flow-root、overflow不为visible。它的典型应用场景是清除浮动、防止margin塌陷、实现两栏布局。这里我特别想说BFC不只是一个面试题它在实际工作中的利用率非常高只要你做页面布局就一定会跟它打交道。4.3 常见样式陷阱盒模型、浮动清除、margin塌陷笔试题里CSS还有个经典坑标准盒模型和IE盒模型的区别。标准盒模型是box-sizing: content-boxwidth只包含内容区域IE盒模型是box-sizing: border-boxwidth包含内容、padding和border。当年很多人知道这个区别但没意识到box-sizing会改变我们对“宽度”的预期。到现在我还记得一个常见考题一个div设置了width: 100px; padding: 20px; border: 5px solid;问它在两种盒模型下占用的总宽度分别是多少。答案是标准盒模型150pxIE盒模型100px。浮动清除和margin塌缩也常混在这些题里一起考。清除浮动的方式有overflow: hidden、clear: both、.clearfix伪元素法每种方式都有自己的边界。margin塌陷指的是父元素和子元素的margin会合并取较大值解决方式有给父元素加overflow: hidden、加padding、加border、或创建BFC。这些细节单独看都不难但合在一起就能筛掉一批“只写页面不思考原理”的人。5. 框架与工程化Vue/React入门级考察5.1 当年主流的框架考题数据驱动与响应式原理2017年的笔试里框架题已经出现但比重不高而且考察方向很“原理化”。Vue那边最典型的题是“Vue双向数据绑定的原理是什么”答案是Object.defineProperty结合发布订阅模式对data的每个属性定义getter和setter在getter里收集依赖在setter里触发更新。当时很多候选人能说出Object.defineProperty但说不清楚依赖收集和发布订阅的完整链路这就是理解深度不够的体现。React那边比较常考的是组件生命周期尤其强调componentWillReceiveProps和shouldComponentUpdate的使用场景。要知道2017年React还没引入Hooks类组件和生命周期是绝对主流。放在今天回看这些内容已经有些过时了但“组件状态变化到UI更新”的这个心智模型不会过时只是换了个承载方式。我后来面试时不太在意候选人用Vue还是React在意的是他能不能说清楚“当数据变化时页面凭什么更新”。5.2 构建工具Webpack打包的核心思路Webpack在2017年已经成为前端打包工具的代名词笔试里会以简答题的形式问“Webpack打包的基本流程是什么”或者“Loader和Plugin的区别”。我当时给出的答案是Webpack从入口文件开始通过loader将不同类型的资源转换成JavaScript模块再通过plugin在整个打包周期的不同阶段做额外的事情比如压缩、拆包、注入环境变量最后输出成浏览器能识别的静态文件。Loader和Plugin的区别是个很经典的考点。我的表述方式是Loader负责“翻译”把非JS文件转成JS模块比如babel-loader把ES6转ES5css-loader把CSS转成JS模块Plugin负责“扩展”在打包的不同生命周期钩子里做额外工作比如HtmlWebpackPlugin在打包结束后生成HTML文件。理解了这个区别你就能明白为什么“在哪里配置”和“配的是什么”这么重要——配置错了构建不会报错但功能不生效排查起来很痛苦。5.3 工程化思维不只是会写页面2017年的笔试里有一部分题目虽然表面是问“开发中遇到某个问题怎么解决”实际上在考察工程化思维。比如“首屏加载速度怎么优化”答案不只是“压缩图片”这种老生常谈而是应该想到代码分割Code Splitting、按需加载、CDN加速、HTTP缓存、服务端渲染或预渲染等多个层面。能把开放性题目答出层次感的人往往是平时就对性能优化做过系统思考的人。我还有一次在笔试里看到一道题“如果让你从零搭建一个前端项目你会怎么做”。这道题没有标准答案考的就是工程化的全局观。我当时答的是先考虑技术栈选型和目录结构再配置构建工具和代码规范然后考虑联调和部署流程最后是监控和错误上报。能按这个顺序答的人不多很多人一上来就写代码没有结构化思考。这种题也是现在我面试时常用的“压轴题”因为它最能看出候选人有没有“项目owner”的意识。6. 常见问题与备考心得从笔试到offer的关键几步6.1 当年大家最容易踩的坑审题不清、基础概念混淆、时间分配失衡我整理了一下自己和身边同学当年踩过的坑发现几乎可以归结成三类。第一类是审题不清比如题目要求“手写一个防抖函数”结果很多人写了节流或者函数名写错这在笔试里非常吃亏。我至今记得有一次模拟考一个同学自信满满地说自己写出来了结果他把debounce和throttle搞混了函数注释还写错了这种失误完全是可避免的。第二类是基础概念混淆典型的是把null和undefined搞混、分不清和的完整规则或者以为Array.isArray是ES6才有的其实ES5就有。第三类是时间分配失衡前面的选择题和简答题花太多时间导致编程题匆匆作答代码没写完就交了。我的建议是笔试前先做两套完整的模拟题掐着时间做重点感受“时间消耗”和“心态管理”这样到了真实考场上才不会手忙脚乱。6.2 有效准备这类笔试的三个阶段扫盲、深化和模拟我自己的备考过程可以分成三个阶段分享出来供大家参考。第一阶段是扫盲把所有基础知识点列成清单比如JavaScript核心机制、浏览器渲染原理、HTTP协议、CSS布局、常用算法逐个过一遍确保没有知识盲区。第二阶段是深化每到一个考点不是“我懂了”就过而是自己问自己三个问题它是什么它为什么这么设计它解决了什么问题这三个问题能回答清楚基本就理解到位了。第三阶段是模拟找历年真题或者高质量的模拟题限时做做完之后认真复盘把每道题背后的知识点重新梳理一遍不只对答案还要把自己的思路和标准思路做对比。我当时做了至少十套模拟题每一道错题都整理成笔记后来面试时碰到类似题型基本不慌。6.3 针对这份2017年笔试题的专项复习建议如果你现在正打算拿这份题目练手我提几个针对性建议。第一JavaScript部分重点练手写bind、Promise、深拷贝、数组去重、防抖节流这些是一等一的高频题要练到肌肉记忆。第二浏览器和网络部分不要死记硬背而是结合DevTools的Network面板和Performance面板实际操作一遍看真实的缓存命中、看真实的渲染时间线这样理解的深度完全不一样。第三CSS部分别只看不写自己动手把水平垂直居中的几种方案都实现一遍感受一下不同方案在不同场景下的差异。第四框架部分虽然现在的版本变化大但“响应式原理”“虚拟DOM”“diff算法”这些底层概念永远值得看它们正是2017年笔试题目里隐含的进阶考点。我还想特别强调一点笔试不过是面试的敲门砖通过笔试后还有好几轮面试等着你。很多人在笔试里能写出正确答案但面试官一追问就露馅了。所以在准备笔试时就要刻意练习“说出理由”的能力——每一行代码、每一个方案都要能解释出背后的逻辑。这样才能真正地把知识变成自己的能力而不是一场考试的“临时记忆”。最后说一句我自己现在偶尔还会拿几道2017年的笔试题去“考”团队里的新同学不是为了刁难他们而是因为这套题目背后的设计思路已经成了我判断一个前端工程师基础能力的参照系。基础永远值得花时间去夯实它不会因为框架换了一茬又一茬就贬值反而会在时间的沉淀里越发显现价值。