我已经有几年没正经刷过笔试题了但上个月帮学弟整理面试资料翻出自己当年存的一份网易2018校招前端开发工程师笔试卷越看越觉得这批题出得扎实。它不像很多公司那样把题库堆得天花乱坠而是用有限的题目把基础、算法、框架认知、工程思维全部串了一遍。当时考完觉得被虐得很惨现在回头复盘发现每道题背后都在检验一件事这个人到底有没有真的写过前端还是只看过文档。所以这篇不是把原题重新搬运一遍而是从我自己的实战角度拆一拆这份卷子里反复出现的核心考点以及每类题拿到手之后应该怎么思考、怎么下手。不管你是准备校招还是工作两年想补基础这波分析应该都值得看一看。1. 那年网易校招前端笔试卷考的不是简历而是“可培养性”2018年的前端校招和现在不太一样。那会儿Vue和React的生态已经成熟公司不像前几年那样只问jQuery API开始考察设计模式、状态管理、构建工具、浏览器原理。但笔试卷仍然重点落在基础能力上因为面试官很清楚简历可以包装项目可以吹笔试这种限时闭卷的环境下一个人对语言的敏感度、对边界条件的本能反应是装不出来的。我当时拿到的这套卷子大概分四个部分选择题、简答题、编程题和大题。选择题里混着CSS、JS、网络、数据结构简答题让你用白话解释概念编程题两道是手撕代码一道偏算法一道偏业务大题给了一段代码让找问题并且改造成可维护的版本。现在回看这四个部分对应的是四个完全不同的能力维度记忆准确性、表达能力、抽象能力和工程嗅觉。很多人备考有个误区以为刷题就是刷LeetCode和牛客网上的原题。实际从这套卷子能看出来网易出题人更在意的是你是否理解前端这个领域“为什么需要这些知识”。比如选择题里同时出现for循环和forEach的性能比较、JS数字精度、HTTP状态码这些都不是单一技术栈里的东西而是前端日常工作中随时要碰到的底子。底子不牢项目里写出的代码大概率就是能跑但经不起推敲。另外一个值得注意的点是这套卷子的简答题没有考什么“你最喜欢哪个框架”这种务虚题而是直接让你写“什么是事件冒泡和事件委托”“描述一次从输入URL到页面展示的完整过程”。这种题你要是能写得有条理说明你对浏览器和JS执行机制有系统认知你要是只背过概念往往写不了几行就断篇了。后者在筛选中会被迅速标记出来。所以现在准备校招的人不要把这个阶段的笔试当成一次性的考试它其实在模拟你入职后快速定位问题、给出方案的能力。网易这种级别的公司招前端不是招一个只会写首页的切图工而是招一个能独立负责模块、遇事能想清楚来龙去脉的人。笔试只是把这种要求量化成了纸张上的分数。2. 选择题里的“老送命题”CSS布局、浏览器缓存与状态码2.1 布局类题目从浮动到Flex送分还是送命那个年代的选择题里CSS布局是必考项而且不直接问你Flex怎么用而是给一段代码让你判断最终渲染出的宽度或者排列效果。最经典的就是“两列布局左边固定200px右边自适应”的实现方式选项里有floatmargin、position绝对定位、flex、grid。这题看起来简单实际四个选项都能实现但区别在于是否考虑父容器高度塌陷、是否适应更复杂的左右顺序调整、代码是否简洁。我当时的经验是遇到这种题先画草图把每个方案的“包含块”关系理清楚。float会脱离文档流父元素需要清浮动position absolute是相对最近的定位祖先如果父级没有定位就会相对视口跳出去flex天生就是为这种单行布局设计的但要注意主轴方向对齐和最小内容宽度溢出问题比如右边内容是一长串连续英文不设置min-width: 0的话宽度会被内容撑破。这些边界条件才是出题人真正想看到的。另一个高频考点是BFC块级格式化上下文。卷子上会用一道选择题问“下列哪些方式可以创建BFC”答案包括overflow: hidden、float: left、display: inline-block、position: absolute等等。这个考的是对文档流和格式化上下文的理解。BFC最大的作用之一就是用来容纳浮动元素、阻止外边距折叠。实际工作中这些知识可能不会天天用到但在排查布局bug时知道如何触发BFC能让你少走很多弯路。2.2 网络与缓存你以为背了就能得分网络题的经典问法之一是“强缓存与协商缓存的区别”。网易的选择题喜欢把场景和状态码混在一起出比如“某资源返回200 OK且响应头有Cache-Control: max-age3600可能的原因是”或者“当服务端资源更新后客户端仍然使用旧资源应该使用哪个请求头”这类题目的核心是区分有效期判断与服务端验证。我的理解框架很简单强缓存是浏览器自己说了算没过期就不发请求协商缓存是浏览器带着条件If-Modified-Since / ETag去问服务器服务器说“没变”就返回304。笔试里经常挖的坑是Cache-Control的优先级高于Expiresno-cache不等于不缓存而是每次都要回源校验。曾经我就把no-cache当成了“禁用缓存”后来才理解它的意思是“允许缓存但使用前必须验证”。状态码这一块前端要知道的不仅是200和404。网易卷子里出现过502、504、301、302的区别以及301和308的语义差异。这几个在开发环境和线上问题排查中都经常遇到301是永久重定向302是临时重定向308是保留方法和请求体的永久重定向。如果是POST请求302在旧标准里可能被改写成GET这种细节虽然在新标准里已经修正但很多老浏览器和代理仍然有兼容差异。笔试考到这种程度就是看你是不是一个“靠细节吃饭”的程序员。3. JS这座深水区原型链、闭包与事件循环的连环考法3.1 原型链与new手写实现是照妖镜JS选择题里有一道几乎跑不掉的题new操作符在这个过程中到底做了什么选项里列了四段代码描述让你选对。我当时凭记忆猜的后来被面试官追问“如果不使用new怎么用Object.create实现一个实例”才意识到自己并没有真正理解new的本质。new的过程其实就是四件事创建一个空对象将这个对象的原型指向构造函数的prototype属性以这个对象作为this上下文执行构造函数里面的语句如果构造函数返回的是一个对象就返回那个对象否则返回第一步创建的对象。这个逻辑用代码写出来是这样的function myNew(constructor, ...args) { const obj {}; obj.__proto__ constructor.prototype; const result constructor.apply(obj, args); return result ! null typeof result object ? result : obj; }这里有几个边界要注意构造函数如果显式返回一个基本类型比如0、abcnew出来的结果会被忽略仍然返回创建的对象如果返回的是对象则直接使用返回值。这类题目网易笔试几乎必出因为原型链知识点是后续理解继承、Class语法糖、组件库源码的基石。3.2 异步与事件循环输出顺序题就是逻辑肌肉JS选择题里让我印象最深的一道是给出一段混合了setTimeout、Promise、async/await的代码问输出的顺序。这种题现在也常出现在各家笔试中但2018年网易的出法更隐蔽它会嵌套Promise和微任务的组合。比如console.log(A); setTimeout(() { console.log(B); Promise.resolve().then(() console.log(C)); }, 0); Promise.resolve().then(() { console.log(D); setTimeout(() console.log(E), 0); });正确答案是A、D、B、C、E。理由是先执行同步代码A把外层setTimeout放进宏任务队列执行Promise.then打印D再把内层的setTimeout放进宏任务队列第一个宏任务setTimeout执行打印B内层Promise.then进入微任务队列当前宏任务结束后清空微任务打印C然后是下一个宏任务setTimeout打印E。这个知识点看着简单但牵扯到宏任务和微任务的划分、Promise回调的注册时机、async/await的隐形await边界。网易会在这个基础上再叠一层requestAnimationFrame和MutationObserver考察你对帧回调与微任务优先级的理解。这类题目想拿分光背结论是不够的最好能自己画一遍事件循环的队列图把每一步谁先入队谁先出队标清楚。3.3 闭包与作用域简答题里最容易被低估简答题中有一道“什么是闭包请举例说明实际用途”。很多人的回答是“函数内部访问外部变量”这么答最多得一半分。真正有经验的人会补充闭包的形成条件是内部函数被外部引用导致其作用域链被保留它的实际价值在于让数据私有化在回调函数和模块化代码里非常常见。function createCounter() { let count 0; return { increment() { count; return count; }, getCount() { return count; } }; } const counter createCounter(); counter.increment();如果不靠闭包count只能挂到全局变量或者对象的公开属性上很容易被误改。笔试时如果能写出这种代码并解释内存回收需要手动置null的场景说明你真的在工程里用过闭包而不是背了概念。网易这道题背后的意图就是在筛选那些能理解“函数也是一等公民”的人。4. 算法题里的“前端味道”边界条件比最优解更吃香4.1 字符串类题目考的是遍历与状态记录网易2018这套卷子的编程题第一道我的记忆中和字符串处理有关但网上的版本不一。以这一类题为例最常见的变体是“给定一个字符串找出最长无重复字符的子串长度”。这题标准的解法是滑动窗口用双指针加一个Set维护窗口内的去重记录。很多前端同学看到“最长”两个字就开始想动态规划其实没必要。function lengthOfLongestSubstring(s) { const set new Set(); let left 0, right 0, maxLen 0; while (right s.length) { if (!set.has(s[right])) { set.add(s[right]); right; maxLen Math.max(maxLen, set.size); } else { set.delete(s[left]); left; } } return maxLen; }这题前端岗位的考察重点不在“你能背出滑动窗口模板”而是你是否能处理空字符串、全重复字符串、Unicode字符比如emoji这些边界条件。当年很多人死在了for循环里用s[index]取字符没想过s[index]对于码点大于0xFFFF的字符会取到半个码元。这个细节其实在真实的字符串处理业务中很关键比如用户名emoji校验、文案长度统计。4.2 数组与树从暴力解到优化的思考路径选择题里出现过多叉树和数组的转换。另一种常考的是“数组扁平化”。这个题目有很多种解法但笔试要求你手写递归考察你对递归退出条件的把握。function flatten(arr, depth 1) { return arr.reduce((acc, cur) { return acc.concat(Array.isArray(cur) depth 0 ? flatten(cur, depth - 1) : cur); }, []); }如果Array.isArray是false就直接把当前值推入结果如果true但depth已经用完也要把当前数组作为一个整体推入结果。网易的算法题虽然难度达不到竞赛级别但会把“边界条件”作为隐性得分点如果你在答卷上写了注释说明为什么depth用1而不是Infinity面试官会认为你不止会抄解法还理解参数设计的动机。4.3 手写防抖节流业务代码的算法题还有一道看起来不算算法、其实考算法思想的题手写防抖和节流。当年我实在没写出来后来复盘才明白它的关键点是定时器的管理与this的绑定。防抖是事件触发后延迟执行如果间隔内再次触发就重新计时节流是每隔固定时间至少执行一次。写出来就是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 last 0; return function(...args) { const now Date.now(); if (now - last interval) { last now; fn.apply(this, args); } }; }这段代码里必须用apply绑定this因为实际调用场景里回调函数内部的this往往指向事件绑定的DOM元素。网易把这种题放进编程题就是要看看你在写工具函数的一瞬间脑子里有没有自动带入真实业务场景。5. 从那套笔试卷反推“网易想要什么样的前端”5.1 工程意识不只要跑通还要考虑复用和可维护大题部分网易给了一段“面条式”的jQuery代码功能大概是点击按钮后发请求、更新DOM、切换样式所有逻辑写在一个click回调里。要求是改写成可维护代码。我当年只会把回调拆成几个函数但命名还是随意。后来才意识到这种题的核心考点在于“拆分粒度”。正确的思路是把DOM操作与数据处理分离把请求逻辑封装成单独的函数把状态变化抽象成有限状态。用今天的话说就是把命令式代码改成声明式、可测试的代码。就算当时没有用到Vue或React也可以用简单的模块化方式来组织比如const service { fetchData(url) { return fetch(url).then(res res.json()); } }; const ui { renderList(data) { // ... } }; function init() { const button document.getElementById(btn); button.addEventListener(click, () { service.fetchData(/api/list) .then(data ui.renderList(data)) .catch(error ui.showError(error)); }); }这段代码虽然简单但已经把网络层、视图层、入口控制层做了区分。网易面试官看到这样的答卷基本可以断定这个人有写多页应用的经验至少踩过回调地狱的坑。5.2 对框架的认知Vue响应式原理为什么屡屡出现网络热词里频繁出现“前端开发规范vue”和“前端开发skills”说明Vue在2018年的网易笔试中占据重要位置。试卷简答题里有一道“Vue中响应式数据是如何实现的”这题当年难倒不少人。其实答案就是Object.defineProperty配合发布订阅模式遍历data里的属性为它们定义getter和setter在getter里收集依赖在setter里通知视图更新。但这里存在数组索引和新增属性的监听盲区所以Vue 2提供了Vue.set来弥补这也是笔试里经常出的坑。function observe(obj) { if (typeof obj ! object || obj null) return; Object.keys(obj).forEach(key { let value obj[key]; observe(value); Object.defineProperty(obj, key, { enumerable: true, configurable: true, get() { return value; }, set(newValue) { if (newValue ! value) { observe(newValue); value newValue; // notify subscribers } } }); }); }到了今天面试更常问Proxy和Vue 3的差异但2018年那个节点能写出Object.defineProperty的实现基本可以证明你对框架不再停留在“会用”。网易问这个问题的本意大概率是希望前端工程师遇到框架bug时能往底层看一层不能只会在Stack Overflow上找答案。5.3 代码规范和浏览器兼容这些题里藏着岗位要求选择题里出现过“对数组的空位处理map和forEach结果的差异”“严格模式的特点”“script标签的async与defer区别”。这些题单独看都很基础但它们共同指向一个岗位要求前端工程师必须为不同的浏览器环境负责。2018年还需要考虑IE11兼容所以网易问了很多ES5的属性和数组方法。比如Array.prototype.map在稀疏数组上会保留空槽而forEach会跳过空槽Object.keys不会返回不可枚举属性但for...in会包含原型链上的可枚举属性。这些看似偏门的知识实际上是排障时的重要线索。6. 做完这套卷子我总结出的五条备战教训6.1 基础巩固不要依赖“几百题速刷”我见过很多同学在牛客上刷了上千道选择但换个表述就懵。网易这套卷子提醒我刷题的正确姿势是每道题不仅要选对还要能解释为什么其余三项错。比如“HTTP 301和302的区别”你不光要知道301是永久重定向还要知道在SEO中301比302更有利于权重转移知道在客户端路由单页应用中滥用302可能导致每次刷新丢失当前URL。这样才算是真正吃透。6.2 手写代码必须脱离IDE靠纸笔练习笔试是白板代码或者在线编辑器但没有代码提示和平时开发完全两个体验。我第一次做防抖题时脑子里完全清楚逻辑但落到纸上连function的关键字都快忘了怎么写。后来我制定了一个连Linux命令都写在纸上的计划每天手写两个简单的工具函数去重、防抖、深浅拷贝坚持两周手感就回来了。这件事看起来笨却非常有效。6.3 算法题宁可先写暴力解也不要交白卷编程题里很多人的问题不是不会而是总想一上来就写最优解。网易的判分员可能更看重思考过程所以笔试时如果写不出滑动窗口可以先写一个O(n^3)的暴力解在注释里说明“这个方法遍历所有子串显然超时但能保证正确”然后再紧跟着写优化思路。这种答卷传递的信息是我知道自己在干什么也知道效率瓶颈在哪。很多面试官反而更欣赏这种坦诚。6.4 会讲思路比会写答案更值钱尤其是简答题和大题网易笔试这类人工阅卷的卷子阅卷人更希望看到你的推理过程。比如问“如何让一个元素在页面垂直水平居中”你不仅要写flex或绝对定位的代码还要说清楚使用absolute时为什么要求父元素有定位上下文。在答题时适当加上注释有时会让阅卷人好感大增。这个习惯后来也延续到了我写技术文档和评审别人代码的过程中。6.5 岗位匹配度往往藏在细节里我这次复盘最意外的发现是很多细节其实是在映射网易内部的业务场景。它问缓存和状态码可能是因为门户网站要处理大量静态资源的加载它问Vue响应式原理可能是因为相关业务团队确实在用Vue做中后台系统它问事件冒泡可能是因为资讯流列表里有大量事件绑定的性能优化需求。所以如果你能在卷子里提到“事件委托可以减少监听器数量尤其适用于长列表”远比泛泛地写一个addEventListener示例更有说服力。那套2018年的卷子在今天看来更像是一张前端基础能力的通用体检表。它没有太难的偏题却把日常开发中容易忽略的角落翻了个底朝天。我后来也面过不少人发现一个有趣的现象能在笔试里把边界条件和异常处理写得仔细的人入职后的代码review问题也少得多。对于准备校招的朋友我的建议是别纠结于某一道题的对错而是把每一道题都当成一次和出题人的对话去想想他到底在提醒你什么。前端这个领域基础会以各种形式反哺你的成长而类似网易2018这套笔试卷就是很好的检查方式。 网易2018校招前端笔试题复盘：从基础考点到工程思维全拆解
我已经有几年没正经刷过笔试题了但上个月帮学弟整理面试资料翻出自己当年存的一份网易2018校招前端开发工程师笔试卷越看越觉得这批题出得扎实。它不像很多公司那样把题库堆得天花乱坠而是用有限的题目把基础、算法、框架认知、工程思维全部串了一遍。当时考完觉得被虐得很惨现在回头复盘发现每道题背后都在检验一件事这个人到底有没有真的写过前端还是只看过文档。所以这篇不是把原题重新搬运一遍而是从我自己的实战角度拆一拆这份卷子里反复出现的核心考点以及每类题拿到手之后应该怎么思考、怎么下手。不管你是准备校招还是工作两年想补基础这波分析应该都值得看一看。1. 那年网易校招前端笔试卷考的不是简历而是“可培养性”2018年的前端校招和现在不太一样。那会儿Vue和React的生态已经成熟公司不像前几年那样只问jQuery API开始考察设计模式、状态管理、构建工具、浏览器原理。但笔试卷仍然重点落在基础能力上因为面试官很清楚简历可以包装项目可以吹笔试这种限时闭卷的环境下一个人对语言的敏感度、对边界条件的本能反应是装不出来的。我当时拿到的这套卷子大概分四个部分选择题、简答题、编程题和大题。选择题里混着CSS、JS、网络、数据结构简答题让你用白话解释概念编程题两道是手撕代码一道偏算法一道偏业务大题给了一段代码让找问题并且改造成可维护的版本。现在回看这四个部分对应的是四个完全不同的能力维度记忆准确性、表达能力、抽象能力和工程嗅觉。很多人备考有个误区以为刷题就是刷LeetCode和牛客网上的原题。实际从这套卷子能看出来网易出题人更在意的是你是否理解前端这个领域“为什么需要这些知识”。比如选择题里同时出现for循环和forEach的性能比较、JS数字精度、HTTP状态码这些都不是单一技术栈里的东西而是前端日常工作中随时要碰到的底子。底子不牢项目里写出的代码大概率就是能跑但经不起推敲。另外一个值得注意的点是这套卷子的简答题没有考什么“你最喜欢哪个框架”这种务虚题而是直接让你写“什么是事件冒泡和事件委托”“描述一次从输入URL到页面展示的完整过程”。这种题你要是能写得有条理说明你对浏览器和JS执行机制有系统认知你要是只背过概念往往写不了几行就断篇了。后者在筛选中会被迅速标记出来。所以现在准备校招的人不要把这个阶段的笔试当成一次性的考试它其实在模拟你入职后快速定位问题、给出方案的能力。网易这种级别的公司招前端不是招一个只会写首页的切图工而是招一个能独立负责模块、遇事能想清楚来龙去脉的人。笔试只是把这种要求量化成了纸张上的分数。2. 选择题里的“老送命题”CSS布局、浏览器缓存与状态码2.1 布局类题目从浮动到Flex送分还是送命那个年代的选择题里CSS布局是必考项而且不直接问你Flex怎么用而是给一段代码让你判断最终渲染出的宽度或者排列效果。最经典的就是“两列布局左边固定200px右边自适应”的实现方式选项里有floatmargin、position绝对定位、flex、grid。这题看起来简单实际四个选项都能实现但区别在于是否考虑父容器高度塌陷、是否适应更复杂的左右顺序调整、代码是否简洁。我当时的经验是遇到这种题先画草图把每个方案的“包含块”关系理清楚。float会脱离文档流父元素需要清浮动position absolute是相对最近的定位祖先如果父级没有定位就会相对视口跳出去flex天生就是为这种单行布局设计的但要注意主轴方向对齐和最小内容宽度溢出问题比如右边内容是一长串连续英文不设置min-width: 0的话宽度会被内容撑破。这些边界条件才是出题人真正想看到的。另一个高频考点是BFC块级格式化上下文。卷子上会用一道选择题问“下列哪些方式可以创建BFC”答案包括overflow: hidden、float: left、display: inline-block、position: absolute等等。这个考的是对文档流和格式化上下文的理解。BFC最大的作用之一就是用来容纳浮动元素、阻止外边距折叠。实际工作中这些知识可能不会天天用到但在排查布局bug时知道如何触发BFC能让你少走很多弯路。2.2 网络与缓存你以为背了就能得分网络题的经典问法之一是“强缓存与协商缓存的区别”。网易的选择题喜欢把场景和状态码混在一起出比如“某资源返回200 OK且响应头有Cache-Control: max-age3600可能的原因是”或者“当服务端资源更新后客户端仍然使用旧资源应该使用哪个请求头”这类题目的核心是区分有效期判断与服务端验证。我的理解框架很简单强缓存是浏览器自己说了算没过期就不发请求协商缓存是浏览器带着条件If-Modified-Since / ETag去问服务器服务器说“没变”就返回304。笔试里经常挖的坑是Cache-Control的优先级高于Expiresno-cache不等于不缓存而是每次都要回源校验。曾经我就把no-cache当成了“禁用缓存”后来才理解它的意思是“允许缓存但使用前必须验证”。状态码这一块前端要知道的不仅是200和404。网易卷子里出现过502、504、301、302的区别以及301和308的语义差异。这几个在开发环境和线上问题排查中都经常遇到301是永久重定向302是临时重定向308是保留方法和请求体的永久重定向。如果是POST请求302在旧标准里可能被改写成GET这种细节虽然在新标准里已经修正但很多老浏览器和代理仍然有兼容差异。笔试考到这种程度就是看你是不是一个“靠细节吃饭”的程序员。3. JS这座深水区原型链、闭包与事件循环的连环考法3.1 原型链与new手写实现是照妖镜JS选择题里有一道几乎跑不掉的题new操作符在这个过程中到底做了什么选项里列了四段代码描述让你选对。我当时凭记忆猜的后来被面试官追问“如果不使用new怎么用Object.create实现一个实例”才意识到自己并没有真正理解new的本质。new的过程其实就是四件事创建一个空对象将这个对象的原型指向构造函数的prototype属性以这个对象作为this上下文执行构造函数里面的语句如果构造函数返回的是一个对象就返回那个对象否则返回第一步创建的对象。这个逻辑用代码写出来是这样的function myNew(constructor, ...args) { const obj {}; obj.__proto__ constructor.prototype; const result constructor.apply(obj, args); return result ! null typeof result object ? result : obj; }这里有几个边界要注意构造函数如果显式返回一个基本类型比如0、abcnew出来的结果会被忽略仍然返回创建的对象如果返回的是对象则直接使用返回值。这类题目网易笔试几乎必出因为原型链知识点是后续理解继承、Class语法糖、组件库源码的基石。3.2 异步与事件循环输出顺序题就是逻辑肌肉JS选择题里让我印象最深的一道是给出一段混合了setTimeout、Promise、async/await的代码问输出的顺序。这种题现在也常出现在各家笔试中但2018年网易的出法更隐蔽它会嵌套Promise和微任务的组合。比如console.log(A); setTimeout(() { console.log(B); Promise.resolve().then(() console.log(C)); }, 0); Promise.resolve().then(() { console.log(D); setTimeout(() console.log(E), 0); });正确答案是A、D、B、C、E。理由是先执行同步代码A把外层setTimeout放进宏任务队列执行Promise.then打印D再把内层的setTimeout放进宏任务队列第一个宏任务setTimeout执行打印B内层Promise.then进入微任务队列当前宏任务结束后清空微任务打印C然后是下一个宏任务setTimeout打印E。这个知识点看着简单但牵扯到宏任务和微任务的划分、Promise回调的注册时机、async/await的隐形await边界。网易会在这个基础上再叠一层requestAnimationFrame和MutationObserver考察你对帧回调与微任务优先级的理解。这类题目想拿分光背结论是不够的最好能自己画一遍事件循环的队列图把每一步谁先入队谁先出队标清楚。3.3 闭包与作用域简答题里最容易被低估简答题中有一道“什么是闭包请举例说明实际用途”。很多人的回答是“函数内部访问外部变量”这么答最多得一半分。真正有经验的人会补充闭包的形成条件是内部函数被外部引用导致其作用域链被保留它的实际价值在于让数据私有化在回调函数和模块化代码里非常常见。function createCounter() { let count 0; return { increment() { count; return count; }, getCount() { return count; } }; } const counter createCounter(); counter.increment();如果不靠闭包count只能挂到全局变量或者对象的公开属性上很容易被误改。笔试时如果能写出这种代码并解释内存回收需要手动置null的场景说明你真的在工程里用过闭包而不是背了概念。网易这道题背后的意图就是在筛选那些能理解“函数也是一等公民”的人。4. 算法题里的“前端味道”边界条件比最优解更吃香4.1 字符串类题目考的是遍历与状态记录网易2018这套卷子的编程题第一道我的记忆中和字符串处理有关但网上的版本不一。以这一类题为例最常见的变体是“给定一个字符串找出最长无重复字符的子串长度”。这题标准的解法是滑动窗口用双指针加一个Set维护窗口内的去重记录。很多前端同学看到“最长”两个字就开始想动态规划其实没必要。function lengthOfLongestSubstring(s) { const set new Set(); let left 0, right 0, maxLen 0; while (right s.length) { if (!set.has(s[right])) { set.add(s[right]); right; maxLen Math.max(maxLen, set.size); } else { set.delete(s[left]); left; } } return maxLen; }这题前端岗位的考察重点不在“你能背出滑动窗口模板”而是你是否能处理空字符串、全重复字符串、Unicode字符比如emoji这些边界条件。当年很多人死在了for循环里用s[index]取字符没想过s[index]对于码点大于0xFFFF的字符会取到半个码元。这个细节其实在真实的字符串处理业务中很关键比如用户名emoji校验、文案长度统计。4.2 数组与树从暴力解到优化的思考路径选择题里出现过多叉树和数组的转换。另一种常考的是“数组扁平化”。这个题目有很多种解法但笔试要求你手写递归考察你对递归退出条件的把握。function flatten(arr, depth 1) { return arr.reduce((acc, cur) { return acc.concat(Array.isArray(cur) depth 0 ? flatten(cur, depth - 1) : cur); }, []); }如果Array.isArray是false就直接把当前值推入结果如果true但depth已经用完也要把当前数组作为一个整体推入结果。网易的算法题虽然难度达不到竞赛级别但会把“边界条件”作为隐性得分点如果你在答卷上写了注释说明为什么depth用1而不是Infinity面试官会认为你不止会抄解法还理解参数设计的动机。4.3 手写防抖节流业务代码的算法题还有一道看起来不算算法、其实考算法思想的题手写防抖和节流。当年我实在没写出来后来复盘才明白它的关键点是定时器的管理与this的绑定。防抖是事件触发后延迟执行如果间隔内再次触发就重新计时节流是每隔固定时间至少执行一次。写出来就是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 last 0; return function(...args) { const now Date.now(); if (now - last interval) { last now; fn.apply(this, args); } }; }这段代码里必须用apply绑定this因为实际调用场景里回调函数内部的this往往指向事件绑定的DOM元素。网易把这种题放进编程题就是要看看你在写工具函数的一瞬间脑子里有没有自动带入真实业务场景。5. 从那套笔试卷反推“网易想要什么样的前端”5.1 工程意识不只要跑通还要考虑复用和可维护大题部分网易给了一段“面条式”的jQuery代码功能大概是点击按钮后发请求、更新DOM、切换样式所有逻辑写在一个click回调里。要求是改写成可维护代码。我当年只会把回调拆成几个函数但命名还是随意。后来才意识到这种题的核心考点在于“拆分粒度”。正确的思路是把DOM操作与数据处理分离把请求逻辑封装成单独的函数把状态变化抽象成有限状态。用今天的话说就是把命令式代码改成声明式、可测试的代码。就算当时没有用到Vue或React也可以用简单的模块化方式来组织比如const service { fetchData(url) { return fetch(url).then(res res.json()); } }; const ui { renderList(data) { // ... } }; function init() { const button document.getElementById(btn); button.addEventListener(click, () { service.fetchData(/api/list) .then(data ui.renderList(data)) .catch(error ui.showError(error)); }); }这段代码虽然简单但已经把网络层、视图层、入口控制层做了区分。网易面试官看到这样的答卷基本可以断定这个人有写多页应用的经验至少踩过回调地狱的坑。5.2 对框架的认知Vue响应式原理为什么屡屡出现网络热词里频繁出现“前端开发规范vue”和“前端开发skills”说明Vue在2018年的网易笔试中占据重要位置。试卷简答题里有一道“Vue中响应式数据是如何实现的”这题当年难倒不少人。其实答案就是Object.defineProperty配合发布订阅模式遍历data里的属性为它们定义getter和setter在getter里收集依赖在setter里通知视图更新。但这里存在数组索引和新增属性的监听盲区所以Vue 2提供了Vue.set来弥补这也是笔试里经常出的坑。function observe(obj) { if (typeof obj ! object || obj null) return; Object.keys(obj).forEach(key { let value obj[key]; observe(value); Object.defineProperty(obj, key, { enumerable: true, configurable: true, get() { return value; }, set(newValue) { if (newValue ! value) { observe(newValue); value newValue; // notify subscribers } } }); }); }到了今天面试更常问Proxy和Vue 3的差异但2018年那个节点能写出Object.defineProperty的实现基本可以证明你对框架不再停留在“会用”。网易问这个问题的本意大概率是希望前端工程师遇到框架bug时能往底层看一层不能只会在Stack Overflow上找答案。5.3 代码规范和浏览器兼容这些题里藏着岗位要求选择题里出现过“对数组的空位处理map和forEach结果的差异”“严格模式的特点”“script标签的async与defer区别”。这些题单独看都很基础但它们共同指向一个岗位要求前端工程师必须为不同的浏览器环境负责。2018年还需要考虑IE11兼容所以网易问了很多ES5的属性和数组方法。比如Array.prototype.map在稀疏数组上会保留空槽而forEach会跳过空槽Object.keys不会返回不可枚举属性但for...in会包含原型链上的可枚举属性。这些看似偏门的知识实际上是排障时的重要线索。6. 做完这套卷子我总结出的五条备战教训6.1 基础巩固不要依赖“几百题速刷”我见过很多同学在牛客上刷了上千道选择但换个表述就懵。网易这套卷子提醒我刷题的正确姿势是每道题不仅要选对还要能解释为什么其余三项错。比如“HTTP 301和302的区别”你不光要知道301是永久重定向还要知道在SEO中301比302更有利于权重转移知道在客户端路由单页应用中滥用302可能导致每次刷新丢失当前URL。这样才算是真正吃透。6.2 手写代码必须脱离IDE靠纸笔练习笔试是白板代码或者在线编辑器但没有代码提示和平时开发完全两个体验。我第一次做防抖题时脑子里完全清楚逻辑但落到纸上连function的关键字都快忘了怎么写。后来我制定了一个连Linux命令都写在纸上的计划每天手写两个简单的工具函数去重、防抖、深浅拷贝坚持两周手感就回来了。这件事看起来笨却非常有效。6.3 算法题宁可先写暴力解也不要交白卷编程题里很多人的问题不是不会而是总想一上来就写最优解。网易的判分员可能更看重思考过程所以笔试时如果写不出滑动窗口可以先写一个O(n^3)的暴力解在注释里说明“这个方法遍历所有子串显然超时但能保证正确”然后再紧跟着写优化思路。这种答卷传递的信息是我知道自己在干什么也知道效率瓶颈在哪。很多面试官反而更欣赏这种坦诚。6.4 会讲思路比会写答案更值钱尤其是简答题和大题网易笔试这类人工阅卷的卷子阅卷人更希望看到你的推理过程。比如问“如何让一个元素在页面垂直水平居中”你不仅要写flex或绝对定位的代码还要说清楚使用absolute时为什么要求父元素有定位上下文。在答题时适当加上注释有时会让阅卷人好感大增。这个习惯后来也延续到了我写技术文档和评审别人代码的过程中。6.5 岗位匹配度往往藏在细节里我这次复盘最意外的发现是很多细节其实是在映射网易内部的业务场景。它问缓存和状态码可能是因为门户网站要处理大量静态资源的加载它问Vue响应式原理可能是因为相关业务团队确实在用Vue做中后台系统它问事件冒泡可能是因为资讯流列表里有大量事件绑定的性能优化需求。所以如果你能在卷子里提到“事件委托可以减少监听器数量尤其适用于长列表”远比泛泛地写一个addEventListener示例更有说服力。那套2018年的卷子在今天看来更像是一张前端基础能力的通用体检表。它没有太难的偏题却把日常开发中容易忽略的角落翻了个底朝天。我后来也面过不少人发现一个有趣的现象能在笔试里把边界条件和异常处理写得仔细的人入职后的代码review问题也少得多。对于准备校招的朋友我的建议是别纠结于某一道题的对错而是把每一道题都当成一次和出题人的对话去想想他到底在提醒你什么。前端这个领域基础会以各种形式反哺你的成长而类似网易2018这套笔试卷就是很好的检查方式。