网易前端实习生笔试题解析：JavaScript、算法与浏览器机制

每年三四月份前端实习岗的笔试总是能刷屏技术社区。网易这套2018年前端实习生笔试题我印象很深——它不是什么偏题怪题几乎每一道都踩在前端开发者日常工作的主线上JavaScript的坑、浏览器机制、算法基本功、CSS布局、框架原理。也正因为基础它反而能拉开差距。实习生岗位的笔试题考的不是你背了多少API而是你拿到一个具体问题时的拆解思路和表达能力。这篇文章我就以这套题的方向为线索把考察点、解题思路、易错点完整梳理一遍。无论是准备暑期实习还是查漏补缺巩固基础都可以把它当成一次系统的前端知识体检。1. 前端笔试题的出题逻辑网易在筛选什么样的候选人1.1 实习生岗位的隐藏考察维度很多同学拿到笔试题的第一反应是“这些题我好像都会”但填完却心里没底。这就是实习笔试题的典型特征它不考你“知不知道”而是考你“怎么想”。网易前端实习题本质上是在筛选三类能力第一类是语言基础是否扎实。前端开发的核心语言是JavaScript笔试里大量题目都在围绕作用域、闭包、原型链、异步机制这些语言特性做文章。表面上是选择题实际上是在看你是否理解语言底层的执行逻辑而不是仅仅“用过”。第二类是工程意识是否初步建立。这反映在浏览器原理、HTTP机制、性能优化、代码输出顺序这些题目上。面试官想确认你有没有从“页面能跑”到“我知道页面为什么能跑”的转变。第三类是解决问题的结构化能力。算法题部分往往难度不大不要求你在ACM赛场上拿名次但要求你思路清晰、边界条件考虑周全并且能用代码把思路表达出来。这其实是工程师的核心能力把模糊问题拆解成可执行的步骤。1.2 笔试与面试的能力互补关系笔试承担的是“粗筛”角色面试承担的是“深聊”角色。所以笔试题通常有个特点覆盖面广、单题深度受限。一套卷子下来HTML、CSS、JavaScript、网络、算法、框架基本都要沾一遍每道题不会给你太多时间“绕圈子”。理解了这层逻辑备考方向就明确了不需要钻进犄角旮旯的冷门API但凡是教材里“重点章节”的内容都需要能落笔写出来。我在实际复习时给自己定了一个标准任何一个知识点如果我不能在一分钟内向别人讲清楚那它就不算掌握。2. JavaScript核心机制闭包、原型链与异步的高频陷阱2.1 this指向与闭包送分题还是送命题JavaScript笔试里this指向几乎必考。网易这套题里就有典型的this绑定题目考法很直接给你一段代码问输出什么。var name Window; var obj { name: Object, getName: function() { return function() { return this.name; }; } }; console.log(obj.getName()());这道题输出的是Window。原因是obj.getName()执行后返回的是一个普通函数这个函数在全局环境中调用它的this默认绑定到全局对象。闭包确实保留了变量环境但闭包不能改变this的绑定规则。很多同学错在以为闭包会把外层this一并保存实际上保存的是变量对象不是this。另一个高频变体是箭头函数var name Window; var obj { name: Object, getName: function() { return () this.name; } }; console.log(obj.getName()());换成箭头函数后输出Object因为箭头函数没有自己的this它会捕获定义时所在上下文的this值。这里恰好可以形成对比记忆普通函数的this看调用位置箭头函数的this看定义位置。2.2 原型链与继承把这张网画清楚原型链题目多以“下面代码输出什么”的形式出现function Parent() { this.name parent; } Parent.prototype.say function() { console.log(this.name); }; function Child() { this.name child; } Child.prototype new Parent(); var child new Child(); child.say();这个问题最终输出child。核心在于实例属性遮蔽原型属性child对象内部有name属性所以访问child.name不会沿着原型链往上走。而say方法是从原型链上找到的执行时this指向child实例因此输出child而不是parent。这类题我建议在草稿纸上画一条原型链实例child→Child.prototype→Parent.prototype→Object.prototype→null。只要属性查找路径清晰答案不会错。另外注意Child.prototype new Parent()这种方式的问题父实例的引用类型属性会被所有子实例共享这是个经典的坑笔试如果追问优化方案可以回答用Object.create(Parent.prototype)加构造函数继承的方式。2.3 事件循环异步输出顺序的标准答案异步考查是另一类高频题考的是事件循环Event Loop的理解。这类题网易也很偏爱尤其是宏任务与微任务的组合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属于宏任务。每一个宏任务执行完都会去清空微任务队列然后再从宏任务队列取下一个。这里我强烈建议把async/await的输出顺序也一并复习了async function test() { console.log(1); await Promise.resolve(); console.log(2); } test(); console.log(3);输出顺序是1、3、2。await后面的代码相当于被放进了Promise.then里属于微任务。3. 算法与数据结构常见笔试模式的前端化拆解3.1 数组去重与排序考察API还是要考察原理网易笔试题里的算法部分通常不会太难数组去重、字符串反转、排序是常客。但需要注意这类题目的重点往往不只是“实现出来”而是在多种方案里体现你的取舍能力。以数组去重为例三个层级的答案是递进的第一层用Setfunction unique(arr) { return [...new Set(arr)]; }第二层用filter加indexOffunction unique(arr) { return arr.filter((item, index) arr.indexOf(item) index); }第三层考虑对象的键或Map处理NaN、对象等场景function unique(arr) { const map new Map(); return arr.filter(item !map.has(item) map.set(item, true)); }如果是我来回答我会先说Set方案最简洁然后补充一句“但Set的去重基于SameValueZero算法NaN也能正确处理对引用类型则比较的是引用地址。如果需要按属性去重就要用Map做标记”。这个回答体现的不只是“会用API”而是明白API背后的规则。3.2 字符串与回文类题目边界条件比核心逻辑更值钱字符串反转是另一道典型题。基础写法很简单function reverse(str) { return str.split().reverse().join(); }但实际问题往往有变体reverse一个整数、判断回文、找出字符串中最长回文子串。网易这类题目的价值在于看你能不能处理边界条件。判断回文的标准写法function isPalindrome(s) { s s.replace(/[^a-zA-Z0-9]/g, ).toLowerCase(); let left 0, right s.length - 1; while (left right) { if (s[left] ! s[right]) return false; left; right--; } return true; }这类题的核心逻辑可能只需要10分钟就能想清楚但边界情况至少要列一遍空字符串、全标点符号、大小写、数字、奇偶长度。面试官真正看重的是你有没有列边界情况的习惯。3.3 二叉树遍历从递归到迭代的思维进阶如果笔试里出现树相关的题目大概率是二叉树的遍历。递归写法简单直观function inorderTraversal(root) { const result []; function traverse(node) { if (!node) return; traverse(node.left); result.push(node.val); traverse(node.right); } traverse(root); return result; }但能默写递归只是及格线。进阶要求是用迭代法实现function inorderTraversal(root) { const result []; const stack []; let current root; while (current || stack.length) { while (current) { stack.push(current); current current.left; } current stack.pop(); result.push(current.val); current current.right; } return result; }做这类题时我习惯在纸上模拟一遍栈的变化把节点进出栈的每一步画出来。尤其是中序遍历的“一路向左压栈、弹出访问、转右子树”三步曲一旦形成肌肉记忆考试时就不会卡壳。4. 浏览器与网络机制从URL输入到页面展示的完整链条4.1 页面加载过程一道可以展开成完整项目的问题浏览器的知识点在网易前端笔试题中占比不低常见考法是用一段“从输入URL到页面展示发生了什么”来串起DNS解析、TCP连接、HTTP请求、渲染引擎解析等环节。这道题的价值在于它把一个宏观问题拆解成多个清晰的子阶段考察你能否把零散知识组织成完整链路。我的回答模板大致如下解析URL浏览器判断输入的字符串是合法URL还是搜索关键字然后补全协议头。DNS解析查找浏览器缓存、系统缓存、路由器缓存、DNS服务器得到目标IP地址。建立TCP连接三次握手建立可靠连接如果是HTTPS还有TLS握手。发送HTTP请求请求行、请求头、请求体依次发送服务器处理后返回响应。浏览器解析渲染构建DOM树、CSSOM树生成渲染树布局Layout绘制Paint合成Composite。断开连接四次挥手释放TCP连接如果开启了keep-alive则复用连接。不要只背要点要能画出每个阶段的产出物和工作内容。比如渲染阶段DOM树和CSSOM树是并行构建的这个细节就常考。4.2 HTTP缓存机制强缓存与协商缓存的优先级判断HTTP缓存几乎是必考知识点。网易的题目通常会给你一张请求响应头表问你下一次请求是否走缓存、走的是哪种缓存。判断逻辑可以总结成三步优先判断强缓存检查Cache-Control请求头/响应头和Expires。如果Cache-Control: max-age秒未过期直接使用本地缓存不向服务器发请求。注意Expires是绝对时间容易被系统时间影响而Cache-Control是相对时间优先级更高。强缓存失效后走协商缓存请求带上If-Modified-Since或If-None-Match服务器根据Last-Modified或ETag判断资源是否变化。若未变化返回304 Not Modified浏览器继续用本地资源若已变化返回200和新资源。ETag优先于Last-Modified因为Last-Modified精度到秒文件改动过快时无法判断ETag基于文件内容生成更精确。我在准备这部分时会把常见的响应头字段做一张速查表这里也分享出来字段类型作用Cache-Control通用头强缓存主控制字段如max-age、no-cache、no-storeExpires响应头强缓存绝对过期时间HTTP/1.0产物ETag响应头协商缓存资源唯一标识配合If-None-MatchLast-Modified响应头协商缓存最后修改时间配合If-Modified-SinceAge响应头资源在缓存服务器中存活的时间4.3 前端安全基础XSS与CSRF的辨别与防护安全类题目在实习笔试题中属于“会的人不多但考到了就拉开差距”的类型。最常见的两个概念是XSS和CSRF。XSS跨站脚本攻击攻击者把恶意脚本注入到页面中在用户浏览器中执行。常见类型有存储型、反射型、DOM型。防护手段是对用户输入做转义或过滤设置Cookie的HttpOnly属性使用Content-Security-PolicyCSP限制脚本来源。CSRF跨站请求伪造攻击者诱导用户在已登录的站点上执行非本意的操作本质是“借刀杀人”。防护手段有使用CSRF Token并校验检查请求头的Origin/Referer字段对关键操作使用POST请求且附带自定义Header。判断两者最直观的方式是看攻击意图XSS是“打破数据机密性/完整性”CSRF是“利用身份伪造请求”。笔试做题时一旦分不清就问自己如果受害者不访问页面攻击是否无法展开若是多半是CSRF。5. CSS布局题目从需求到方案的快速匹配5.1 垂直水平居中经典题目的完整方案清单CSS布局题目里“垂直水平居中”出现频率奇高。网易的题目通常问两种东西一是“请你实现某布局”二是“给出尽可能多的方案并比较优劣”。垂直水平居中的方案至少要能写出四种/* 方案一flex */ .parent { display: flex; align-items: center; justify-content: center; } /* 方案二position transform父元素相对定位 */ .child { position: relative; left: 50%; top: 50%; transform: translate(-50%, -50%); } /* 方案三position margin: auto父元素相对定位 */ .child { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } /* 方案四grid */ .parent { display: grid; place-items: center; }回答这类题目时我会在给出方案后补一句适用范围flex方案适合父容器尺寸确定或未知都行transform方案适合子元素尺寸未知但已知父容器margin:auto需要子元素有明确宽高grid方案桌面端兼容性稍弱但现代浏览器已全面支持。5.2 两栏三栏布局与栅格系统嘴上说简单手底下见功夫布局题中两栏、三栏布局也是经典。常见的考法是“左侧固定宽度右侧自适应”这种最日常的需求。经典flex方案.container { display: flex; } .left { flex: 0 0 200px; } .right { flex: 1; }如果题目限定了不能使用flex还需要会floatBFC的兼容老方案。overflow: hidden给右侧创建BFC避免左侧浮动元素侵入右侧区域。虽然现在项目中早就用flex和grid了但笔试中多写一种方案恰是加分项能证明你了解布局演进的过程。5.3 移动端适配rem、vw与viewport的取舍移动端适配题目考察的是工程化思维。方案之间没有绝对优劣关键是说出取舍逻辑。rem方案通过设置document.documentElement.fontSize clientWidth / 设计稿宽度动态改变根字号配合postcss-pxtorem把px转rem。优点是兼容性好缺点是需要JS参与。vw方案width: 750px的设计稿直接写成width: 100vw单位换算天然适配。优点是纯CSS缺点是部分旧浏览器兼容性一般。viewport meta设置widthdevice-width, initial-scale1.0是移动端页面标配配合maximum-scale和user-scalable控制缩放行为。网易这类题目往往不会要求你写完整适配代码而是给出一个场景让你分析。答这类题的重心放在“为什么”上为什么用vw而不用百分比因为百分比是相对父元素计算vw是相对视口宽度计算在多级嵌套场景下vw更符合设计稿还原的需求。6. 框架原理题从“用过”到“能讲清”的进阶路径6.1 Vue响应式原理Object.defineProperty的边界与替代2018年前后端面试已经很爱问框架原理了。网易前端实习题中Vue的考察重点集中在响应式原理核心是用Object.defineProperty重写对象的getter和setter在读取时收集依赖在写入时触发更新。答题要点组件渲染时会读取响应式数据触发getter此时对应的Watcher会被收集到Dep中。数据发生变化时触发setter通知Dep里的所有Watcher更新触发视图重渲染。数组的push、pop等方法无法被Object.defineProperty拦截所以Vue 2要额外重写数组方法新增/删除对象属性也要用Vue.set/Vue.delete。这里补充一个细节Vue 3把响应式从Object.defineProperty换成了Proxy。原因很简单Proxy可以直接代理整个对象包括新增属性和数组索引变化不需要像Vue 2那样做各种hack。回答时可以提一句“如果面试官问Vue 2的局限这就是最核心的点”。6.2 虚拟DOM与Diff算法考的是对“为什么存在”的理解虚拟DOM的题目经常问“为什么要用虚拟DOM”。这个问题不能只答“操作DOM性能差”要从两个层面讲第一真实的DOM操作确实耗时频繁修改会引起重排和重绘虚拟DOM把多次操作合并为一次性差异更新。第二更重要的是跨平台能力。虚拟DOM是普通JS对象渲染层可以不只是浏览器DOM还能是移动端原生组件这就是React Native、Weex这类跨端方案的基础。Diff算法的核心是同层比较只比较同层的节点不跨层级比较通过key属性尽量复用节点减少创建和销毁的开销。答题时如果画一张新旧虚拟DOM树的对比图会清晰很多。但注意千万不要在纸上写伪代码面试时口头讲清楚流程就行。6.3 组件通信与前端开发规范贴近实际工作的能力探测框架题还会考察组件通信Vue里是props/$emit、事件总线、Vuex、provide/injectReact里是props、Context、Redux。题目一般会给定场景让你选方案。我的选择逻辑是父子组件直接用props传参 自定义事件。兄弟组件用父组件中转或全局事件总线。跨层级深层组件用Context或全局状态管理。大型项目统一用Vuex/Redux方便追踪数据流向。这类题目其实在探测你的工程习惯。2018年前后端开发已经普遍强调代码规范笔试中问组件通信方案不是考你记不记得API而是看你在多人协作时怎么设计数据流。一个原则值得记住数据流向越单一代码越容易维护。7. 考场实战经验时间分配与答题策略网易这套笔试题的时间压力不算极端但对知识面要求比较广。分享一下我在实际准备和复盘过程中的体会。时间分配建议选择题和基础题控制在总时长的40%左右算法题和应用题每道控制在10至15分钟最后留10分钟检查。如果一道题卡了超过15分钟先做标记跳过把后面有把握的题写完再回头想。很多同学容易在算法题上死磕结果导致CSS和网络题没时间做这非常可惜。答题策略前端笔试题不是非黑即白。除了代码题简答题一定要分点作答先写结论再写理由。如果题目要求“请实现一个函数”不要只贴代码在代码上方用一两行说明思路在关键行上加注释。这既方便自己理清逻辑也给面试官留下“这个候选人有工程习惯”的印象。复习优先级如果你的准备时间有限优先顺序是JavaScript核心机制、浏览器与网络、算法高频题、CSS布局、框架原理。这个顺序是我在实际面试中感受到的考察频率排序也是我后来带新人时反复强调的备考顺序。另外一定要动手写代码。很多人复习时“眼睛会了手不会”一看答案觉得简单自己写就卡壳。笔试考的是落笔能力不是阅读能力。我备考时会把每道经典题用全新环境默写一遍写不出来的题标记出来搞懂第二天再默写。这个循环重复三轮基本就不会在考场上忘记某个API的用法了。